Skip to content

Design

Jump to bottom
Aleksey edited this page Feb 8, 2020 · 6 revisions

How widgets work?

Bitquery widgets are a set of user interface components for building rich analytical interfaces. They are specialized to used with the blockchain data, and intended to use with the GraphQL interface to bitquery.io analytical backend.

The whole system is combined from independent components:

  • backend data storage. It stores the data, extracted from blockchains in tables;
  • GraphQL interface for queries. This allows to specify which data is required, and it will decide how to query backend tables to deliver the data required;
  • Bitquery widgets, displaying data from GraphQL queries to the web interface
  • A web page or application, embedding widgets to build ultimate user interface for users

The whole request/response process works as:

  1. User navigate to a web page. It can be as example, the page for some blockchain address, e.g. https://explorer.bitquery.io/binance/address/bnb1qu59r9degdxqtzvhsqupcrnnwtr6qdv3n3usgg;

  2. The page loads the widgets placed on it and invokes them using Javascript, supplying GraphQL query with parameters. In our example the parameters may be the address ( bnb1qu59r9degdxqtzvhsqupcrnnwtr6qdv3n3usgg ) and optionally the data range. Set of allowed parameters is specific for a GraphQL query used;

  3. Widget composes the request to GraphQL API using parameters. It fetches the data from data warehouse and responds with the data in JSON format. What is good about the GraphQL is that the response data is ensured to exactly match the schema, specified in the request;

  4. Widgets displays data using javascript, canvas and other capabilities depending on the type of the widgets.

There are important points to mention in this process:

  • The query is not a part of the widget. Instead, the container ( in this example, web page ) is responsible for composing the complete GraphQL query. This makes usage of widgets much more flexible, as the same widget can be used with different blockchains, data, filters and dimensions. You even can customize this query on the fly, see Interacting with widgets section for details;

  • Container ( the page ) can interact with widgets using javascript. This allows to compose the queries dynamically, invoke widgets with required logic and listen to events. It allows to built very interactive interfaces as tools and dashboards;

  • The complexity of actual fetching the data from the blockchain and optimizing the queries is hidden and UI developer need to care about it.

Clone this wiki locally