@darajs/components 1.1.9 → 1.1.10

package/dist/graphs/index.d.ts

@@ -1,4 +1,7 @@
+import type { GraphLayoutDefinition } from './graph-layout';
 export { default as CausalGraphViewer } from './causal-graph-viewer';
 export { default as NodeHierarchyBuilder } from './node-hierarchy-builder';
 export { default as VisualEdgeEncoder } from './visual-edge-encoder';
+export { parseLayoutDefinition } from './graph-layout';
+export type { GraphLayoutDefinition };
 //# sourceMappingURL=index.d.ts.map

package/dist/graphs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/graphs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../js/graphs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/graphs/index.js

@@ -1,4 +1,5 @@
 export { default as CausalGraphViewer } from './causal-graph-viewer';
 export { default as NodeHierarchyBuilder } from './node-hierarchy-builder';
 export { default as VisualEdgeEncoder } from './visual-edge-encoder';
+export { parseLayoutDefinition } from './graph-layout';
 //# sourceMappingURL=index.js.map

package/dist/graphs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../js/graphs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../js/graphs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/umd/dara.components.umd.js

@@ -31920,7 +31920,6 @@
     overflow: hidden;
     flex: 1 1 auto;
 
-    height: 100%;
     margin-right: 0.5rem;
     padding: 0rem;
 
@@ -31947,6 +31946,7 @@
     align-items: center;
 
     width: 100%;
+    height: 100%;
     max-height: ${(props) => props.maxRows * (tagHeight + tagTopMargin) - 0.25}rem;
 `;
   const Tag$1 = styled__default.default.span`
@@ -140202,7 +140202,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
                 else
                   return [m2 > 0 ? xEdge1 : xEdge0, yEdge0];
               }
-              function updateEdge(pt2) {
+              function updateEdge2(pt2) {
                 var x2 = pt2[0];
                 var y2 = pt2[1];
                 var xSame = x2 === pts2[pti - 1][0];
@@ -140229,9 +140229,9 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
               }
               function updateEdgesForReentry(pt2) {
                 if (pts2[pti - 1][0] !== pt2[0] && pts2[pti - 1][1] !== pt2[1]) {
-                  updateEdge([lastXEdge, lastYEdge]);
+                  updateEdge2([lastXEdge, lastYEdge]);
                 }
-                updateEdge(pt2);
+                updateEdge2(pt2);
                 lastFarPt = null;
                 lastXEdge = lastYEdge = 0;
               }
@@ -140266,17 +140266,17 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
                     if (lastFarPt) {
                       if (lastXEdge !== xEdge && lastYEdge !== yEdge) {
                         if (lastXEdge && lastYEdge) {
-                          updateEdge(getClosestCorner(lastFarPt, pt2));
+                          updateEdge2(getClosestCorner(lastFarPt, pt2));
                         } else {
-                          updateEdge([lastXEdge || xEdge, lastYEdge || yEdge]);
+                          updateEdge2([lastXEdge || xEdge, lastYEdge || yEdge]);
                         }
                       } else if (lastXEdge && lastYEdge) {
-                        updateEdge([lastXEdge, lastYEdge]);
+                        updateEdge2([lastXEdge, lastYEdge]);
                       }
                     }
-                    updateEdge([xEdge, yEdge]);
+                    updateEdge2([xEdge, yEdge]);
                   } else if (lastXEdge - xEdge && lastYEdge - yEdge) {
-                    updateEdge([xEdge || lastXEdge, yEdge || lastYEdge]);
+                    updateEdge2([xEdge || lastXEdge, yEdge || lastYEdge]);
                   }
                   lastFarPt = pt2;
                   lastXEdge = xEdge;
@@ -140361,7 +140361,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
                   clusterStartPt = thisPt;
                 }
                 if (lastFarPt)
-                  updateEdge([lastXEdge || lastFarPt[0], lastYEdge || lastFarPt[1]]);
+                  updateEdge2([lastXEdge || lastFarPt[0], lastYEdge || lastFarPt[1]]);
                 segments.push(pts2.slice(0, pti));
               }
               var lastShapeChar = shape.slice(shape.length - 1);
