DoodleBUGS: Allow Nested Plates, add new layouts and fix lot of linting issues (#357)

Removed
[`cytoscape-compound-drag-and-drop`](https://github.com/cytoscape/cytoscape.js-compound-drag-and-drop)
because it only supports plates to depth 1 so I have written custom
logic for plates which which supports plates in much better way!
This PR adds these features for Plates:
- Nested plates to any depth
- Now supports empty plates

---------

Co-authored-by: Xianda Sun <[email protected]>

Author: shravanngoswamii

DoodleBUGS/.gitignore

@@ -7,6 +7,9 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 digest.txt
+root.txt
+src.txt
+public.txt
 
 node_modules
 .DS_Store

DoodleBUGS/README.md

@@ -2,6 +2,8 @@
 
 A web-based graphical editor for creating Bayesian models, inspired by DoodleBUGS and designed to work with JuliaBUGS. This project aims to provide an visual interface for building, understanding, and sharing probabilistic models.
 
+Try DoodleBUGS at [`https://turinglang.org/JuliaBUGS.jl/DoodleBUGS/`](https://turinglang.org/JuliaBUGS.jl/DoodleBUGS/).
+
 # Project Status: Pre-Alpha
 
 This project is currently in the pre-alpha phase of development as part of the Google Summer of Code 2025 program.

DoodleBUGS/package-lock.json

@@ -15,13 +15,13 @@
     "@types/cytoscape": "^3.21.9",
     "codemirror": "^5.65.19",
     "cytoscape": "^3.32.0",
-    "cytoscape-compound-drag-and-drop": "^1.1.0",
+    "cytoscape-cola": "^2.5.1",
     "cytoscape-context-menus": "^4.2.1",
     "cytoscape-dagre": "^2.5.0",
     "cytoscape-fcose": "^2.2.0",
     "cytoscape-grid-guide": "^2.3.3",
+    "cytoscape-klay": "^3.1.4",
     "cytoscape-no-overlap": "^1.0.1",
-    "cytoscape-panzoom": "^2.5.3",
     "cytoscape-snap-to-grid": "^2.0.0",
     "cytoscape-svg": "^0.4.0",
     "pinia": "^3.0.2",

DoodleBUGS/package.json

@@ -29,6 +29,12 @@ const { enableGridSnapping, disableGridSnapping, setGridSize } = useGridSnapping
 
 const validNodeTypes: NodeType[] = ['stochastic', 'deterministic', 'constant', 'observed', 'plate'];
 
+interface CompoundDropPayload {
+  node: NodeSingular;
+  newParent: NodeSingular | null;
+  oldParent: NodeSingular | null;
+}
+
 const formatElementsForCytoscape = (elements: GraphElement[], errors: Map<string, ValidationError[]>): ElementDefinition[] => {
   return elements.map(el => {
     if (el.type === 'node') {
@@ -56,7 +62,6 @@ const formatElementsForCytoscape = (elements: GraphElement[], errors: Map<string
 
 /**
  * Synchronizes the Cytoscape instance with the current graph elements from props.
- * This function handles adding, updating, and removing nodes and edges.
  * @param elementsToSync The array of graph elements to display.
  * @param errorsToSync The map of validation errors.
  */
@@ -68,14 +73,12 @@ const syncGraphWithProps = (elementsToSync: GraphElement[], errorsToSync: Map<st
   cy.batch(() => {
     const newElementIds = new Set(elementsToSync.map(el => el.id));
 
-    // Remove elements that are no longer in the props
     cy!.elements().forEach(cyEl => {
       if (!newElementIds.has(cyEl.id())) {
         cyEl.remove();
       }
     });
 
-    // Add or update elements
     formattedElements.forEach(formattedEl => {
       if (!formattedEl.data.id) return;
 
@@ -108,7 +111,6 @@ onMounted(() => {
   if (cyContainer.value) {
     cy = initCytoscape(cyContainer.value, []);
 
-    // Perform the initial synchronization to draw the graph on load
     syncGraphWithProps(props.elements, props.validationErrors);
 
     setGridSize(props.gridSize);
@@ -129,29 +131,15 @@ onMounted(() => {
       emit('canvas-tap', evt);
     });
 
-    cy.on('cdnddrop', 'node', (evt: EventObject, dropTarget: NodeSingular | undefined) => {
-        const node = evt.target as NodeSingular;
-        const newParentId = dropTarget ? dropTarget.id() : undefined;
-
-        const originalNode = props.elements.find(el => el.id === node.id() && el.type === 'node') as GraphNode | undefined;
-
-        if (originalNode && originalNode.parent && originalNode.parent !== newParentId) {
-            const oldParentId = originalNode.parent;
-            const oldParent = props.elements.find(el => el.id === oldParentId && el.type === 'node' && (el as GraphNode).nodeType === 'plate');
-            
-            if (oldParent) {
-                const siblings = props.elements.filter(el => el.type === 'node' && (el as GraphNode).parent === oldParentId);
-                if (siblings.length === 1) { 
-                    emit('plate-emptied', oldParentId);
-                }
-            }
-        }
-
-        emit('node-moved', {
-            nodeId: node.id(),
-            position: node.position(),
-            parentId: newParentId,
-        });
+    cy.on('compound-drop', (_evt: EventObject, data: CompoundDropPayload) => {
+      const { node, newParent } = data;
+      const newParentId = newParent ? newParent.id() : undefined;
+      
+      emit('node-moved', {
+          nodeId: node.id(),
+          position: node.position(),
+          parentId: newParentId
+      });
     });
 
     cy.on('tap', 'node, edge', (evt: EventObject) => {
@@ -182,7 +170,12 @@ onMounted(() => {
             const clientX = event.clientX;
             const clientY = event.clientY;
             const renderedPos = { x: clientX - bbox.left, y: clientY - bbox.top };
-            const modelPos = cy.panzoom().renderedPositionToModelPosition(renderedPos);
+            const pan = cy.pan();
+            const zoom = cy.zoom();
+            const modelPos = { 
+              x: (renderedPos.x - pan.x) / zoom,
+              y: (renderedPos.y - pan.y) / zoom
+            };
             emit('node-dropped', { nodeType: droppedItemType as NodeType, position: modelPos });
           }
         }
@@ -197,22 +190,21 @@ onUnmounted(() => {
   }
 });
 
-watch(() => props.isGridEnabled, (newValue) => {
+watch(() => props.isGridEnabled, (newValue: boolean) => {
   if (newValue) {
     enableGridSnapping();
   } else {
     disableGridSnapping();
   }
 });
 
-watch(() => props.gridSize, (newValue) => {
+watch(() => props.gridSize, (newValue: number) => {
   setGridSize(newValue);
   if (props.isGridEnabled) {
     enableGridSnapping();
   }
 });
 
-// Watch for subsequent changes to props and re-sync the graph
 watch([() => props.elements, () => props.validationErrors], ([newElements, newErrors]) => {
   syncGraphWithProps(newElements, newErrors);
 }, { deep: true });
@@ -248,4 +240,22 @@ watch([() => props.elements, () => props.validationErrors], ([newElements, newEr
 .cytoscape-container.mode-add-edge {
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') 12 12, crosshair;
 }
+
+/* Custom drag and drop styling */
+.cdnd-grabbed-node {
+  background-color: #FFD700 !important;
+  opacity: 0.7;
+  border: 2px dashed #FFA500;
+}
+
+.cdnd-drop-target {
+  border: 3px solid #32CD32 !important;
+  background-color: rgba(50, 205, 50, 0.1) !important;
+}
+
+/* Visual indicator for nodes being dragged out of plates */
+.cdnd-drag-out {
+  border: 2px dashed #FF0000 !important;
+  background-color: rgba(255, 0, 0, 0.1) !important;
+}
 </style>

DoodleBUGS/src/components/canvas/GraphCanvas.vue

@@ -23,7 +23,7 @@ const emit = defineEmits<{
   (e: 'update:currentNodeType', type: NodeType): void;
 }>();
 
-const { elements, addElement, updateElement, deleteElement } = useGraphElements();
+const { elements: graphElements, addElement, updateElement, deleteElement } = useGraphElements();
 const { getCyInstance } = useGraphInstance();
 
 const sourceNode = ref<NodeSingular | null>(null);
@@ -35,13 +35,11 @@ const greekAlphabet = [
   'sigma', 'tau', 'upsilon', 'phi', 'chi', 'psi', 'omega'
 ];
 
-const MAX_NODE_NAME_ITERATIONS = 1000;
-
 const getNextNodeName = (): string => {
     const existingNames = new Set(
-        elements.value
-            .filter(el => el.type === 'node')
-            .map(el => (el as GraphNode).name)
+        graphElements.value
+            .filter((el: GraphElement) => el.type === 'node')
+            .map((el: GraphElement) => (el as GraphNode).name)
     );
 
     for (const letter of greekAlphabet) {
@@ -50,17 +48,13 @@ const getNextNodeName = (): string => {
         }
     }
 
-    // Fallback if all Greek letters are used
-    let i = 1;
-    while (i < MAX_NODE_NAME_ITERATIONS) { // Add a reasonable limit to prevent infinite loops
+    for (let i = 1; i < 1000; i++) {
         const fallbackName = `var${i}`;
         if (!existingNames.has(fallbackName)) {
             return fallbackName;
         }
-        i++;
     }
 
-    // Ultimate fallback for extreme cases
     return `node_${Date.now()}`;
 };
 
@@ -97,7 +91,7 @@ const createNode = (nodeType: NodeType, position: { x: number; y: number }, pare
 const createPlateWithNode = (position: { x: number; y: number }, parentId?: string): GraphNode => {
     const newPlate = createNode('plate', position, parentId);
     const innerNode = createNode('stochastic', { x: position.x, y: position.y }, newPlate.id);
-    elements.value = [...elements.value, newPlate, innerNode];
+    graphElements.value = [...graphElements.value, newPlate, innerNode];
     return newPlate;
 }
 
@@ -116,10 +110,6 @@ const handleCanvasTap = (event: EventObject) => {
     case 'add-node':
       if (isBackgroundClick || isPlateClick) {
         if (props.currentNodeType === 'plate') {
-            if (isPlateClick) {
-                alert("Nesting plates is not currently supported.");
-                return;
-            }
             const newPlate = createPlateWithNode(position, isPlateClick ? (target as NodeSingular).id() : undefined);
             emit('element-selected', newPlate);
             emit('update:currentMode', 'select');
@@ -174,7 +164,7 @@ const handleCanvasTap = (event: EventObject) => {
 };
 
 const handleNodeMoved = (payload: { nodeId: string, position: { x: number; y: number }, parentId: string | undefined }) => {
-  const elementToUpdate = elements.value.find(el => el.id === payload.nodeId) as GraphNode | undefined;
+  const elementToUpdate = graphElements.value.find((el: GraphElement) => el.id === payload.nodeId) as GraphNode | undefined;
 
   if (elementToUpdate) {
     const updatedNode: GraphNode = {
@@ -192,17 +182,18 @@ const handleNodeDropped = (payload: { nodeType: NodeType; position: { x: number;
   let parentPlateId: string | undefined = undefined;
 
   if (nodeType === 'plate') {
+      let parentPlateId: string | undefined = undefined;
       if (cy) {
           const plates = cy.nodes('[nodeType="plate"]');
           for (const plate of plates) {
               const bb = plate.boundingBox();
               if (position.x > bb.x1 && position.x < bb.x2 && position.y > bb.y1 && position.y < bb.y2) {
-                  alert("Nesting plates is not currently supported.");
-                  return;
+                  parentPlateId = plate.id();
+                  break;
               }
           }
       }
-      const newPlate = createPlateWithNode(position);
+      const newPlate = createPlateWithNode(position, parentPlateId);
       emit('element-selected', newPlate);
       emit('update:currentMode', 'select');
       return;
@@ -225,10 +216,6 @@ const handleNodeDropped = (payload: { nodeType: NodeType; position: { x: number;
   emit('update:currentMode', 'select');
 };
 
-const handlePlateEmptied = (plateId: string) => {
-    deleteElement(plateId);
-};
-
 const handleDeleteElement = (elementId: string) => {
     deleteElement(elementId);
 };
@@ -250,7 +237,7 @@ watch(() => props.currentMode, (newMode) => {
       @update:current-mode="(mode: string) => emit('update:currentMode', mode)"
       @update:current-node-type="(type: NodeType) => emit('update:currentNodeType', type)"
       :is-connecting="isConnecting"
-      :source-node-name="sourceNode?.data('name')"
+      :source-node-name="sourceNode ? (sourceNode.data('name') as string) : undefined"
     />
 
     <GraphCanvas
@@ -262,7 +249,6 @@ watch(() => props.currentMode, (newMode) => {
       @canvas-tap="handleCanvasTap"
       @node-moved="handleNodeMoved"
       @node-dropped="handleNodeDropped"
-      @plate-emptied="handlePlateEmptied"
       @element-remove="handleDeleteElement"
     />
   </div>

DoodleBUGS/src/components/canvas/GraphEditor.vue

@@ -6,6 +6,15 @@ import BaseInput from '../ui/BaseInput.vue';
 
 export type ExportType = 'png' | 'jpg' | 'svg';
 
+interface ExportOptions {
+  bg: string;
+  full: boolean;
+  scale: number;
+  quality?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+}
+
 const props = defineProps<{
   isOpen: boolean;
   exportType: ExportType | null;
@@ -41,7 +50,7 @@ const title = computed(() => {
 });
 
 const handleConfirm = () => {
-  const exportOptions: any = {
+  const exportOptions: ExportOptions = {
     bg: options.value.bg,
     full: options.value.full,
     scale: options.value.scale,