Graphical user interface system
Systems and methods are provided for improved graphical user interfaces. The system enables multiple separate applications, each of which may typically be in their own separate window or tab, to be interacted within a single window, such as a tab of a web browser application. The main window includes smaller sub-windows that can correspond to a distinct application with its own graphical user interface. A large sub-window within the main window is opened for the primary application where the user is currently interacting with a graphical user interface of the primary application. The user then is able to switch between applications (all within the same main window) and applications that are no longer being used can be minimized in smaller sub-windows off to the side of the primary sub-window. The system enables a user to drag and drop an item from one sub-window to another sub-window. Some of the interactions between the windows and data transformations are stored and can be visually presented in a graph.
1. A method for a graphical user interface, the method comprising:
causing presentation, in a main window of a web browser application, of a first application in a first sub-window and a second application in a second sub-window, wherein presentation of the first application in the first sub-window is larger than the second application in the second sub-window, and wherein presentation of the first sub-window and the second sub-window are within the main window;
receiving a drag event message comprising a payload from the first application in the first sub-window, the payload comprising a data type and a first resource identifier;
transmitting the drag event message to the second application that causes the second application in the second sub-window to present an updated user interface indication in the second sub-window based at least in part on the data type;
receiving a drop event message comprising: (i) a source indication identifying the first application in the first sub-window, (ii) a destination indication identifying the second application in the second sub-window, and (iii) the first resource identifier;
in response to receiving the drop event message, transmitting an update message to the second application that causes the second application in the second sub-window to retrieve first data indicated by the first resource identifier;
storing a record of a drag and drop interaction for the first resource identifier between the first application in the first sub-window and the second application in the second sub-window;
determining, from the record of the drag and drop interaction, a relation between the first application and the second application that the first application provided input to the second application; and
causing an updated presentation, in the main window of the web browser application, of the second application in the second sub-window as larger than the first application in the first sub-window based at least in part on the source indication of the drop event message, the destination indication of the drop event message, and the relation,
wherein the method is performed by one or more computer hardware processors.
2. The method of claim 1 , further comprising:
causing presentation, in the main window of the web browser application, of a new layout of the first sub-window and the second sub-window, wherein causing presentation of the new layout further comprises:
determining a first position of the first application in the first sub-window and a second position of the second application in the second sub-window according to the relation; and
causing presentation, in the main window of the web browser application, of the first sub-window at the first position and the second sub-window at the second position.
3. The method of claim 2 , wherein causing presentation of the new layout further comprises:
scaling the second sub-window from a first size to a second size.
4. The method of claim 2 , further comprising:
generating a graph, wherein generating the graph comprises:
determining, from the record of the drag and drop interaction, a first node for the first application and a second node for the second application; and
connecting the first node to the second node according to the record of the drag and drop interaction that indicates a connection between the first application and the second application; and
causing presentation of the graph that includes a representation of the first node as visually connected to the second node.
5. The method of claim 1 , wherein the payload further comprises metadata regarding the first data, the method further comprising:
determining a textual description of the first data from the metadata; and
causing presentation of a user interface element for a drag user interaction, the user interface element comprising the textual description that previews the first data.
6. The method of claim 1 , wherein the drag event message comprises an HTTP POST message.
7. The method of claim 1 , wherein the first sub-window comprises a first iframe and the second sub-window comprises a second iframe.
8. A system comprising:
a non-transitory computer storage medium configured to at least store computer-executable instructions; and
one or more computer hardware processors in communication with the non-transitory computer storage medium, the one or more computer hardware processors configured to execute the computer-executable instructions to at least:
cause presentation, in a main window of a web browser application, of a first application in a first sub-window and a second application in a second sub-window, wherein presentation of the first application in the first sub-window is larger than the second application in the second sub-window, and wherein presentation of the first sub-window and the second sub-window are within the main window;
transmit a drag event message to the second application that causes the second application in the second sub-window to present an updated user interface indication in the second sub-window;
receive a drop event message comprising: (i) a source indication identifying the first application in the first sub-window, (ii) a destination indication identifying the second application in the second sub-window, and (iii) a first resource identifier;
in response to receiving the drop event message, transmit an update message to the second application that causes the second application in the second sub-window to retrieve first data indicated by the first resource identifier;
store a record of a drag and drop interaction for the first resource identifier between the first application in the first sub-window and the second application in the second sub-window;
determine, from the record of the drag and drop interaction, a relation between the first application and the second application that the first application provided input to the second application; and
cause an updated presentation, in the main window of the web browser application, of the second application in the second sub-window as larger than the first application in the first sub-window based at least in part on the source indication of the drop event message, the destination indication of the drop event message, and the relation.
9. The system of claim 8 , wherein the one or more computer hardware processors are further configured to:
cause presentation, in the main window of the web browser application, of a new layout of the first sub-window and the second sub-window, wherein causing presentation of the new layout further comprises:
determining a first position of the first application in the first sub-window and a second position of the second application in the second sub-window according to the relation; and
causing presentation of the first sub-window at the first position and the second sub-window at the second position.
10. The system of claim 9 , wherein causing presentation of the new layout further comprises:
scaling the second sub-window from a first size to a second size.
11. The system of claim 8 , wherein the one or more computer hardware processors are further configured to:
generate a graph, wherein generating the graph comprises:
determining, from the record of the drag and drop interaction, a first node for the first application and a second node for the second application; and
connecting the first node to the second node according to the record of the drag and drop interaction that indicates a connection between the first application and the second application; and
cause presentation of the graph that includes a representation of the first node as visually connected to the second node.
12. The system of claim 8 , wherein the payload further comprises metadata regarding the first data, and wherein the one or more computer hardware processors are further configured to:
determine a textual description of the first data from the metadata; and
cause presentation of a user interface element for a drag user interaction, the user interface element comprising the textual description that previews the first data.
13. The system of claim 12 , wherein determining the description further comprises:
generating the textual description that includes a summary of the first data.
14. The system of claim 8 , wherein the first application and the second application are hosted on separate domains.
15. The system of claim 8 , wherein the one or more computer hardware processors are further configured to:
cause presentation of a user interface comprising a historical view of a user interaction between the first application in the first sub-window and the second application in the second sub-window.