@@ -304735,7 +304735,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     const edgeAttributes = props.state.graph.getEdgeAttributes(source, target);
     const sourceAttributes = props.state.graph.getNodeAttributes(source);
     const targetAttributes = props.state.graph.getNodeAttributes(target);
-    return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(DirectionEditor, { edgeType: edgeAttributes.edge_type, onConfirmDirection: props.onConfirmDirection, source: (_a3 = sourceAttributes["meta.rendering_properties.label"]) !== null && _a3 !== void 0 ? _a3 : source, target: (_b = targetAttributes["meta.rendering_properties.label"]) !== null && _b !== void 0 ? _b : target }), jsxRuntime.exports.jsxs(ColumnWrapper, { "$gap": 1, "$scrollable": true, children: [(editable2 || edgeAttributes["meta.rendering_properties.description"]) && jsxRuntime.exports.jsx(DescriptionEditor, { api: props.api, edge: edgeAttributes, selectedEdge: props.selectedEdge }), editable2 && jsxRuntime.exports.jsx(EdgeEditor, { api: props.api, edge: edgeAttributes, edgeConstraint: props.selectedConstraint, onUpdateConstraint: props.onUpdateConstraint, source, state: props.state, target })] })] });
+    return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(DirectionEditor, { edgeType: edgeAttributes.edge_type, onConfirmDirection: props.onConfirmDirection, source: (_a3 = sourceAttributes["meta.rendering_properties.label"]) !== null && _a3 !== void 0 ? _a3 : source, target: (_b = targetAttributes["meta.rendering_properties.label"]) !== null && _b !== void 0 ? _b : target }), jsxRuntime.exports.jsxs(ColumnWrapper, { "$gap": 1, "$scrollable": true, children: [(editable2 || edgeAttributes["meta.rendering_properties.description"]) && jsxRuntime.exports.jsx(DescriptionEditor, { api: props.api, edge: edgeAttributes, selectedEdge: props.selectedEdge }), editable2 && jsxRuntime.exports.jsx(EdgeEditor, { api: props.api, edge: edgeAttributes, edgeConstraint: props.selectedConstraint, onUpdateConstraint: props.onUpdateConstraint, source, state: props.state, target }), props.extraSections] })] });
   }
   const StyledInput$1 = styled__default.default(Input$3)`
     width: 100%;
@@ -304803,7 +304803,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   }
   function NodeInfoContent(props) {
     const nodeAttributes = props.state.graph.getNodeAttributes(props.selectedNode);
-    return jsxRuntime.exports.jsx(ColumnWrapper, { children: jsxRuntime.exports.jsx(LabelEditor, { node: nodeAttributes, onLabelChange: props.api.renameNode }) });
+    return jsxRuntime.exports.jsxs(ColumnWrapper, { children: [jsxRuntime.exports.jsx(LabelEditor, { node: nodeAttributes, onLabelChange: props.api.renameNode }), props.extraSections] });
   }
   function EditorOverlay(props) {
     var _a3;
@@ -305208,6 +305208,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     const modeData = (_a3 = DEFAULT_LEGENDS.get(editorMode)) !== null && _a3 !== void 0 ? _a3 : [];
     return [...modeData, ...(additionalLegend !== null && additionalLegend !== void 0 ? additionalLegend : []).filter(Boolean)];
   }
+  const graphCtx = React.createContext(null);
   const PI_2 = Math.PI * 2;
   const RAD_TO_DEG = 180 / Math.PI;
   const DEG_TO_RAD = Math.PI / 180;
@@ -341260,6 +341261,10 @@ ${e3}`);
       return acc;
     }, {});
   }
