Added legend to graph-info-overlay. Hide dependency labels on composite deltas (they are too long).

pnpm-lock.yaml

@@ -13,6 +13,7 @@ specifiers:
   '@types/node': ^18.11.18
   '@types/react': ^18.0.26
   '@types/react-dom': ^18.0.10
+  allotment: ^1.17.1
   buffer: ^6.0.3
   crypto-browserify: ^3.12.0
   css-loader: ^6.7.3
@@ -27,6 +28,7 @@ specifiers:
   nyc: ^15.1.0
   react: ^18.2.0
   react-dom: ^18.2.0
+  react-icons: ^4.7.1
   stream-browserify: ^3.0.0
   style-loader: ^3.3.1
   ts-loader: ^9.4.2
@@ -38,6 +40,7 @@ specifiers:
   webpack-dev-server: ^4.11.1
 
 dependencies:
+  allotment: 1.17.1_biqbaboplfbrettd7655fr4n2y
   buffer: 6.0.3
   crypto-browserify: 3.12.0
   css-loader: 6.7.3_webpack@5.75.0
@@ -49,6 +52,7 @@ dependencies:
   lodash: 4.17.21
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
+  react-icons: 4.7.1_react@18.2.0
   stream-browserify: 3.0.0
   style-loader: 3.3.1_webpack@5.75.0
   ts-node: 10.9.1_awa2wsr5thmg3i7jqycphctjfq
@@ -491,6 +495,10 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@juggle/resize-observer/3.4.0:
+    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+    dev: false
+
   /@leichtgewicht/ip-codec/2.0.4:
     resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==}
 
@@ -1193,6 +1201,22 @@ packages:
       require-from-string: 2.0.2
       uri-js: 4.4.1
 
+  /allotment/1.17.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-3/blHxKZfP441IZRwoOJaaNfDOx9XtvQQaeRYYrn7xjQWF7ZhYZCfR7oNxudwx2ga21tIskvfytbZF2P/ydE3A==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+    dependencies:
+      classnames: 2.3.2
+      eventemitter3: 4.0.7
+      lodash.clamp: 4.0.3
+      lodash.debounce: 4.0.8
+      lodash.isequal: 4.5.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      use-resize-observer: 9.1.0_biqbaboplfbrettd7655fr4n2y
+    dev: false
+
   /ansi-colors/4.1.1:
     resolution: {integrity: sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==}
     engines: {node: '>=6'}
@@ -1525,6 +1549,10 @@ packages:
       safe-buffer: 5.2.1
     dev: false
 
+  /classnames/2.3.2:
+    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
+    dev: false
+
   /clean-stack/2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -2932,10 +2960,22 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash.clamp/4.0.3:
+    resolution: {integrity: sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==}
+    dev: false
+
+  /lodash.debounce/4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+    dev: false
+
   /lodash.flattendeep/4.4.0:
     resolution: {integrity: sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==}
     dev: true
 
+  /lodash.isequal/4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    dev: false
+
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false
@@ -3480,6 +3520,14 @@ packages:
       react: 18.2.0
       scheduler: 0.23.0
 
+  /react-icons/4.7.1_react@18.2.0:
+    resolution: {integrity: sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true
@@ -4120,6 +4168,17 @@ packages:
       use-isomorphic-layout-effect: 1.1.2_kzbn2opkn2327fwg5yzwzya5o4
     dev: true
 
+  /use-resize-observer/9.1.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==}
+    peerDependencies:
+      react: 16.8.0 - 18
+      react-dom: 16.8.0 - 18
+    dependencies:
+      '@juggle/resize-observer': 3.4.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 

src/frontend/versioned_model.tsx

@@ -32,30 +32,78 @@ import {CompositeDelta, CompositeLevel} from "../onion/composite_delta";
 import {GraphState} from "../onion/graph_state"; 
 import {Delta} from "../onion/delta";
 
