Redesign the Orbit Schema tab as a clustered graph

Jean-Gabriel Doyonrequested to merge
feature/orbit-schema-graph into master

What does this MR do and why?

Redesigns Orbit > Schema as one graph of every entity type, clustered by area with the core entities in the middle. Hover or select an entity to draw its links with their names. Select it to open a card with its relationships, its properties, and a GQL query that opens in the Query editor. The old domain map, neighbor graph, entity picker, and details panel are deleted.

It also shows Quickstart on every Orbit tab, and sizes the full-height Orbit tabs to the content panel, so the page does not scroll.

References

Screenshots or screen recordings

Before After
schema-before-1440 schema-rest-light
schema-before-1440-mergerequest schema-mergerequest-card-light
Happy path Bad path Disaster path
What changes for users
  • All entity types show at once. Lines inside an area and between areas show at rest in a light tone. IN_PROJECT links almost every entity type, so it shows only as one line per area that has no other link to the core area.
  • Hover, keyboard focus, and selection show the same view: the links of the entity draw out from it with their names, and unrelated entities fade. Edge names that do not fit next to a line are left out on the canvas; the card lists them all.
  • Selecting Project draws its 23 IN_PROJECT lines with one IN_PROJECT · 23 entity types pill instead of 23 names. The card lists the 23 entity types in a list you expand.
  • The card has Properties (closed) and Connected entities (open), the count in your graph, Explore, and Start a query. Selecting a relationship name opens a card with every pair it joins.
  • The graph fits its panel at every window size. Drag empty space to move it, use the zoom buttons, and Reset view to go back. The card floats over the graph and does not move it.
  • Open in Query editor passes the query in ?query=. The editor reads it once, saves it as the draft, and removes it from the URL.
  • Each query filters on the primary key (WHERE p.id IS NOT NULL), because the Orbit server rejects a MATCH with no filter. All 91 entity and relationship queries pass on a local Orbit.
  • Quickstart shows on every Orbit tab, not only on Overview.
  • The click_orbit_schema_item labels change to graph, details, and relationship. The old map, neighbor, and picker sources are gone. The event definition says so.
What each recording covers
  • Happy path: the graph at rest, hover, the MergeRequest card, the properties, moving through the card, a relationship card, the Project card and its pill, an area highlight, zoom and drag, keyboard focus and Enter, and a WorkItem query that runs in the Query editor (3 rows). All calls are real, on a SaaS GDK with a local Orbit.
  • Bad path: a link to an entity that does not exist, a link to an entity, and a 1024 and a 390 window.
  • Disaster path: a slow schema API (4 seconds), the schema API down (503) with Try again, and the graph counts API down (500). These faults are injected in the browser.
More screenshots
View Screenshot
Hover schema-hover-mergerequest-light
Project schema-project-light
IN_PROJECT card schema-in-project-relationship-light
Dark schema-rest-dark
Dark, card schema-mergerequest-card-dark
Dark, Project schema-project-dark
1280 schema-1280x800
1024 schema-1024x768
390 schema-390x844
Query editor icons query-editor-reference-icons-light
Query editor icons, dark query-editor-reference-icons-dark

How to set up and validate locally

  1. Use a GDK with Orbit on for a group, and sign in as a member of that group.
  2. Go to http://127.0.0.1:3000/dashboard/orbit/schema.
  3. Hover and select entities, select Project, and select Open in Query editor on a card.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports