feat(frontend): hide object scopes by default

3 files changed, 17 insertions, 1 deletions

diff --git a/subprojects/frontend/src/graph/GraphStore.ts b/subprojects/frontend/src/graph/GraphStore.ts
index 50cb8c19..ecb016b5 100644
--- a/subprojects/frontend/src/graph/GraphStore.ts
+++ b/subprojects/frontend/src/graph/GraphStore.ts
@@ -61,6 +61,8 @@ export default class GraphStore {
 
   abbreviate = true;
 
+  scopes = false;
+
   selectedSymbol: RelationMetadata | undefined;
 
   constructor() {
@@ -145,6 +147,10 @@ export default class GraphStore {
     this.abbreviate = !this.abbreviate;
   }
 
+  toggleScopes(): void {
+    this.scopes = !this.scopes;
+  }
+
   setSelectedSymbol(option: RelationMetadata | undefined): void {
     if (option === undefined) {
       this.selectedSymbol = undefined;
diff --git a/subprojects/frontend/src/graph/VisibilityDialog.tsx b/subprojects/frontend/src/graph/VisibilityDialog.tsx
index 5c459fd1..f1fef28b 100644
--- a/subprojects/frontend/src/graph/VisibilityDialog.tsx
+++ b/subprojects/frontend/src/graph/VisibilityDialog.tsx
@@ -55,6 +55,9 @@ const VisibilityDialogRoot = styled('div', {
       marginLeft: 0,
       paddingTop: theme.spacing(1),
       paddingLeft: theme.spacing(1),
+      '& + .MuiFormControlLabel-root': {
+        paddingTop: 0,
+      },
     },
     '.VisibilityDialog-scroll': {
       display: 'flex',
@@ -247,6 +250,12 @@ function VisibilityDialog({
         }
         label="Fully qualified names"
       />
+      <FormControlLabel
+        control={
+          <Switch checked={graph.scopes} onClick={() => graph.toggleScopes()} />
+        }
+        label="Object scopes"
+      />
       <div className="VisibilityDialog-scroll">
         {hasRows ? (
           <table cellSpacing={0}>
diff --git a/subprojects/frontend/src/graph/dotSource.ts b/subprojects/frontend/src/graph/dotSource.ts
index b24bca2f..5f7707aa 100644
--- a/subprojects/frontend/src/graph/dotSource.ts
+++ b/subprojects/frontend/src/graph/dotSource.ts
@@ -123,6 +123,7 @@ function createNodes(graph: GraphStore, lines: string[]): void {
   const nodeData = computeNodeData(graph);
   const {
     semantics: { nodes },
+    scopes,
   } = graph;
 
   nodes.forEach((node, i) => {
@@ -141,7 +142,7 @@ function createNodes(graph: GraphStore, lines: string[]): void {
     const classes = classList.join(' ');
     const name = nodeName(graph, node);
     const border = node.kind === 'INDIVIDUAL' ? 2 : 1;
-    const count = data.equalsSelf !== 'TRUE' ? ` ${data.count}` : '';
+    const count = scopes && data.equalsSelf !== 'TRUE' ? ` ${data.count}` : '';
     lines.push(`n${i} [id="${node.name}", class="${classes}", label=<
         <table border="${border}" cellborder="0" cellspacing="0" style="rounded" bgcolor="white">
           <tr><td cellpadding="4.5" width="32" bgcolor="green">${name}${count}</td></tr>`);