+  function getExtraNodeFields(nodeData) {
+    const extras = __rest$2(nodeData, ["meta", "variable_type"]);
+    return extras;
+  }
   function parseGraphNode(nodeKey, nodeData, data2, availableInputs) {
     var _a3, _b, _c;
     const isLatent = availableInputs && Array.isArray(availableInputs) ? !availableInputs.includes(nodeKey) && Object.keys(data2.edges).includes(nodeKey) : false;
@@ -341269,7 +341274,9 @@ ${e3}`);
       return [computedKey, entry[1]];
     }));
     (_c = meta2["meta.rendering_properties.latent"]) !== null && _c !== void 0 ? _c : meta2["meta.rendering_properties.latent"] = isLatent;
+    const extras = getExtraNodeFields(nodeData);
     const attributes2 = Object.assign({
+      extras,
       id: nodeKey,
       originalMeta: nodeData.meta,
       variable_type: nodeData.variable_type,
@@ -341278,6 +341285,10 @@ ${e3}`);
     }, meta2);
     return attributes2;
   }
+  function getExtraEdgeFields(edgeData) {
+    const extras = __rest$2(edgeData, ["meta", "edge_type"]);
+    return extras;
+  }
   function parseGraphEdge(edgeData) {
     var _a3, _b;
     const originalEntries = Object.entries((_b = (_a3 = edgeData.meta) === null || _a3 === void 0 ? void 0 : _a3.rendering_properties) !== null && _b !== void 0 ? _b : {});
@@ -341285,9 +341296,13 @@ ${e3}`);
       const computedKey = `meta.rendering_properties.${entry[0]}`;
       return [computedKey, entry[1]];
     }));
-    const attributes2 = Object.assign({ edge_type: edgeData.edge_type, originalMeta: edgeData.meta }, meta2);
+    const attributes2 = Object.assign({ edge_type: edgeData.edge_type, extras: getExtraEdgeFields(edgeData), originalMeta: edgeData.meta }, meta2);
     return attributes2;
   }
+  function getExtraGraphFields(graphData) {
+    const extras = __rest$2(graphData, ["edges", "nodes", "version"]);
+    return extras;
+  }
   function causalGraphParser(data2, availableInputs, initialGraph) {
     let resultGraph = initialGraph;
     resultGraph !== null && resultGraph !== void 0 ? resultGraph : resultGraph = new DirectedGraph();
@@ -341302,9 +341317,9 @@ ${e3}`);
       const attributes2 = parseGraphNode(nodeKey, nodeData, data2, availableInputs);
       try {
         const existingAttributes = resultGraph.getNodeAttributes(nodeKey);
-        const { x: x2, y: y2 } = existingAttributes, existingAttributesWithoutPosition = __rest$2(existingAttributes, ["x", "y"]);
+        const { x: x2, y: y2, extras } = existingAttributes, existingAttributesWithoutPosition = __rest$2(existingAttributes, ["x", "y", "extras"]);
         if (!isEqual_1(existingAttributesWithoutPosition, attributes2)) {
-          resultGraph.updateNode(nodeKey, () => Object.assign(Object.assign({}, attributes2), { x: x2, y: y2 }));
+          resultGraph.updateNode(nodeKey, () => Object.assign(Object.assign({}, attributes2), { extras, x: x2, y: y2 }));
         }
       } catch (_a3) {
         resultGraph.addNode(nodeKey, attributes2);
@@ -341332,6 +341347,15 @@ ${e3}`);
     });
     resultGraph.updateAttribute("version", () => data2.version);
     resultGraph.updateAttribute("uid", () => shortid$1.exports.generate());
+    try {
+      const existingGraphAttributes = resultGraph.getAttributes();
+      const { extras } = existingGraphAttributes;
+      if (Object.keys(extras).length === 0) {
+        resultGraph.updateAttribute("extras", () => getExtraGraphFields(data2));
+      }
+    } catch (_a3) {
+      resultGraph.updateAttribute("extras", () => getExtraGraphFields(data2));
+    }
     return resultGraph;
   }
   class MarketingLayoutBuilder extends GraphLayoutBuilder {
@@ -382108,7 +382132,7 @@ ${letters.join("\n")}`;
     "edgeMouseover"
   ];
   class Engine extends EventEmitter$1 {
-    constructor(graph, layout2, editable2, editorMode, theme2, constraints, zoomThresholds) {
+    constructor(graph, layout2, editable2, editorMode, theme2, constraints, zoomThresholds, processEdgeStyle) {
       super();
       this.debouncedUpdateLayout = debounce_1(this.updateLayout, 150, { trailing: true });
       this.dragMode = null;
@@ -382148,6 +382172,7 @@ ${letters.join("\n")}`;
       this.theme = theme2;
       this.constraints = constraints;
       this.zoomThresholds = zoomThresholds;
+      this.processEdgeStyle = processEdgeStyle;
       Filter.defaultResolution = 3;
     }
     getCenterPosition() {
@@ -382500,7 +382525,7 @@ ${letters.join("\n")}`;
       return (_a3 = this.constraints) === null || _a3 === void 0 ? void 0 : _a3.find((c2) => c2.source === source && c2.target === target || c2.source === target && c2.target === source);
     }
     getEdgeStyle(edge, attributes2, constraint) {
-      return {
+      const edgeStyle = {
         accepted: attributes2["meta.rendering_properties.accepted"],
         color: attributes2["meta.rendering_properties.color"],
         constraint,
@@ -382514,6 +382539,10 @@ ${letters.join("\n")}`;
         thickness: attributes2["meta.rendering_properties.thickness"],
         type: attributes2.edge_type
       };
+      if (this.processEdgeStyle) {
+        return this.processEdgeStyle(edgeStyle, attributes2);
+      }
+      return edgeStyle;
     }
     getNodeStyle(node2, attributes2) {
       var _a3, _b, _c, _d;
@@ -382763,12 +382792,12 @@ ${letters.join("\n")}`;
       this.graph.forEachEdge(this.updateEdgeStyle.bind(this));
     }
   }
-  function useRenderEngine(parentRef, graph, layout2, editable2, editorMode, constraints, zoomThresholds) {
+  function useRenderEngine(parentRef, graph, layout2, editable2, editorMode, constraints, processEdgeStyle, zoomThresholds) {
     const theme2 = useClTheme();
     const engine = React__namespace.useRef(null);
     const listeners = React__namespace.useRef({});
     if (!engine.current) {
-      engine.current = new Engine(graph, layout2, editable2, editorMode, theme2, constraints, zoomThresholds);
+      engine.current = new Engine(graph, layout2, editable2, editorMode, theme2, constraints, zoomThresholds, processEdgeStyle);
     }
     React__namespace.useEffect(() => {
       engine.current.start(parentRef.current).then(() => {
@@ -382847,10 +382876,7 @@ ${letters.join("\n")}`;
       const newKey = removeEdgePrefix(key);
       return [newKey, val];
     }));
-    const output2 = {
-      edge_type: attributes2.edge_type,
-      meta: Object.assign(Object.assign({}, attributes2.originalMeta), { rendering_properties: unflattenedMeta })
-    };
+    const output2 = Object.assign({ edge_type: attributes2.edge_type, meta: Object.assign(Object.assign({}, attributes2.originalMeta), { rendering_properties: unflattenedMeta }) }, attributes2.extras);
     if (source) {
       output2.source = source;
     }
@@ -382874,10 +382900,7 @@ ${letters.join("\n")}`;
       const newKey = removeNodePrefix(key);
       return [newKey, val];
     }));
-    const output2 = {
-      meta: Object.assign(Object.assign({}, attributes2.originalMeta), { rendering_properties: unflattenedMeta }),
-      variable_type: attributes2.variable_type
-    };
+    const output2 = Object.assign({ meta: Object.assign(Object.assign({}, attributes2.originalMeta), { rendering_properties: unflattenedMeta }), variable_type: attributes2.variable_type }, attributes2.extras);
     if (includeIdentifier) {
       output2.identifier = attributes2.id;
     }
@@ -382905,17 +382928,14 @@ ${letters.join("\n")}`;
         const newKey = removeNodePrefix(key);
         return [newKey, val];
       }));
-      acc[id2] = {
-        meta: Object.assign(Object.assign({}, attributes2.originalMeta), { rendering_properties: unflattenedMeta }),
-        variable_type: attributes2.variable_type
-      };
+      acc[id2] = Object.assign({ meta: Object.assign(Object.assign({}, attributes2.originalMeta), { rendering_properties: unflattenedMeta }), variable_type: attributes2.variable_type }, attributes2.extras);
       return acc;
     }, {});
-    return {
+    return Object.assign({
       edges,
       nodes,
       version: state.graph.getAttribute("version")
-    };
+    }, state.graph.getAttribute("extras"));
   }
   const Wrapper = styled__default.default.div`
     overflow: hidden;
@@ -383016,6 +383036,12 @@ ${letters.join("\n")}`;
         draft.graph.dropNode(action.node);
         break;
       }
+      case GraphActionType.UPDATE_EDGE: {
+        draft.graph.updateEdgeAttribute(action.source, action.target, "extras", () => {
+          return action.extras;
+        });
+        break;
+      }
       case GraphActionType.UPDATE_EDGE_TYPE: {
         draft.graph.setEdgeAttribute(action.source, action.target, "edge_type", action.edge_type);
         break;
@@ -383024,6 +383050,10 @@ ${letters.join("\n")}`;
         draft.graph.setEdgeAttribute(action.source, action.target, "meta.rendering_properties.description", action.note);
         break;
       }
+      case GraphActionType.UPDATE_NODE: {
+        draft.graph.setNodeAttribute(action.node, "extras", action.extras);
+        break;
+      }
     }
     return draft;
   };
@@ -383038,6 +383068,12 @@ ${letters.join("\n")}`;
     target: edge[1],
     type: GraphActionType.ADD_EDGE
   });
+  const updateEdge = (edge, extras) => ({
+    extras,
+    source: edge[0],
+    target: edge[1],
+    type: GraphActionType.UPDATE_EDGE
+  });
   const updateEdgeType = (edge, symbol) => ({
     edge_type: symbol,
     source: edge[0],
@@ -383064,6 +383100,11 @@ ${letters.join("\n")}`;
     target,
     type: GraphActionType.ACCEPT_EDGE
   });
+  const updateNode = (node2, extras) => ({
+    extras,
+    node: node2,
+    type: GraphActionType.UPDATE_NODE
+  });
   const GraphActionCreators = {
     acceptEdge,
     addEdge,
@@ -383072,8 +383113,10 @@ ${letters.join("\n")}`;
     removeNode,
     renameNode,
     reverseEdge,
+    updateEdge,
     updateEdgeNote,
-    updateEdgeType
+    updateEdgeType,
+    updateNode
   };
   const actionNames = Object.keys(GraphActionCreators);
   function useCausalGraphEditor(graphData, editorMode, availableInputs, newNodesRequirePosition) {
@@ -383288,7 +383331,7 @@ ${letters.join("\n")}`;
     const theme2 = useClTheme();
     const canvasParentRef = React__namespace.useRef(null);
     const { state, api: api2 } = useCausalGraphEditor(props.graphData, props.editorMode, props.availableInputs, props.graphLayout.requiresPosition);
-    const { getCenterPosition, useEngineEvent, resetViewport, resetLayout, onSetDragMode, onNodeSelected, onEdgeSelected, onSearchResults, onUpdateConstraints } = useRenderEngine(canvasParentRef, state.graph, props.graphLayout, props.editable, props.editorMode, props.initialConstraints, props.zoomThresholds);
+    const { getCenterPosition, useEngineEvent, resetViewport, resetLayout, onSetDragMode, onNodeSelected, onEdgeSelected, onSearchResults, onUpdateConstraints } = useRenderEngine(canvasParentRef, state.graph, props.graphLayout, props.editable, props.editorMode, props.initialConstraints, props.processEdgeStyle, props.zoomThresholds);
     const [selectedEdge, setSelectedEdge] = React.useState(null);
     const [selectedNode, setSelectedNode] = React.useState(null);
     const [highlightedNode, setHighlightedNode] = React.useState();
@@ -383568,7 +383611,16 @@ ${letters.join("\n")}`;
       editorMode: props.editorMode,
       onNotify: props.onNotify,
       verboseDescriptions: props.verboseDescriptions
-    }, children: jsxRuntime.exports.jsx(pointerCtx.Provider, { value: { disablePointerEvents: isDragging, onPanelEnter, onPanelExit }, children: jsxRuntime.exports.jsx("div", { style: Object.assign({ display: "flex", flex: "1 1 auto", flexDirection: "column", minHeight: "100px", position: "relative" }, props.style), children: jsxRuntime.exports.jsxs(Graph, { onMouseEnter: () => setShowFrameButtons(true), onMouseLeave: () => setShowFrameButtons(false), children: [jsxRuntime.exports.jsxs(EditorOverlay, { bottomLeft: jsxRuntime.exports.jsx(Legend, { listItems: getLegendData(state.editorMode, props.additionalLegends) }), onDelete, onNext, onPrev, showFrameButtons: !isDragging && showFrameButtons, title: panelTitle, topLeft: jsxRuntime.exports.jsx(RecalculateLayoutButton, { onResetLayout: resetLayout }), topRight: jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(FloatingSearchBar, { onChange: onSearchBarChange, onClose: () => setSelectedNode(null), onNext: onNextSearchResult, onPrev: onPrevSearchResult, selectedResult: currentSearchNode + 1, totalNumberOfResults: searchResults.length }), jsxRuntime.exports.jsx(CenterGraphButton, { onResetZoom: resetViewport }), jsxRuntime.exports.jsx(EditControls, { onAddNode }), jsxRuntime.exports.jsx(DragModeButton, { dragMode, setDragMode })] }), validContentSelected: contentSelected, children: [selectedEdge && jsxRuntime.exports.jsx(EdgeInfoContent, { api: api2, onConfirmDirection: confirmDirection, onUpdateConstraint: updateConstraint, selectedConstraint, selectedEdge, state }, selectedEdge.join("-")), selectedNode && jsxRuntime.exports.jsx(NodeInfoContent, { api: api2, selectedNode, state }, selectedNode)] }), jsxRuntime.exports.jsx("div", { ref: canvasParentRef, style: { height: "100%", width: "100%" } }), jsxRuntime.exports.jsx(Tooltip$1, { content: tooltipContent, followCursor: true, getReferenceClientRect: tooltipRef.current, visible: !isInPanel && !!tooltipContent }), jsxRuntime.exports.jsx(ConfirmationModal, Object.assign({ title: "Confirm Removal" }, removeEdgeProps))] }) }) }) });
+    }, children: jsxRuntime.exports.jsx(pointerCtx.Provider, { value: { disablePointerEvents: isDragging, onPanelEnter, onPanelExit }, children: jsxRuntime.exports.jsx("div", { style: Object.assign({ display: "flex", flex: "1 1 auto", flexDirection: "column", minHeight: "100px", position: "relative" }, props.style), children: jsxRuntime.exports.jsxs(Graph, { onMouseEnter: () => setShowFrameButtons(true), onMouseLeave: () => setShowFrameButtons(false), children: [jsxRuntime.exports.jsx(EditorOverlay, { bottomLeft: jsxRuntime.exports.jsx(Legend, { listItems: getLegendData(state.editorMode, props.additionalLegends) }), onDelete, onNext, onPrev, showFrameButtons: !isDragging && showFrameButtons, title: panelTitle, topLeft: jsxRuntime.exports.jsx(RecalculateLayoutButton, { onResetLayout: resetLayout }), topRight: jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(FloatingSearchBar, { onChange: onSearchBarChange, onClose: () => setSelectedNode(null), onNext: onNextSearchResult, onPrev: onPrevSearchResult, selectedResult: currentSearchNode + 1, totalNumberOfResults: searchResults.length }), jsxRuntime.exports.jsx(CenterGraphButton, { onResetZoom: resetViewport }), jsxRuntime.exports.jsx(EditControls, { onAddNode }), jsxRuntime.exports.jsx(DragModeButton, { dragMode, setDragMode })] }), validContentSelected: contentSelected, children: jsxRuntime.exports.jsxs(graphCtx.Provider, { value: {
+      api: api2,
+      constraints,
+      editable: props.editable,
+      graphState: state,
+      onUpdateConstraint: updateConstraint,
+      selectedEdge,
+      selectedNode,
+      verboseDescriptions: props.verboseDescriptions
+    }, children: [selectedEdge && jsxRuntime.exports.jsx(EdgeInfoContent, { api: api2, extraSections: props.edgeExtrasContent, onConfirmDirection: confirmDirection, onUpdateConstraint: updateConstraint, selectedConstraint, selectedEdge, state }, selectedEdge.join("-")), selectedNode && jsxRuntime.exports.jsx(NodeInfoContent, { api: api2, extraSections: props.nodeExtrasContent, selectedNode, state }, selectedNode)] }) }), jsxRuntime.exports.jsx("div", { ref: canvasParentRef, style: { height: "100%", width: "100%" } }), jsxRuntime.exports.jsx(Tooltip$1, { content: tooltipContent, followCursor: true, getReferenceClientRect: tooltipRef.current, visible: !isInPanel && !!tooltipContent }), jsxRuntime.exports.jsx(ConfirmationModal, Object.assign({ title: "Confirm Removal" }, removeEdgeProps))] }) }) }) });
   }
   var DndContext = React.createContext({
     dragDropManager: void 0
@@ -388680,5 +388732,6 @@ ${letters.join("\n")}`;
   exports2.Tooltip = Tooltip;
   exports2.UploadDropzone = UploadDropzone;
   exports2.VisualEdgeEncoder = VisualEdgeEncoder;
+  exports2.parseLayoutDefinition = parseLayoutDefinition;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@darajs/components",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "Components for the Dara framework",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -26,9 +26,9 @@
   "license": "Apache-2.0",
   "prettier": "@darajs/prettier-config",
   "devDependencies": {
-    "@darajs/eslint-config": "~1.1.0",
-    "@darajs/prettier-config": "~1.1.0",
-    "@darajs/stylelint-config": "~1.1.0",
+    "@darajs/eslint-config": "~1.2.0",
+    "@darajs/prettier-config": "~1.2.0",
+    "@darajs/stylelint-config": "~1.2.0",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/lodash": "^4.14.155",
     "@types/react": "^18.2.6",
@@ -51,14 +51,14 @@
   },
   "dependencies": {
     "@bokeh/bokehjs": "~3.1.1",
-    "@darajs/core": "1.1.9",
-    "@darajs/styled-components": "~1.1.0",
-    "@darajs/ui-causal-graph-editor": "~1.1.0",
-    "@darajs/ui-code-editor": "~1.1.0",
-    "@darajs/ui-components": "~1.1.0",
-    "@darajs/ui-hierarchy-viewer": "~1.1.0",
-    "@darajs/ui-icons": "~1.1.0",
-    "@darajs/ui-utils": "~1.1.0",
+    "@darajs/core": "1.1.10",
+    "@darajs/styled-components": "~1.2.0",
+    "@darajs/ui-causal-graph-editor": "~1.2.0",
+    "@darajs/ui-code-editor": "~1.2.0",
+    "@darajs/ui-components": "~1.2.0",
+    "@darajs/ui-hierarchy-viewer": "~1.2.0",
+    "@darajs/ui-icons": "~1.2.0",
+    "@darajs/ui-utils": "~1.2.0",
     "@popperjs/core": "2.4.0",
     "date-fns": "2.9.0",
     "immer": "^9.0.6",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "acabc17ea2586f8a1b97280a57a5e75c5211460c"
+  "gitHead": "02758efb829553d67dc8f6114369c327d6e9a03e"
 }