+const graphEditorLegend = <>
+  <Mantine.Divider label="Legend" labelPosition="center"/>
+  <Mantine.Text>
+    <b>Blue node</b>: Ordinary node (with GUID)<br/>
+    <b>Orange node</b>: Value node<br/>
+    <b>Arrow</b>: Edge (with label)<br/>
+  </Mantine.Text>
+</>;
+
+const rountangleEditorLegend = <>
+  <Mantine.Divider label="Legend" labelPosition="center"/>
+  <Mantine.Text>
+    <b>Rountangle</b>: Rountangle (with GUID)<br/>
+  </Mantine.Text>
+</>;
+
 const helpText = {
   graphEditor: <>
-    <Mantine.Text><b>Left-Drag</b>: Drag Node</Mantine.Text>
-    <Mantine.Text><b>Middle-Click</b>: Delete Node</Mantine.Text>
-    <Mantine.Text><b>Right-Click</b>: Create Node or Edge</Mantine.Text>
-    <Mantine.Text><b>Wheel</b>: Zoom</Mantine.Text>
+    {graphEditorLegend}
+    <Mantine.Divider label="Controls" labelPosition="center"/>
+    <Mantine.Text>
+      <b>Left-Drag</b>: Drag Node<br/>
+      <b>Middle-Click</b>: Delete Node<br/>
+      <b>Right-Click</b>: Create Node or Edge<br/>
+      <b>Wheel</b>: Zoom<br/>
+    </Mantine.Text>
   </>,
+
   graphEditorReadonly: <>
-    <Mantine.Text><b>Left-Drag</b>: Drag Node</Mantine.Text>
-    <Mantine.Text><b>Wheel</b>: Zoom</Mantine.Text>
+    {graphEditorLegend}
+    <Mantine.Divider label="Controls (read-only mode)" labelPosition="center"/>
+    <Mantine.Text>
+      <b>Left-Drag</b>: Drag Node<br/>
+      <b>Wheel</b>: Zoom<br/>
+    </Mantine.Text>
   </>,
+
   rountangleEditor: <>
-    <Mantine.Text><b>Alt + Left-Click</b>: Create/Delete Rountangle</Mantine.Text>
-    <Mantine.Text><b>Left-Drag</b>: Move/Resize Rountangle / Pan Canvas</Mantine.Text>
-    <Mantine.Text><b>Wheel</b>: Zoom</Mantine.Text>
+    <Mantine.Divider label="Controls" labelPosition="center"/>
+    <Mantine.Text>
+      <b>Alt + Left-Click</b>: Create/Delete Rountangle<br/>
+      <b>Left-Drag</b>: Move/Resize Rountangle / Pan Canvas<br/>
+      <b>Wheel</b>: Zoom<br/>
+    </Mantine.Text>
   </>,
+
   depGraph: <>
-    <Mantine.Text><b>Left-Drag</b>: Drag Node</Mantine.Text>
-    <Mantine.Text>Active deltas are <b>bold</b>.</Mantine.Text>
+    <Mantine.Divider label="Legend" labelPosition="center"/>
+    <Mantine.Text>
+      <b>Node</b>: Delta<br/>
+      <b>Arrow</b>: Dependency<br/>
+      <b>Yellow line</b>: Conflict<br/>
+      Active deltas are <b>bold</b>.
+    </Mantine.Text>
+    <Mantine.Divider label="Controls" labelPosition="center"/>
+    <Mantine.Text>
+      <b>Left-Drag</b>: Drag Node<br/>
+    </Mantine.Text>
   </>,
+
   historyGraph: <>
-    <Mantine.Text><b>Left-Drag</b>: Drag Node</Mantine.Text>
-    <Mantine.Text><b>Right-Click</b>: Goto Version</Mantine.Text>
-    <Mantine.Text>Current version is <b>bold</b>.</Mantine.Text>
+    <Mantine.Divider label="Legend" labelPosition="center"/>
+    <Mantine.Text>
+      <b>Node</b>: Version<br/>
+      <b>Arrow</b>: Parent-version-link<br/>
+      Current version is <b>bold</b>.
+    </Mantine.Text>
+    <Mantine.Divider label="Controls" labelPosition="center"/>
+    <Mantine.Text>
+      <b>Left-Drag</b>: Drag Node<br/>
+      <b>Right-Click</b>: Goto Version<br/>
+    </Mantine.Text>
   </>,
 };
 

src/onion/composite_delta.ts

@@ -76,10 +76,11 @@ export class CompositeLevel {
           }
           const existingDependency = typedDependencies.find(([dep,_]) => dep === compositeDependency);
           if (existingDependency !== undefined) {
-            existingDependency[1] += ","+dependencyType;
+            // existingDependency[1] += ","+dependencyType;
           } else {
             dependencies.push(compositeDependency);
-            typedDependencies.push([compositeDependency, dependencyType]);
+            // typedDependencies.push([compositeDependency, dependencyType]);
+            typedDependencies.push([compositeDependency, ""]);
           }
         }
       }