Update schema view styling + filter graph to selected module (#376)

Author: jaclarke

shared/common/ui/splitView/splitView.module.scss

@@ -22,7 +22,7 @@
   min-height: 0;
   flex-shrink: 0;
   flex-grow: 0;
-  background: var(--app-panel-bg);
+  background: var(--app_panel_background);
 
   &:first-child {
     border-top-left-radius: 8px;

shared/common/ui/switcherButton/switcherButton.module.scss

@@ -3,7 +3,7 @@
 .switcherButton {
   position: relative;
   z-index: 110;
-  --buttonBg: #e6e6e6;
+  --buttonBg: var(--Grey99);
   --buttonTextColour: #5e5e5e;
 
   @include darkTheme {

shared/schemaGraph/components/schemaGraph/index.tsx

@@ -4,7 +4,6 @@ import {observer} from "mobx-react-lite";
 import styles from "./schemaGraph.module.scss";
 import {useSchemaState} from "../../state/provider";
 import {useDragHandler, Position} from "@edgedb/common/hooks/useDragHandler";
-import {useDBRouter} from "@edgedb/studio/hooks/dbRoute";
 
 import SchemaNode from "./SchemaNode";
 import SchemaLink from "./SchemaLink";
@@ -98,8 +97,6 @@ export default observer(function SchemaGraph({
   const schemaState = useSchemaState();
   const schemaGraphState = schemaState.graph;
 
-  const {navigate, currentPath} = useDBRouter();
-
   const viewportRef = useRef<HTMLDivElement>(null);
 
   const viewport = schemaGraphState.viewport;
@@ -166,7 +163,6 @@ export default observer(function SchemaGraph({
   const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget) {
       schemaState.deselectAll();
-      navigate(`${currentPath[0]}/schema`);
     }
   };
 

shared/schemaGraph/components/schemaGraph/schemaGraph.module.scss

@@ -70,11 +70,12 @@
 .object {
   background: var(--schemagraph-object-background);
   width: 240px;
-  border-radius: 4px;
-  font-family: "Roboto Mono";
+  border-radius: 6px;
+  font-family: "Roboto Mono Variable", monospace;
   overflow: hidden;
   color: var(--schemagraph-object-colour);
   padding-bottom: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   pointer-events: auto;
   opacity: 1;
   transition: opacity 0.2s, transform 0.3s;
@@ -90,7 +91,7 @@
     height: 32px;
     text-align: center;
     line-height: 32px;
-    font-weight: bold;
+    font-weight: 500;
     font-size: 14px;
     color: var(--schemagraph-object-header-colour);
     overflow: hidden;

shared/schemaGraph/state/index.ts

@@ -66,6 +66,7 @@ export const Schema = types
       self.constraints = constraints;
       self.scalars = scalars;
 
+      self.graph.hideAllLinks = true;
       self.graph.updateGraphNodesAndLinks(objects);
       return self.graph.autoLayoutNodes();
     },

shared/studio/tabs/schema/renderers/module.tsx

@@ -33,13 +33,13 @@ export function ModuleRenderer({
         {threshold: [1]}
       );
 
-      observer.observe(ref.current!);
+      setTimeout(() => observer.observe(ref.current!), 0);
 
       return () => {
         observer.disconnect();
       };
     }
-  }, []);
+  }, [ref.current]);
 
   return (
     <div

shared/studio/tabs/schema/schema.module.scss

@@ -5,16 +5,22 @@
   flex-grow: 1;
   min-width: 0;
   flex-direction: column;
-  margin-bottom: -16px;
+  margin-bottom: -8px;
 
-  & > * {
-    border-radius: 8px;
+  & > :first-child {
+    border-radius: 12px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.06);
+
+    @include darkTheme {
+      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2),
+        0px 0px 4px 0px rgba(0, 0, 0, 0.3);
+    }
   }
 
   @include breakpoint(mobile) {
     margin-bottom: 0;
 
-    & > * {
+    & > :first-child {
       border-radius: 0;
     }
   }
@@ -32,7 +38,7 @@
   --schemagraph-linkprop-background: #ededed;
   --schemagraph-link-stroke: #d685a2;
   --schemagraph-link-selected-stroke: #d685a2;
-  --schemagraph-link-inherit-stroke: #9a9a9a;
+  --schemagraph-link-inherit-stroke: #b3b3b3;
 
   // Schema Sidepanel
   --schemasidepanel-background: #f0f0f0;
@@ -125,10 +131,12 @@
   position: relative;
   display: flex;
   overflow: hidden;
-  background-image: url(data:png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgB7cyhEQAgDEPRgur+Q2aGOFAIuIMcRdJvol4KgGbBqj2UeImkhfCAp4Mtdvdpr7CCEqt+xB0XnQzPyC3maAAAAABJRU5ErkJggg==);
+  background: var(--Grey93);
+  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='1.25' fill='%23e1e1e1'/%3E%3C/svg%3E%0A");
 
   @include darkTheme {
-    background-image: url(data:png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgB7cwhDgAgDEPRQbKb9P4XrACFgAQahmTfVL0WAM2CVXso8RJJC+EBTwdb7O7TXmEFJVb9iDsGOAqJmekB+AAAAABJRU5ErkJggg==);
+    background: var(--Grey12);
+    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='7.5' r='1.25' fill='%23292929'/%3E%3C/svg%3E%0A");
   }
 }
 

shared/studio/tabs/schema/state/index.ts

@@ -29,11 +29,8 @@ export class Schema extends Model({
       const schemaData = dbCtx.get(this)!.schemaData;
       if (schemaData) {
         this.schemaState.updateSchema(
-          [...schemaData.objects.values()]
-            .filter(
-              (o) =>
-                !o.builtin && !o.insectionOf && !o.unionOf && !o.from_alias
-            )
+          this.textViewState.moduleGroupItems
+            .filter((type) => type.schemaType === "Object")
             .map((o) => ({
               name: o.name,
               is_abstract: o.abstract,