[gui2] Language Server binary protocol, and loading of visualization data

app/gui2/eslint.config.js

@@ -32,6 +32,7 @@ const conf = [
     rules: {
       camelcase: [1, { ignoreImports: true }],
       'no-inner-declarations': 0,
+      'vue/attribute-hyphenation': [2, 'never'],
       'vue/v-on-event-hyphenation': [2, 'never'],
       '@typescript-eslint/no-unused-vars': [
         1,

app/gui2/public/visualizations/ScatterplotVisualization.vue

@@ -207,18 +207,18 @@ const margin = computed(() => {
     return { top: 10, right: 10, bottom: 35, left: 55 }
   }
 })
-const width = ref(Math.max(config.value.width ?? 0, config.value.nodeSize.x))
-watchPostEffect(() => {
-  width.value = config.value.fullscreen
+const width = computed(() =>
+  config.value.fullscreen
     ? containerNode.value?.parentElement?.clientWidth ?? 0
-    : Math.max(config.value.width ?? 0, config.value.nodeSize.x)
-})
-const height = ref(config.value.height ?? (config.value.nodeSize.x * 3) / 4)
-watchPostEffect(() => {
-  height.value = config.value.fullscreen
+    : Math.max(config.value.width ?? 0, config.value.nodeSize.x),
+)
+
+const height = computed(() =>
+  config.value.fullscreen
     ? containerNode.value?.parentElement?.clientHeight ?? 0
-    : config.value.height ?? (config.value.nodeSize.x * 3) / 4
-})
+    : config.value.height ?? (config.value.nodeSize.x * 3) / 4,
+)
+
 const boxWidth = computed(() => Math.max(0, width.value - margin.value.left - margin.value.right))
 const boxHeight = computed(() => Math.max(0, height.value - margin.value.top - margin.value.bottom))
 const xTicks = computed(() => boxWidth.value / 40)
@@ -541,7 +541,7 @@ useEvent(document, 'scroll', endBrushing)
 </script>
 
 <template>
-  <VisualizationContainer :below-toolbar="true">
+  <VisualizationContainer :belowToolbar="true">
     <template #toolbar>
       <button class="image-button active">
         <img :src="ShowAllIcon" alt="Fit all" @pointerdown="showAll" />

app/gui2/shared/yjsModel.ts

@@ -1,5 +1,6 @@
 import * as decoding from 'lib0/decoding'
 import * as encoding from 'lib0/encoding'
+import * as object from 'lib0/object'
 import * as random from 'lib0/random'
 import * as Y from 'yjs'
 
@@ -8,10 +9,38 @@ declare const brandExprId: unique symbol
 export type ExprId = Uuid & { [brandExprId]: never }
 export const NULL_EXPR_ID: ExprId = '00000000-0000-0000-0000-000000000000' as ExprId
 
+export type VisualizationModule =
+  | { kind: 'Builtin' }
+  | { kind: 'CurrentProject' }
+  | { kind: 'Library'; name: string }
+
+export interface VisualizationIdentifier {
+  module: VisualizationModule
+  name: string
+}
+
+export interface VisualizationMetadata extends VisualizationIdentifier {
+  visible: boolean
+}
+
+export function visMetadataEquals(
+  a: VisualizationMetadata | null | undefined,
+  b: VisualizationMetadata | null | undefined,
+) {
+  return (
+    (a == null && b == null) ||
+    (a != null && b != null && a.visible === b.visible && visIdentifierEquals(a, b))
+  )
+}
+
+export function visIdentifierEquals(a: VisualizationIdentifier, b: VisualizationIdentifier) {
+  return a.name === b.name && object.equalFlat(a.module, b.module)
+}
+
 export interface NodeMetadata {
   x: number
   y: number
-  vis?: unknown
+  vis: VisualizationMetadata | null
 }
 
 export class DistributedProject {
@@ -85,6 +114,7 @@ export class ModuleDoc {
 
 export class DistributedModule {
   doc: ModuleDoc
+  undoManager: Y.UndoManager
 
   static async load(ydoc: Y.Doc): Promise<DistributedModule> {
     ydoc.load()
@@ -94,6 +124,7 @@ export class DistributedModule {
 
   constructor(ydoc: Y.Doc) {
     this.doc = new ModuleDoc(ydoc)
+    this.undoManager = new Y.UndoManager([this.doc.contents, this.doc.idMap, this.doc.metadata])
   }
 
   insertNewNode(offset: number, content: string, meta: NodeMetadata): ExprId {
@@ -145,12 +176,14 @@ export class DistributedModule {
   }
 
   transact<T>(fn: () => T): T {
-    return this.doc.ydoc.transact(fn)
+    return this.doc.ydoc.transact(fn, 'local')
   }
 
   updateNodeMetadata(id: ExprId, meta: Partial<NodeMetadata>): void {
-    const existing = this.doc.metadata.get(id) ?? { x: 0, y: 0 }
-    this.doc.metadata.set(id, { ...existing, ...meta })
+    const existing = this.doc.metadata.get(id) ?? { x: 0, y: 0, vis: null }
+    this.transact(() => {
+      this.doc.metadata.set(id, { ...existing, ...meta })
+    })
   }
 
   getIdMap(): IdMap {

app/gui2/src/bindings/nodeSelection.ts

@@ -9,4 +9,5 @@ export const nodeBindings = defineKeybinds('node-selection', {
   remove: ['Shift+Alt+PointerMain'],
   toggle: ['Shift+PointerMain'],
   invert: ['Mod+Shift+Alt+PointerMain'],
+  toggleVisualization: ['Space'],
 })

app/gui2/src/components/CircularMenu.vue

@@ -19,19 +19,19 @@ const emit = defineEmits<{
     <ToggleIcon
       icon="no_auto_replay"
       class="icon-container button no-auto-evaluate-button"
-      :model-value="props.isAutoEvaluationDisabled"
+      :modelValue="props.isAutoEvaluationDisabled"
       @update:modelValue="emit('update:isAutoEvaluationDisabled', $event)"
     />
     <ToggleIcon
       icon="docs"
       class="icon-container button docs-button"
-      :model-value="props.isDocsVisible"
+      :modelValue="props.isDocsVisible"
       @update:modelValue="emit('update:isDocsVisible', $event)"
     />
     <ToggleIcon
       icon="eye"
       class="icon-container button visualization-button"
-      :model-value="props.isVisualizationVisible"
+      :modelValue="props.isVisualizationVisible"
       @update:modelValue="emit('update:isVisualizationVisible', $event)"
     />
   </div>

app/gui2/src/components/CodeEditor.vue

@@ -3,7 +3,7 @@ import { useProjectStore } from '@/stores/project'
 import { useWindowEvent } from '@/util/events'
 import { EditorState } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
-import { basicSetup } from 'codemirror'
+import { minimalSetup } from 'codemirror'
 import { ref, watchPostEffect } from 'vue'
 // y-codemirror.next does not provide type information. See https://github.com/yjs/y-codemirror.next/issues/27
 // @ts-ignore
@@ -32,15 +32,16 @@ useWindowEvent('keydown', (e) => {
 const codeMirrorEl = ref(null)
 const editorView = ref<EditorView>()
 watchPostEffect((onCleanup) => {
-  const yText = projectStore.module?.doc.contents
-  if (!yText || !codeMirrorEl.value) return
-  const undoManager = projectStore.undoManager
+  const module = projectStore.module
+  if (!module || !codeMirrorEl.value) return
+  const yText = module.doc.contents
+  const undoManager = module.undoManager
   const awareness = projectStore.awareness
   const view = new EditorView({
     parent: codeMirrorEl.value,
     state: EditorState.create({
       doc: yText.toString(),
-      extensions: [basicSetup, yCollab(yText, awareness, { undoManager })],
+      extensions: [minimalSetup, yCollab(yText, awareness, { undoManager })],
     }),
   })
   onCleanup(() => view.destroy())
@@ -72,7 +73,11 @@ watchPostEffect((onCleanup) => {
 .codemirror-container {
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  border-top-right-radius: 10px;
+  opacity: 1;
+  color: white;
 }
 .cm-editor {
   width: 100%;

app/gui2/src/components/GraphEditor.vue

@@ -1,18 +1,4 @@
 <script lang="ts">
-import { defineKeybinds } from '@/util/shortcuts'
-
-const graphBindings = defineKeybinds('graph-editor', {
-  undo: ['Mod+Z'],
-  redo: ['Mod+Y', 'Mod+Shift+Z'],
-  dragScene: ['PointerAux', 'Mod+PointerMain'],
-  openComponentBrowser: ['Enter'],
-  newNode: ['N'],
-})
-</script>
-
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
-
 import { nodeBindings } from '@/bindings/nodeSelection'
 import CodeEditor from '@/components/CodeEditor.vue'
 import ComponentBrowser from '@/components/ComponentBrowser.vue'
@@ -27,9 +13,21 @@ import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { colorFromString } from '@/util/colors'
 import { keyboardBusy, usePointer, useWindowEvent } from '@/util/events'
 import { useNavigator } from '@/util/navigator'
+import { defineKeybinds } from '@/util/shortcuts'
 import { Vec2 } from '@/util/vec2'
+import * as set from 'lib0/set'
 import type { ContentRange, ExprId } from 'shared/yjsModel'
+import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 
+const graphBindings = defineKeybinds('graph-editor', {
+  undo: ['Mod+Z'],
+  redo: ['Mod+Y', 'Mod+Shift+Z'],
+  dragScene: ['PointerAux', 'Mod+PointerMain'],
+  openComponentBrowser: ['Enter'],
+  newNode: ['N'],
+})
+</script>
+<script setup lang="ts">
 const EXECUTION_MODES = ['design', 'live']
 const SELECTION_BRUSH_MARGIN_PX = 6
 
@@ -56,9 +54,6 @@ function updateExprRect(id: ExprId, rect: Rect) {
 }
 
 useWindowEvent('keydown', (event) => {
-  if (keyboardBusy()) {
-    return
-  }
   graphBindingsHandler(event) || nodeSelectionHandler(event)
 })
 
@@ -74,13 +69,15 @@ function updateNodeContent(id: ExprId, updates: [ContentRange, string][]) {
 
 function moveNode(id: ExprId, delta: Vec2) {
   const scaledDelta = delta.scale(1 / navigator.scale)
-  for (const id_ of selectedNodes.value.has(id) ? selectedNodes.value : [id]) {
-    const node = graphStore.nodes.get(id_)
-    if (node == null) {
-      continue
+  graphStore.transact(() => {
+    for (const id_ of selectedNodes.value.has(id) ? selectedNodes.value : [id]) {
+      const node = graphStore.nodes.get(id_)
+      if (node == null) {
+        continue
+      }
+      graphStore.setNodePosition(id_, node.position.add(scaledDelta))
     }
-    graphStore.setNodePosition(id_, node.position.add(scaledDelta))
-  }
+  })
 }
 
 const selectionAnchor = shallowRef<Vec2>()
@@ -158,15 +155,13 @@ function updateLatestSelectedNode(id: ExprId) {
 
 const graphBindingsHandler = graphBindings.handler({
   undo() {
-    projectStore.undoManager.undo()
+    projectStore.module?.undoManager.undo()
   },
   redo() {
-    projectStore.undoManager.redo()
+    projectStore.module?.undoManager.redo()
   },
   openComponentBrowser() {
-    if (keyboardBusy()) {
-      return false
-    }
+    if (keyboardBusy()) return false
     if (navigator.sceneMousePos != null && !componentBrowserVisible.value) {
       componentBrowserPosition.value = navigator.sceneMousePos
       componentBrowserVisible.value = true
@@ -181,18 +176,34 @@ const graphBindingsHandler = graphBindings.handler({
 
 const nodeSelectionHandler = nodeBindings.handler({
   deleteSelected() {
-    for (const node of selectedNodes.value) {
-      graphStore.deleteNode(node)
-    }
+    graphStore.transact(() => {
+      for (const node of selectedNodes.value) {
+        graphStore.deleteNode(node)
+      }
+    })
   },
   selectAll() {
+    if (keyboardBusy()) return
     for (const id of graphStore.nodes.keys()) {
       selectedNodes.value.add(id)
     }
   },
   deselectAll() {
     clearSelection()
     selectedNodes.value.clear()
+    graphStore.stopCapturingUndo()
+  },
+  toggleVisualization() {
+    if (keyboardBusy()) return false
+    graphStore.transact(() => {
+      const allHidden = set
+        .toArray(selectedNodes.value)
+        .every((id) => graphStore.nodes.get(id)?.vis?.visible !== true)
+
+      for (const nodeId of selectedNodes.value) {
+        graphStore.setNodeVisualizationVisible(nodeId, allHidden)
+      }
+    })
   },
 })
 
@@ -281,9 +292,9 @@ const groupColors = computed(() => {
         v-for="(edge, index) in graphStore.edges"
         :key="index"
         :edge="edge"
-        :node-rects="nodeRects"
-        :expr-rects="exprRects"
-        :expr-nodes="graphStore.exprNodes"
+        :nodeRects="nodeRects"
+        :exprRects="exprRects"
+        :exprNodes="graphStore.exprNodes"
       />
     </svg>
     <div :style="{ transform: navigator.transform }" class="htmlLayer">
@@ -292,7 +303,8 @@ const groupColors = computed(() => {
         :key="id"
         :node="node"
         :selected="selectedNodes.has(id)"
-        :is-latest-selected="id === latestSelectedNode"
+        :isLatestSelected="id === latestSelectedNode"
+        :fullscreenVis="false"
         @update:selected="setSelected(id, $event), $event && updateLatestSelectedNode(id)"
         @replaceSelection="
           selectedNodes.clear(), selectedNodes.add(id), updateLatestSelectedNode(id)
@@ -301,6 +313,8 @@ const groupColors = computed(() => {
         @delete="graphStore.deleteNode(id)"
         @updateExprRect="updateExprRect"
         @updateContent="updateNodeContent(id, $event)"
+        @setVisualizationId="graphStore.setNodeVisualizationId(id, $event)"
+        @setVisualizationVisible="graphStore.setNodeVisualizationVisible(id, $event)"
         @movePosition="moveNode(id, $event)"
       />
     </div>