System for providing dynamic linked panels in user interface
A system is configured to provide a dashboard creation system. Panels associated with queries for retrieving information from a database are shown in a user interface. Various other user interfaces show query code, panel display settings, function code, dependencies, etc. The dependencies can be extracted and used to provide autocomplete and partial refreshing. A timing table shows execution times. Panel outputs and code updates can be shown and compared.
1. A computer system comprising:
one or more hardware computer processors configured to execute code in order to cause the computer system to:
generate user interface data for rendering a user interface that simultaneously includes at least a first display portion and a second display portion, wherein:
the first display portion includes a plurality of panels includes:
a first panel showing a first visual representation of first data for display in the first panel according to display settings for the first panel, the first panel associated with first code including a first variable; and
a second panel showing a second visual representation of second data for display in the second panel, the second panel associated with second code configured to query a database, based at least in part on the first variable, to receive the second data; and
the user interface further includes:
a third display portion including a node-and-edge graphical visualization of relationships among at least: a plurality of panels in the first display portion, a plurality of queries associated with the plurality of panels, a plurality of variables used in the plurality of queries, and a plurality of functions associated with the plurality of queries;
receive an edit to the first code;
automatically determine downstream dependencies of the edited first code, wherein the downstream dependencies include at least the second code and the second panel;
in response to determining the downstream dependencies:
execute the edited first code associated with the first panel;
execute code associated with the downstream dependencies of the edited first code, including at least the second code configured to query the database; and
display in the second display portion:
a comparison of timing information associated with executing the second code before and after receiving the edit to the first code; and
in response to a selection, made in the second display portion, of timing information associated with the second panel:
update the third display portion to visually indicate a node associated with the second panel and upstream dependencies of the node associated with the second panel; and
update the first display portion to visually indicate the second panel.
2. The computer system of claim 1 , wherein the timing information includes:
a first time for executing the second code;
a second time from querying the database, based at least in part on the first variable, to receiving the second data; and
a third time for loading the second panel showing the second visual representation of second data.
3. The computer system of claim 1 , wherein the user interface further comprises:
a third display portion including a list of queries and coding of a query in the list of queries;
a fourth display portion including a list of variables and values of variables in the list of variables; and
a fifth display portion including a list of functions and coding of a function in the list of functions.
4. The computer system of claim 1 , wherein:
the node-and-edge graphical visualization visually indicates dependency relationships between the plurality of panels, the plurality of queries, the plurality of variables, and the plurality of functions; and
the one or more hardware computer processors are further configured to execute the code in order to cause the computer system to update the dependency relationships in response to receiving the edit to the first code associated with the first panel.
5. The computer system of claim 1 , wherein nodes are represented as icons that are color coded with different colors for queries, variables, functions, and panels.
6. The computer system of claim 1 , wherein the one or more hardware computer processors are further configured to execute the code in order to cause the computer system to:
in response to a selection of a dependency filter criteria, visually indicate nodes and edges satisfying the dependency filter criteria in the third display portion.
7. A computer-implemented method comprising:
generating user interface data for rendering a user interface that simultaneously includes at least a first display portion and a second display portion, wherein:
the first display portion includes a plurality of panels includes:
a first panel showing a first visual representation of first data for display in the first panel according to display settings for the first panel, the first panel associated with first code including a first variable; and
a second panel showing a second visual representation of second data for display in the second panel, the second panel associated with second code configured to query a database, based at least in part on the first variable, to receive the second data; and
the user interface further includes:
a third display portion including a node-and-edge graphical visualization of relationships among at least: a plurality of panels in the first display portion, a plurality of queries associated with the plurality of panels, a plurality of variables used in the plurality of queries, and a plurality of functions associated with the plurality of queries;
receiving an edit to the first code;
automatically determining downstream dependencies of the edited first code, wherein the downstream dependencies include at least the second code and the second panel;
in response to determining the downstream dependencies:
executing the edited first code associated with the first panel;
executing code associated with the downstream dependencies of the edited first code, including at least the second code configured to query the database; and
displaying in the second display portion:
a comparison of timing information associated with executing the second code before and after receiving the edit to the first code; and
in response to a selection, made in the second display portion, of timing information associated with the second panel:
visually indicating the third display portion to visually indicate a node associated with the second panel and upstream dependencies of the node associated with the second panel; and
visually indicating the first display portion to visually indicate the second panel.
8. The computer-implemented method of claim 7 , wherein the timing information includes:
a first time for executing the second code;
a second time from querying the database, based at least in part on the first variable, to receiving the second data; and
a third time for loading the second panel showing the second visual representation of second data.
9. The computer-implemented method of claim 7 , wherein the user interface further comprises:
a third display portion including a list of queries and coding of a query in the list of queries;
a fourth display portion including a list of variables and values of variables in the list of variables; and
a fifth display portion including a list of functions and coding of a function in the list of functions.
10. The computer-implemented method of claim 7 , wherein the node-and-edge graphical visualization visually indicates dependency relationships between the plurality of panels, the plurality of queries, the plurality of variables, and the plurality of functions, the method further comprising:
updating the dependency relationships in response to receiving the edit to the query of the first panel.
11. The computer-implemented method of claim 7 , wherein nodes are represented as icons that are color coded with different colors for queries, variables, functions, and panels.
12. The computer-implemented method of claim 7 , further comprising:
in response to a selection of a dependency filter criteria, visually indicating nodes and edges satisfying the dependency filter criteria in the third display portion.