@neo4j-ndl/react-graph 1.2.44 → 1.3.0

package/lib/esm/sidepanel-components/graph-label-wrapper.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { GraphLabel, StatusIndicator } from '@neo4j-ndl/react';
+import classNames from 'classnames';
+export const GraphLabelWrapper = ({ label, type, metaData, tabIndex = -1, showCount = false, }) => {
+    var _a, _b, _c;
+    const classes = classNames('ndl-graph-label-rule-indicator', {
+        'ndl-graph-label-rule-indicator-shift-left': type === 'relationship',
+    });
+    return (_jsxs(GraphLabel, { type: type, color: (_b = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.colorDistribution[0]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : '', className: "ndl-graph-label-wrapper", as: "span", htmlAttributes: {
+            tabIndex,
+        }, children: [((_c = metaData === null || metaData === void 0 ? void 0 : metaData.colorDistribution.length) !== null && _c !== void 0 ? _c : 0) > 1 && (_jsx(StatusIndicator, { className: classes, variant: "info" })), label, showCount && (metaData === null || metaData === void 0 ? void 0 : metaData.totalCount) != null && ` (${metaData.totalCount})`] }));
+};
+//# sourceMappingURL=graph-label-wrapper.js.map

package/lib/esm/sidepanel-components/graph-label-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-label-wrapper.js","sourceRoot":"","sources":["../../../src/sidepanel-components/graph-label-wrapper.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AAYpC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,GAAG,CAAC,CAAC,EACb,SAAS,GAAG,KAAK,GACM,EAAE,EAAE;;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,gCAAgC,EAAE;QAC3D,2CAA2C,EAAE,IAAI,KAAK,cAAc;KACrE,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,iBAAiB,CAAC,CAAC,CAAC,0CAAE,KAAK,mCAAI,EAAE,EAClD,SAAS,EAAC,yBAAyB,EACnC,EAAE,EAAC,MAAM,EACT,cAAc,EAAE;YACd,QAAQ;SACT,aAEA,CAAC,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,iBAAiB,CAAC,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,IAAI,CAChD,KAAC,eAAe,IAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAC,MAAM,GAAG,CACvD,EACA,KAAK,EACL,SAAS,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,KAAI,IAAI,IAAI,KAAK,QAAQ,CAAC,UAAU,GAAG,IAC9D,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { GraphLabel, StatusIndicator } from '@neo4j-ndl/react';\nimport classNames from 'classnames';\n\nimport { type GraphItemMetaData } from '../graph-visualization-context';\n\ntype GraphLabelWrapperProps = {\n  label: string;\n  type: 'node' | 'relationship';\n  metaData: GraphItemMetaData | undefined;\n  tabIndex?: number;\n  showCount?: boolean;\n};\n\nexport const GraphLabelWrapper = ({\n  label,\n  type,\n  metaData,\n  tabIndex = -1,\n  showCount = false,\n}: GraphLabelWrapperProps) => {\n  const classes = classNames('ndl-graph-label-rule-indicator', {\n    'ndl-graph-label-rule-indicator-shift-left': type === 'relationship',\n  });\n\n  return (\n    <GraphLabel\n      type={type}\n      color={metaData?.colorDistribution[0]?.color ?? ''}\n      className=\"ndl-graph-label-wrapper\"\n      as=\"span\"\n      htmlAttributes={{\n        tabIndex,\n      }}\n    >\n      {(metaData?.colorDistribution.length ?? 0) > 1 && (\n        <StatusIndicator className={classes} variant=\"info\" />\n      )}\n      {label}\n      {showCount && metaData?.totalCount != null && ` (${metaData.totalCount})`}\n    </GraphLabel>\n  );\n};\n"]}

package/lib/esm/sidepanel-components/overview-panel.js

@@ -19,23 +19,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *  You should have received a copy of the GNU General Public License
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { GraphLabel, Typography } from '@neo4j-ndl/react';
+import { StatusIndicator, Typography } from '@neo4j-ndl/react';
 import { useGraphVisualizationContext } from '../graph-visualization-context';
 import { GraphVisualizationSidepanel } from '../graph-visualization-sidepanel';
+import { GraphLabelWrapper } from './graph-label-wrapper';
 import { ShowAll } from './show-all';
 const OVERVIEW_STEP_SIZE = 25;
 export const OverviewPanel = () => {
-    const { nvlGraph } = useGraphVisualizationContext();
-    return (_jsxs(_Fragment, { children: [_jsx(GraphVisualizationSidepanel.Title, { children: _jsx(Typography, { variant: "title-4", children: "Results overview" }) }), _jsx(GraphVisualizationSidepanel.Content, { children: _jsxs("div", { className: "ndl-graph-visualization-overview-panel", children: [nvlGraph.dataLookupTable.labels.length > 0 && (_jsxs("div", { className: "ndl-overview-section", children: [_jsx("div", { className: "ndl-overview-header", children: _jsxs("span", { children: ["Nodes", ` (${nvlGraph.nodes.length.toLocaleString()})`] }) }), _jsx("div", { className: "ndl-overview-items", children: _jsx(ShowAll, { initiallyShown: OVERVIEW_STEP_SIZE, isButtonGroup: true, children: nvlGraph.dataLookupTable.labels.map((label) => function GraphLabelWrapper() {
-                                            var _a, _b, _c, _d;
-                                            return (_jsxs(GraphLabel, { type: "node", htmlAttributes: {
-                                                    tabIndex: -1,
-                                                }, color: (_b = (_a = nvlGraph.dataLookupTable.labelMetaData[label]) === null || _a === void 0 ? void 0 : _a.mostCommonColor) !== null && _b !== void 0 ? _b : '', as: "span", children: [label, " (", (_d = (_c = nvlGraph.dataLookupTable.labelMetaData[label]) === null || _c === void 0 ? void 0 : _c.totalCount) !== null && _d !== void 0 ? _d : 0, ")"] }, label));
-                                        }) }) })] })), nvlGraph.dataLookupTable.types.length > 0 && (_jsxs("div", { className: "ndl-overview-relationships-section", children: [_jsxs("span", { className: "ndl-overview-relationships-title", children: ["Relationships", ` (${nvlGraph.rels.length.toLocaleString()})`] }), _jsx("div", { className: "ndl-overview-items", children: _jsx(ShowAll, { initiallyShown: OVERVIEW_STEP_SIZE, isButtonGroup: true, children: nvlGraph.dataLookupTable.types.map((type) => {
-                                            var _a, _b, _c, _d;
-                                            return (_jsxs(GraphLabel, { type: "relationship", htmlAttributes: {
-                                                    tabIndex: -1,
-                                                }, color: (_b = (_a = nvlGraph.dataLookupTable.typeMetaData[type]) === null || _a === void 0 ? void 0 : _a.mostCommonColor) !== null && _b !== void 0 ? _b : '', as: "span", children: [type, " (", (_d = (_c = nvlGraph.dataLookupTable.typeMetaData[type]) === null || _c === void 0 ? void 0 : _c.totalCount) !== null && _d !== void 0 ? _d : 0, ")"] }, type));
-                                        }) }) })] }))] }) })] }));
+    const { nvlGraph, metadataLookup } = useGraphVisualizationContext();
+    return (_jsxs(_Fragment, { children: [_jsx(GraphVisualizationSidepanel.Title, { children: _jsx(Typography, { variant: "title-4", children: "Results overview" }) }), _jsx(GraphVisualizationSidepanel.Content, { children: _jsxs("div", { className: "ndl-graph-visualization-overview-panel", children: [metadataLookup.labels.length > 0 && (_jsxs("div", { className: "ndl-overview-section", children: [_jsx("div", { className: "ndl-overview-header", children: _jsxs("span", { children: ["Nodes", ` (${nvlGraph.nodes.length.toLocaleString()})`] }) }), _jsx("div", { className: "ndl-overview-items", children: _jsx(ShowAll, { initiallyShown: OVERVIEW_STEP_SIZE, isButtonGroup: true, children: metadataLookup.labels.map((label) => (_jsx(GraphLabelWrapper, { label: label, type: "node", metaData: metadataLookup.labelMetaData[label], showCount: true }, label))) }) })] })), metadataLookup.reltypes.length > 0 && (_jsxs("div", { className: "ndl-overview-relationships-section", children: [_jsxs("span", { className: "ndl-overview-relationships-title", children: ["Relationships", ` (${nvlGraph.rels.length.toLocaleString()})`] }), _jsx("div", { className: "ndl-overview-items", children: _jsx(ShowAll, { initiallyShown: OVERVIEW_STEP_SIZE, isButtonGroup: true, children: metadataLookup.reltypes.map((type) => (_jsx(GraphLabelWrapper, { label: type, type: "relationship", metaData: metadataLookup.reltypeMetaData[type], showCount: true }, type))) }) })] })), metadataLookup.hasMultipleColors && (_jsxs("div", { className: "ndl-overview-hint", children: [_jsx(StatusIndicator, { variant: "info" }), _jsx(Typography, { variant: "body-small", children: "indicates color may not match" })] }))] }) })] }));
 };
 //# sourceMappingURL=overview-panel.js.map

package/lib/esm/sidepanel-components/overview-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"overview-panel.js","sourceRoot":"","sources":["../../../src/sidepanel-components/overview-panel.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,QAAQ,EAAE,GAAG,4BAA4B,EAAE,CAAC;IAEpD,OAAO,CACL,8BACE,KAAC,2BAA2B,CAAC,KAAK,cAChC,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,iCAA8B,GACzB,EACpC,KAAC,2BAA2B,CAAC,OAAO,cAClC,eAAK,SAAS,EAAC,wCAAwC,aACpD,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAC7C,eAAK,SAAS,EAAC,sBAAsB,aACnC,cAAK,SAAS,EAAC,qBAAqB,YAClC,oCACQ,KAAK,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,IAC/C,GACH,EACN,cAAK,SAAS,EAAC,oBAAoB,YACjC,KAAC,OAAO,IAAC,cAAc,EAAE,kBAAkB,EAAE,aAAa,kBACvD,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAClC,CAAC,KAAK,EAAE,EAAE,CACR,SAAS,iBAAiB;;4CACxB,OAAO,CACL,MAAC,UAAU,IACT,IAAI,EAAC,MAAM,EAEX,cAAc,EAAE;oDACd,QAAQ,EAAE,CAAC,CAAC;iDACb,EACD,KAAK,EACH,MAAA,MAAA,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,0CACzC,eAAe,mCAAI,EAAE,EAE3B,EAAE,EAAC,MAAM,aAER,KAAK,QACL,MAAA,MAAA,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,0CAC1C,UAAU,mCAAI,CAAC,UAZd,KAAK,CAcC,CACd,CAAC;wCACJ,CAAC,CACJ,GACO,GACN,IACF,CACP,EAEA,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5C,eAAK,SAAS,EAAC,oCAAoC,aACjD,gBAAM,SAAS,EAAC,kCAAkC,8BAClC,KAAK,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,IACtD,EACP,cAAK,SAAS,EAAC,oBAAoB,YACjC,KAAC,OAAO,IAAC,cAAc,EAAE,kBAAkB,EAAE,aAAa,kBACvD,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;;4CAAC,OAAA,CAC5C,MAAC,UAAU,IACT,IAAI,EAAC,cAAc,EAEnB,cAAc,EAAE;oDACd,QAAQ,EAAE,CAAC,CAAC;iDACb,EACD,KAAK,EACH,MAAA,MAAA,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,0CACvC,eAAe,mCAAI,EAAE,EAE3B,EAAE,EAAC,MAAM,aAER,IAAI,QACJ,MAAA,MAAA,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,0CACxC,UAAU,mCAAI,CAAC,UAZd,IAAI,CAcE,CACd,CAAA;yCAAA,CAAC,GACM,GACN,IACF,CACP,IACG,GAC8B,IACrC,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { GraphLabel, Typography } from '@neo4j-ndl/react';\n\nimport { useGraphVisualizationContext } from '../graph-visualization-context';\nimport { GraphVisualizationSidepanel } from '../graph-visualization-sidepanel';\nimport { ShowAll } from './show-all';\n\nconst OVERVIEW_STEP_SIZE = 25;\n\nexport const OverviewPanel = () => {\n  const { nvlGraph } = useGraphVisualizationContext();\n\n  return (\n    <>\n      <GraphVisualizationSidepanel.Title>\n        <Typography variant=\"title-4\">Results overview</Typography>\n      </GraphVisualizationSidepanel.Title>\n      <GraphVisualizationSidepanel.Content>\n        <div className=\"ndl-graph-visualization-overview-panel\">\n          {nvlGraph.dataLookupTable.labels.length > 0 && (\n            <div className=\"ndl-overview-section\">\n              <div className=\"ndl-overview-header\">\n                <span>\n                  Nodes{` (${nvlGraph.nodes.length.toLocaleString()})`}\n                </span>\n              </div>\n              <div className=\"ndl-overview-items\">\n                <ShowAll initiallyShown={OVERVIEW_STEP_SIZE} isButtonGroup>\n                  {nvlGraph.dataLookupTable.labels.map(\n                    (label) =>\n                      function GraphLabelWrapper() {\n                        return (\n                          <GraphLabel\n                            type=\"node\"\n                            key={label}\n                            htmlAttributes={{\n                              tabIndex: -1,\n                            }}\n                            color={\n                              nvlGraph.dataLookupTable.labelMetaData[label]\n                                ?.mostCommonColor ?? ''\n                            }\n                            as=\"span\"\n                          >\n                            {label} (\n                            {nvlGraph.dataLookupTable.labelMetaData[label]\n                              ?.totalCount ?? 0}\n                            )\n                          </GraphLabel>\n                        );\n                      },\n                  )}\n                </ShowAll>\n              </div>\n            </div>\n          )}\n\n          {nvlGraph.dataLookupTable.types.length > 0 && (\n            <div className=\"ndl-overview-relationships-section\">\n              <span className=\"ndl-overview-relationships-title\">\n                Relationships{` (${nvlGraph.rels.length.toLocaleString()})`}\n              </span>\n              <div className=\"ndl-overview-items\">\n                <ShowAll initiallyShown={OVERVIEW_STEP_SIZE} isButtonGroup>\n                  {nvlGraph.dataLookupTable.types.map((type) => (\n                    <GraphLabel\n                      type=\"relationship\"\n                      key={type}\n                      htmlAttributes={{\n                        tabIndex: -1,\n                      }}\n                      color={\n                        nvlGraph.dataLookupTable.typeMetaData[type]\n                          ?.mostCommonColor ?? ''\n                      }\n                      as=\"span\"\n                    >\n                      {type} (\n                      {nvlGraph.dataLookupTable.typeMetaData[type]\n                        ?.totalCount ?? 0}\n                      )\n                    </GraphLabel>\n                  ))}\n                </ShowAll>\n              </div>\n            </div>\n          )}\n        </div>\n      </GraphVisualizationSidepanel.Content>\n    </>\n  );\n};\n"]}
+{"version":3,"file":"overview-panel.js","sourceRoot":"","sources":["../../../src/sidepanel-components/overview-panel.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,4BAA4B,EAAE,CAAC;IAEpE,OAAO,CACL,8BACE,KAAC,2BAA2B,CAAC,KAAK,cAChC,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,iCAA8B,GACzB,EACpC,KAAC,2BAA2B,CAAC,OAAO,cAClC,eAAK,SAAS,EAAC,wCAAwC,aACpD,cAAc,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,eAAK,SAAS,EAAC,sBAAsB,aACnC,cAAK,SAAS,EAAC,qBAAqB,YAClC,oCACQ,KAAK,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,IAC/C,GACH,EACN,cAAK,SAAS,EAAC,oBAAoB,YACjC,KAAC,OAAO,IAAC,cAAc,EAAE,kBAAkB,EAAE,aAAa,kBACvD,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpC,KAAC,iBAAiB,IAEhB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,EAC7C,SAAS,UAJJ,KAAK,CAKV,CACH,CAAC,GACM,GACN,IACF,CACP,EAEA,cAAc,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CACrC,eAAK,SAAS,EAAC,oCAAoC,aACjD,gBAAM,SAAS,EAAC,kCAAkC,8BAClC,KAAK,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,IACtD,EACP,cAAK,SAAS,EAAC,oBAAoB,YACjC,KAAC,OAAO,IAAC,cAAc,EAAE,kBAAkB,EAAE,aAAa,kBACvD,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrC,KAAC,iBAAiB,IAEhB,KAAK,EAAE,IAAI,EACX,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,EAC9C,SAAS,UAJJ,IAAI,CAKT,CACH,CAAC,GACM,GACN,IACF,CACP,EAEA,cAAc,CAAC,iBAAiB,IAAI,CACnC,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,eAAe,IAAC,OAAO,EAAC,MAAM,GAAG,EAClC,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,8CAEnB,IACT,CACP,IACG,GAC8B,IACrC,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { StatusIndicator, Typography } from '@neo4j-ndl/react';\n\nimport { useGraphVisualizationContext } from '../graph-visualization-context';\nimport { GraphVisualizationSidepanel } from '../graph-visualization-sidepanel';\nimport { GraphLabelWrapper } from './graph-label-wrapper';\nimport { ShowAll } from './show-all';\n\nconst OVERVIEW_STEP_SIZE = 25;\n\nexport const OverviewPanel = () => {\n  const { nvlGraph, metadataLookup } = useGraphVisualizationContext();\n\n  return (\n    <>\n      <GraphVisualizationSidepanel.Title>\n        <Typography variant=\"title-4\">Results overview</Typography>\n      </GraphVisualizationSidepanel.Title>\n      <GraphVisualizationSidepanel.Content>\n        <div className=\"ndl-graph-visualization-overview-panel\">\n          {metadataLookup.labels.length > 0 && (\n            <div className=\"ndl-overview-section\">\n              <div className=\"ndl-overview-header\">\n                <span>\n                  Nodes{` (${nvlGraph.nodes.length.toLocaleString()})`}\n                </span>\n              </div>\n              <div className=\"ndl-overview-items\">\n                <ShowAll initiallyShown={OVERVIEW_STEP_SIZE} isButtonGroup>\n                  {metadataLookup.labels.map((label) => (\n                    <GraphLabelWrapper\n                      key={label}\n                      label={label}\n                      type=\"node\"\n                      metaData={metadataLookup.labelMetaData[label]}\n                      showCount\n                    />\n                  ))}\n                </ShowAll>\n              </div>\n            </div>\n          )}\n\n          {metadataLookup.reltypes.length > 0 && (\n            <div className=\"ndl-overview-relationships-section\">\n              <span className=\"ndl-overview-relationships-title\">\n                Relationships{` (${nvlGraph.rels.length.toLocaleString()})`}\n              </span>\n              <div className=\"ndl-overview-items\">\n                <ShowAll initiallyShown={OVERVIEW_STEP_SIZE} isButtonGroup>\n                  {metadataLookup.reltypes.map((type) => (\n                    <GraphLabelWrapper\n                      key={type}\n                      label={type}\n                      type=\"relationship\"\n                      metaData={metadataLookup.reltypeMetaData[type]}\n                      showCount\n                    />\n                  ))}\n                </ShowAll>\n              </div>\n            </div>\n          )}\n\n          {metadataLookup.hasMultipleColors && (\n            <div className=\"ndl-overview-hint\">\n              <StatusIndicator variant=\"info\" />\n              <Typography variant=\"body-small\">\n                indicates color may not match\n              </Typography>\n            </div>\n          )}\n        </div>\n      </GraphVisualizationSidepanel.Content>\n    </>\n  );\n};\n"]}

package/lib/esm/stories/graph-visualization-rule-based-styling-advanced.story.js

@@ -0,0 +1,244 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { GraphVisualization } from '../graph-visualization';
+import { advancedStoryGraph, containerClasses } from './story-data';
+export const defaultNodeRules = [
+    {
+        match: { label: null },
+        apply: { size: 10 },
+    },
+];
+export const trainerRules = [
+    {
+        match: { label: 'Trainer' },
+        where: { equal: [{ property: 'reputation' }, 'Gym Leader'] },
+        priority: 20, // Gym Leaders are special - should override level-based styling
+        apply: {
+            color: '#9b59b6',
+            captions: [
+                { value: { property: 'name' }, styles: ['bold'] },
+                { value: ' 🏆', styles: [] },
+                { value: ' Gym Leader', styles: ['italic'] },
+            ],
+            size: 45,
+            captionAlign: 'bottom',
+        },
+    },
+    {
+        match: { label: 'Trainer' },
+        where: { greaterThanOrEqual: [{ property: 'level' }, 85] },
+        priority: 10, // Base high-level styling
+        apply: {
+            size: 30,
+            captions: [
+                { value: { property: 'name' }, styles: ['bold'] },
+                { value: ' (Lv ', styles: [] },
+                { value: { property: 'level' }, styles: [] },
+                { value: ')', styles: [] },
+            ],
+            captionSize: 2,
+        },
+    },
+];
+export const pokemonRules = [
+    // Make the 'saur family green is our highest priority
+    {
+        match: { label: 'Pokemon' },
+        where: { endsWith: [{ property: 'name' }, 'saur'] },
+        priority: 50,
+        apply: {
+            color: '#2ecc71',
+            captions: [
+                { value: '🌿 ', styles: [] },
+                { value: { property: 'name' }, styles: ['bold', 'italic'] },
+            ],
+        },
+    },
+    {
+        match: { label: 'Pokemon' },
+        where: { equal: [{ property: 'is_starter' }, true] },
+        apply: {
+            color: '#f39c12',
+            captions: [
+                { value: { property: 'name' }, styles: ['bold'] },
+                { value: ' ⭐', styles: [] },
+            ],
+            size: 40,
+        },
+    },
+    {
+        match: { label: 'Pokemon' },
+        where: { greaterThanOrEqual: [{ property: 'level' }, 85] },
+        priority: 30, // High-level Pokemon override starter styling
+        apply: {
+            color: '#c0392b',
+            captions: [
+                { value: '💪 ', styles: [] },
+                { value: { property: 'name' }, styles: ['bold'] },
+                { value: ' Lv', styles: [] },
+                { value: { property: 'level' }, styles: [] },
+            ],
+            size: 42,
+        },
+    },
+    {
+        match: { label: 'Pokemon' },
+        where: { lessThan: [{ property: 'catch_rate' }, 50] },
+        priority: 40, // Rare caption is our second highest priority
+        apply: {
+            captions: [
+                { value: { property: 'name' }, styles: ['bold'] },
+                { value: ' (Rare)', styles: ['italic'] },
+            ],
+        },
+    },
+    {
+        match: { label: 'Pokemon' },
+        where: {
+            and: [
+                { lessThan: [{ property: 'level' }, 10] },
+                { not: { equal: [{ property: 'is_starter' }, true] } },
+            ],
+        },
+        priority: 15, // Baby Pokemon get special styling
+        apply: {
+            size: 25,
+            color: '#95a5a6',
+            captions: [
+                { value: { property: 'name' }, styles: ['italic'] },
+                { value: ' (Smol)', styles: [] },
+            ],
+        },
+    },
+];
+export const typeRules = [
+    {
+        match: { label: 'Type' },
+        where: {
+            or: [
+                { equal: [{ property: 'name' }, 'Grass'] },
+                { equal: [{ property: 'name' }, 'Poison'] },
+            ],
+        },
+        apply: {
+            color: '#27ae60',
+        },
+    },
+];
+export const gymRules = [
+    {
+        match: { label: 'Gym' },
+        apply: {
+            color: '#8e44ad',
+            size: 48,
+            captionAlign: 'top',
+            captions: [
+                { value: '🏛️ ', styles: [] },
+                { value: { property: 'name' }, styles: ['bold', 'underline'] },
+            ],
+        },
+    },
+];
+export const battledRelRules = [
+    {
+        match: { reltype: 'BATTLED' },
+        where: { equal: [{ property: 'won' }, true] },
+        apply: {
+            color: '#27ae60',
+            width: 4,
+            captions: [{ value: 'WON BATTLE', styles: ['bold'] }],
+            captionSize: 2,
+        },
+    },
+    {
+        match: { reltype: 'BATTLED' },
+        where: { equal: [{ property: 'won' }, false] },
+        apply: {
+            color: '#e74c3c',
+            width: 2,
+            captions: [{ value: 'LOST BATTLE', styles: ['italic'] }],
+            captionSize: 2,
+        },
+    },
+];
+export const caughtRelRules = [
+    {
+        match: { reltype: 'CAUGHT' },
+        apply: {
+            color: '#e91e63',
+            width: 3,
+            captions: [
+                { value: 'Caught @ Lv', styles: [] },
+                { value: { property: 'level' }, styles: ['bold'] },
+            ],
+            captionSize: 1.5,
+        },
+    },
+];
+export const evolvesToRelRules = [
+    {
+        match: { reltype: 'EVOLVES_TO' },
+        apply: {
+            color: '#16a085',
+            width: 2,
+            captions: [{ value: '→', styles: ['bold'] }],
+        },
+    },
+    {
+        match: { reltype: 'EVOLVES_TO' },
+        where: { equal: [{ property: 'method' }, 'Level'] },
+        priority: 1,
+        apply: {
+            captions: [
+                { value: '→ Lv', styles: [] },
+                { value: { property: 'level' }, styles: ['bold'] },
+            ],
+        },
+    },
+    {
+        match: { reltype: 'EVOLVES_TO' },
+        where: { not: { equal: [{ property: 'method' }, 'Level'] } },
+        priority: 1,
+        apply: {
+            color: '#8e44ad',
+            captions: [
+                { value: '→ ', styles: [] },
+                { value: { property: 'method' }, styles: ['italic'] },
+            ],
+        },
+    },
+];
+export const advancedStyleRules = [
+    ...defaultNodeRules,
+    ...trainerRules,
+    ...pokemonRules,
+    ...typeRules,
+    ...gymRules,
+    ...battledRelRules,
+    ...caughtRelRules,
+    ...evolvesToRelRules,
+];
+const Component = () => {
+    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: advancedStoryGraph.nodes, rels: advancedStoryGraph.rels, className: containerClasses, nvlStyleRules: advancedStyleRules }) }));
+};
+export default Component;
+//# sourceMappingURL=graph-visualization-rule-based-styling-advanced.story.js.map

package/lib/esm/stories/graph-visualization-rule-based-styling-advanced.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-visualization-rule-based-styling-advanced.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-rule-based-styling-advanced.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { GraphVisualization } from '../graph-visualization';\nimport { type StyleRule } from '../styling/style-types';\nimport { advancedStoryGraph, containerClasses } from './story-data';\n\nexport const defaultNodeRules: StyleRule[] = [\n  {\n    match: { label: null },\n    apply: { size: 10 },\n  },\n];\n\nexport const trainerRules: StyleRule[] = [\n  {\n    match: { label: 'Trainer' },\n    where: { equal: [{ property: 'reputation' }, 'Gym Leader'] },\n    priority: 20, // Gym Leaders are special - should override level-based styling\n    apply: {\n      color: '#9b59b6',\n      captions: [\n        { value: { property: 'name' }, styles: ['bold'] },\n        { value: ' 🏆', styles: [] },\n        { value: ' Gym Leader', styles: ['italic'] },\n      ],\n      size: 45,\n      captionAlign: 'bottom',\n    },\n  },\n  {\n    match: { label: 'Trainer' },\n    where: { greaterThanOrEqual: [{ property: 'level' }, 85] },\n    priority: 10, // Base high-level styling\n    apply: {\n      size: 30,\n      captions: [\n        { value: { property: 'name' }, styles: ['bold'] },\n        { value: ' (Lv ', styles: [] },\n        { value: { property: 'level' }, styles: [] },\n        { value: ')', styles: [] },\n      ],\n      captionSize: 2,\n    },\n  },\n];\n\nexport const pokemonRules: StyleRule[] = [\n  // Make the 'saur family green is our highest priority\n  {\n    match: { label: 'Pokemon' },\n    where: { endsWith: [{ property: 'name' }, 'saur'] },\n    priority: 50,\n    apply: {\n      color: '#2ecc71',\n      captions: [\n        { value: '🌿 ', styles: [] },\n        { value: { property: 'name' }, styles: ['bold', 'italic'] },\n      ],\n    },\n  },\n  {\n    match: { label: 'Pokemon' },\n    where: { equal: [{ property: 'is_starter' }, true] },\n    apply: {\n      color: '#f39c12',\n      captions: [\n        { value: { property: 'name' }, styles: ['bold'] },\n        { value: ' ⭐', styles: [] },\n      ],\n      size: 40,\n    },\n  },\n  {\n    match: { label: 'Pokemon' },\n    where: { greaterThanOrEqual: [{ property: 'level' }, 85] },\n    priority: 30, // High-level Pokemon override starter styling\n    apply: {\n      color: '#c0392b',\n      captions: [\n        { value: '💪 ', styles: [] },\n        { value: { property: 'name' }, styles: ['bold'] },\n        { value: ' Lv', styles: [] },\n        { value: { property: 'level' }, styles: [] },\n      ],\n      size: 42,\n    },\n  },\n  {\n    match: { label: 'Pokemon' },\n    where: { lessThan: [{ property: 'catch_rate' }, 50] },\n    priority: 40, // Rare caption is our second highest priority\n    apply: {\n      captions: [\n        { value: { property: 'name' }, styles: ['bold'] },\n        { value: ' (Rare)', styles: ['italic'] },\n      ],\n    },\n  },\n  {\n    match: { label: 'Pokemon' },\n    where: {\n      and: [\n        { lessThan: [{ property: 'level' }, 10] },\n        { not: { equal: [{ property: 'is_starter' }, true] } },\n      ],\n    },\n    priority: 15, // Baby Pokemon get special styling\n    apply: {\n      size: 25,\n      color: '#95a5a6',\n      captions: [\n        { value: { property: 'name' }, styles: ['italic'] },\n        { value: ' (Smol)', styles: [] },\n      ],\n    },\n  },\n];\n\nexport const typeRules: StyleRule[] = [\n  {\n    match: { label: 'Type' },\n    where: {\n      or: [\n        { equal: [{ property: 'name' }, 'Grass'] },\n        { equal: [{ property: 'name' }, 'Poison'] },\n      ],\n    },\n    apply: {\n      color: '#27ae60',\n    },\n  },\n];\n\nexport const gymRules: StyleRule[] = [\n  {\n    match: { label: 'Gym' },\n    apply: {\n      color: '#8e44ad',\n      size: 48,\n      captionAlign: 'top',\n      captions: [\n        { value: '🏛️ ', styles: [] },\n        { value: { property: 'name' }, styles: ['bold', 'underline'] },\n      ],\n    },\n  },\n];\n\nexport const battledRelRules: StyleRule[] = [\n  {\n    match: { reltype: 'BATTLED' },\n    where: { equal: [{ property: 'won' }, true] },\n    apply: {\n      color: '#27ae60',\n      width: 4,\n      captions: [{ value: 'WON BATTLE', styles: ['bold'] }],\n      captionSize: 2,\n    },\n  },\n  {\n    match: { reltype: 'BATTLED' },\n    where: { equal: [{ property: 'won' }, false] },\n    apply: {\n      color: '#e74c3c',\n      width: 2,\n      captions: [{ value: 'LOST BATTLE', styles: ['italic'] }],\n      captionSize: 2,\n    },\n  },\n];\n\nexport const caughtRelRules: StyleRule[] = [\n  {\n    match: { reltype: 'CAUGHT' },\n    apply: {\n      color: '#e91e63',\n      width: 3,\n      captions: [\n        { value: 'Caught @ Lv', styles: [] },\n        { value: { property: 'level' }, styles: ['bold'] },\n      ],\n      captionSize: 1.5,\n    },\n  },\n];\n\nexport const evolvesToRelRules: StyleRule[] = [\n  {\n    match: { reltype: 'EVOLVES_TO' },\n    apply: {\n      color: '#16a085',\n      width: 2,\n      captions: [{ value: '→', styles: ['bold'] }],\n    },\n  },\n  {\n    match: { reltype: 'EVOLVES_TO' },\n    where: { equal: [{ property: 'method' }, 'Level'] },\n    priority: 1,\n    apply: {\n      captions: [\n        { value: '→ Lv', styles: [] },\n        { value: { property: 'level' }, styles: ['bold'] },\n      ],\n    },\n  },\n  {\n    match: { reltype: 'EVOLVES_TO' },\n    where: { not: { equal: [{ property: 'method' }, 'Level'] } },\n    priority: 1,\n    apply: {\n      color: '#8e44ad',\n      captions: [\n        { value: '→ ', styles: [] },\n        { value: { property: 'method' }, styles: ['italic'] },\n      ],\n    },\n  },\n];\n\nexport const advancedStyleRules: StyleRule[] = [\n  ...defaultNodeRules,\n  ...trainerRules,\n  ...pokemonRules,\n  ...typeRules,\n  ...gymRules,\n  ...battledRelRules,\n  ...caughtRelRules,\n  ...evolvesToRelRules,\n];\n\nconst Component = () => {\n  return (\n    <div style={{ height: '600px' }}>\n      <GraphVisualization\n        nodes={advancedStoryGraph.nodes}\n        rels={advancedStoryGraph.rels}\n        className={containerClasses}\n        nvlStyleRules={advancedStyleRules}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/stories/graph-visualization-rule-based-styling.story.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { GraphVisualization } from '../graph-visualization';
+import { containerClasses, StoryGraph } from './story-data';
+export const styleRules = [
+    {
+        // Nodes are teal by default
+        match: { label: null },
+        apply: { color: 'teal' },
+    },
+    {
+        // Type named dragon becomes purple
+        match: { label: 'Type' },
+        where: { equal: [{ property: 'name' }, 'Dragon'] },
+        apply: { color: '#9b59b6' },
+    },
+    // Awesome and heavy Pokemon become larger
+    {
+        match: { label: 'Pokemon' },
+        where: {
+            and: [
+                { equal: [{ property: 'isAwesome' }, true] },
+                { greaterThan: [{ property: 'weight' }, 300] },
+            ],
+        },
+        apply: {
+            size: 50,
+        },
+    },
+    // Pokemon are red by default
+    {
+        match: { label: 'Pokemon' },
+        apply: {
+            color: '#ff6b6b',
+            captions: [
+                { value: 'Pokemon', styles: ['bold'] },
+                { value: { property: 'name' } },
+            ],
+        },
+    },
+    {
+        // Pokemon that are also have the label Legendary become gold instead
+        match: { label: 'Pokemon' },
+        where: { label: 'Legendary' },
+        apply: {
+            color: 'gold',
+            captions: [
+                { value: { property: 'name' }, styles: ['bold', 'underline'] },
+            ],
+        },
+    },
+];
+const Component = () => {
+    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: StoryGraph.nodes, rels: StoryGraph.rels, className: containerClasses, nvlStyleRules: styleRules }) }));
+};
+export default Component;
+//# sourceMappingURL=graph-visualization-rule-based-styling.story.js.map

package/lib/esm/stories/graph-visualization-rule-based-styling.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-visualization-rule-based-styling.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-rule-based-styling.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAgB;IACrC;QACE,4BAA4B;QAC5B,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;QACtB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;KACzB;IACD;QACE,mCAAmC;QACnC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,EAAE;QAClD,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;KAC5B;IACD,0CAA0C;IAC1C;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;QAC3B,KAAK,EAAE;YACL,GAAG,EAAE;gBACH,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,IAAI,CAAC,EAAE;gBAC5C,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,GAAG,CAAC,EAAE;aAC/C;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,EAAE;SACT;KACF;IACD,6BAA6B;IAC7B;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;QAC3B,KAAK,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE;gBACR,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE;gBACtC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;aAChC;SACF;KACF;IACD;QACE,qEAAqE;QACrE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;QAC3B,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE;QAC7B,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE;gBACR,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE;aAC/D;SACF;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAC7B,KAAC,kBAAkB,IACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,IAAI,EAAE,UAAU,CAAC,IAAI,EACrB,SAAS,EAAE,gBAAgB,EAC3B,aAAa,EAAE,UAAU,GACzB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { GraphVisualization } from '../graph-visualization';\nimport { type StyleRule } from '../styling/style-types';\nimport { containerClasses, StoryGraph } from './story-data';\n\nexport const styleRules: StyleRule[] = [\n  {\n    // Nodes are teal by default\n    match: { label: null },\n    apply: { color: 'teal' },\n  },\n  {\n    // Type named dragon becomes purple\n    match: { label: 'Type' },\n    where: { equal: [{ property: 'name' }, 'Dragon'] },\n    apply: { color: '#9b59b6' },\n  },\n  // Awesome and heavy Pokemon become larger\n  {\n    match: { label: 'Pokemon' },\n    where: {\n      and: [\n        { equal: [{ property: 'isAwesome' }, true] },\n        { greaterThan: [{ property: 'weight' }, 300] },\n      ],\n    },\n    apply: {\n      size: 50,\n    },\n  },\n  // Pokemon are red by default\n  {\n    match: { label: 'Pokemon' },\n    apply: {\n      color: '#ff6b6b',\n      captions: [\n        { value: 'Pokemon', styles: ['bold'] },\n        { value: { property: 'name' } },\n      ],\n    },\n  },\n  {\n    // Pokemon that are also have the label Legendary become gold instead\n    match: { label: 'Pokemon' },\n    where: { label: 'Legendary' },\n    apply: {\n      color: 'gold',\n      captions: [\n        { value: { property: 'name' }, styles: ['bold', 'underline'] },\n      ],\n    },\n  },\n];\n\nconst Component = () => {\n  return (\n    <div style={{ height: '600px' }}>\n      <GraphVisualization\n        nodes={StoryGraph.nodes}\n        rels={StoryGraph.rels}\n        className={containerClasses}\n        nvlStyleRules={styleRules}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/stories/graph-visualization-simple-styling.story.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { GraphVisualization } from '../graph-visualization';
+import { containerClasses, StoryGraph } from './story-data';
+export const simpleStyleRules = [
+    {
+        match: { label: 'Pokemon' },
+        apply: {
+            color: 'red', // Red for Pokemon
+            captions: [
+                { value: 'Pokemon', styles: ['bold'] },
+                { value: { property: 'name' } },
+            ],
+        },
+    },
+    {
+        match: { label: 'Type' },
+        apply: {
+            color: '#4ecdc4', // Teal for Types
+        },
+    },
+    {
+        match: { reltype: 'HAS_TYPE' },
+        apply: {
+            color: '#95a5a6', // Gray for relationships
+            captions: [{ value: 'has type' }],
+            width: 2,
+        },
+    },
+];
+const Component = () => {
+    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: StoryGraph.nodes, rels: StoryGraph.rels, className: containerClasses, nvlStyleRules: simpleStyleRules }) }));
+};
+export default Component;
+//# sourceMappingURL=graph-visualization-simple-styling.story.js.map

package/lib/esm/stories/graph-visualization-simple-styling.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-visualization-simple-styling.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-simple-styling.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAgB;IAC3C;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;QAC3B,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,EAAE,kBAAkB;YAChC,QAAQ,EAAE;gBACR,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE;gBACtC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;aAChC;SACF;KACF;IACD;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,KAAK,EAAE;YACL,KAAK,EAAE,SAAS,EAAE,iBAAiB;SACpC;KACF;IACD;QACE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QAC9B,KAAK,EAAE;YACL,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;YACjC,KAAK,EAAE,CAAC;SACT;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAC7B,KAAC,kBAAkB,IACjB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,IAAI,EAAE,UAAU,CAAC,IAAI,EACrB,SAAS,EAAE,gBAAgB,EAC3B,aAAa,EAAE,gBAAgB,GAC/B,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { GraphVisualization } from '../graph-visualization';\nimport { type StyleRule } from '../styling/style-types';\nimport { containerClasses, StoryGraph } from './story-data';\n\nexport const simpleStyleRules: StyleRule[] = [\n  {\n    match: { label: 'Pokemon' },\n    apply: {\n      color: 'red', // Red for Pokemon\n      captions: [\n        { value: 'Pokemon', styles: ['bold'] },\n        { value: { property: 'name' } },\n      ],\n    },\n  },\n  {\n    match: { label: 'Type' },\n    apply: {\n      color: '#4ecdc4', // Teal for Types\n    },\n  },\n  {\n    match: { reltype: 'HAS_TYPE' },\n    apply: {\n      color: '#95a5a6', // Gray for relationships\n      captions: [{ value: 'has type' }],\n      width: 2,\n    },\n  },\n];\n\nconst Component = () => {\n  return (\n    <div style={{ height: '600px' }}>\n      <GraphVisualization\n        nodes={StoryGraph.nodes}\n        rels={StoryGraph.rels}\n        className={containerClasses}\n        nvlStyleRules={simpleStyleRules}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/stories/index.js

@@ -22,21 +22,31 @@ export { default as GraphVisualizationBarebones } from './graph-visualization-ba
 export { default as GraphVisualizationCustom } from './graph-visualization-custom.story';
 export { default as GraphVisualizationDefault } from './graph-visualization-default.story';
 export { default as GraphVisualizationHighlighting } from './graph-visualization-highlighting.story';
-export { default as GraphVisualizationSearch } from './graph-visualization-search.story';
 export { default as GraphVisualizationMaximalist } from './graph-visualization-maximalist.story';
+export { default as GraphVisualizationRuleBasedStylingAdvanced } from './graph-visualization-rule-based-styling-advanced.story';
+export { default as GraphVisualizationRuleBasedStyling } from './graph-visualization-rule-based-styling.story';
+export { default as GraphVisualizationSearch } from './graph-visualization-search.story';
+export { default as GraphVisualizationSimpleStyling } from './graph-visualization-simple-styling.story';
 export { default as PreviewGraphVisualization } from './preview-graph-visualization.story';
+import { removeLicenseHeader } from '../utils';
 import GraphVisualizationBarebonesSrcRaw from './graph-visualization-barebones.story?raw';
 import GraphVisualizationCustomSrcRaw from './graph-visualization-custom.story?raw';
 import GraphVisualizationDefaultSrcRaw from './graph-visualization-default.story?raw';
 import GraphVisualizationHighlightingSrcRaw from './graph-visualization-highlighting.story?raw';
 import GraphVisualizationMaximalistSrcRaw from './graph-visualization-maximalist.story?raw';
+import GraphVisualizationRuleBasedStylingSrcRaw from './graph-visualization-rule-based-styling.story?raw';
+import GraphVisualizationRuleBasedStylingAdvancedSrcRaw from './graph-visualization-rule-based-styling-advanced.story?raw';
 import GraphVisualizationSearchSrcRaw from './graph-visualization-search.story?raw';
+import GraphVisualizationSimpleStylingSrcRaw from './graph-visualization-simple-styling.story?raw';
 import PreviewGraphVisualizationSrcRaw from './preview-graph-visualization.story?raw';
-export const GraphVisualizationDefaultSrc = GraphVisualizationDefaultSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const GraphVisualizationBarebonesSrc = GraphVisualizationBarebonesSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const GraphVisualizationMaximalistSrc = GraphVisualizationMaximalistSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const GraphVisualizationCustomSrc = GraphVisualizationCustomSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const GraphVisualizationHighlightingSrc = GraphVisualizationHighlightingSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const GraphVisualizationSearchSrc = GraphVisualizationSearchSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
-export const PreviewGraphVisualizationSrc = PreviewGraphVisualizationSrcRaw.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
+export const GraphVisualizationDefaultSrc = removeLicenseHeader(GraphVisualizationDefaultSrcRaw);
+export const GraphVisualizationBarebonesSrc = removeLicenseHeader(GraphVisualizationBarebonesSrcRaw);
+export const GraphVisualizationMaximalistSrc = removeLicenseHeader(GraphVisualizationMaximalistSrcRaw);
+export const GraphVisualizationCustomSrc = removeLicenseHeader(GraphVisualizationCustomSrcRaw);
+export const GraphVisualizationHighlightingSrc = removeLicenseHeader(GraphVisualizationHighlightingSrcRaw);
+export const GraphVisualizationSimpleStylingSrc = removeLicenseHeader(GraphVisualizationSimpleStylingSrcRaw);
+export const GraphVisualizationRuleBasedStylingSrc = removeLicenseHeader(GraphVisualizationRuleBasedStylingSrcRaw);
+export const GraphVisualizationSearchSrc = removeLicenseHeader(GraphVisualizationSearchSrcRaw);
+export const GraphVisualizationRuleBasedStylingAdvancedSrc = removeLicenseHeader(GraphVisualizationRuleBasedStylingAdvancedSrcRaw);
+export const PreviewGraphVisualizationSrc = removeLicenseHeader(PreviewGraphVisualizationSrcRaw);
 //# sourceMappingURL=index.js.map

package/lib/esm/stories/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AACrG,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAE3F,OAAO,iCAAiC,MAAM,2CAA2C,CAAC;AAC1F,OAAO,8BAA8B,MAAM,wCAAwC,CAAC;AACpF,OAAO,+BAA+B,MAAM,yCAAyC,CAAC;AACtF,OAAO,oCAAoC,MAAM,8CAA8C,CAAC;AAChG,OAAO,kCAAkC,MAAM,4CAA4C,CAAC;AAC5F,OAAO,8BAA8B,MAAM,wCAAwC,CAAC;AACpF,OAAO,+BAA+B,MAAM,yCAAyC,CAAC;AAEtF,MAAM,CAAC,MAAM,4BAA4B,GACvC,+BAA+B,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,8BAA8B,GACzC,iCAAiC,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC;AAExE,MAAM,CAAC,MAAM,+BAA+B,GAC1C,kCAAkC,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC;AAEzE,MAAM,CAAC,MAAM,2BAA2B,GACtC,8BAA8B,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC;AAErE,MAAM,CAAC,MAAM,iCAAiC,GAC5C,oCAAoC,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,2BAA2B,GACtC,8BAA8B,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC;AAErE,MAAM,CAAC,MAAM,4BAA4B,GACvC,+BAA+B,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as GraphVisualizationBarebones } from './graph-visualization-barebones.story';\nexport { default as GraphVisualizationCustom } from './graph-visualization-custom.story';\nexport { default as GraphVisualizationDefault } from './graph-visualization-default.story';\nexport { default as GraphVisualizationHighlighting } from './graph-visualization-highlighting.story';\nexport { default as GraphVisualizationSearch } from './graph-visualization-search.story';\nexport { default as GraphVisualizationMaximalist } from './graph-visualization-maximalist.story';\nexport { default as PreviewGraphVisualization } from './preview-graph-visualization.story';\n\nimport GraphVisualizationBarebonesSrcRaw from './graph-visualization-barebones.story?raw';\nimport GraphVisualizationCustomSrcRaw from './graph-visualization-custom.story?raw';\nimport GraphVisualizationDefaultSrcRaw from './graph-visualization-default.story?raw';\nimport GraphVisualizationHighlightingSrcRaw from './graph-visualization-highlighting.story?raw';\nimport GraphVisualizationMaximalistSrcRaw from './graph-visualization-maximalist.story?raw';\nimport GraphVisualizationSearchSrcRaw from './graph-visualization-search.story?raw';\nimport PreviewGraphVisualizationSrcRaw from './preview-graph-visualization.story?raw';\n\nexport const GraphVisualizationDefaultSrc =\n  GraphVisualizationDefaultSrcRaw.replace(/^\\/\\*[\\s\\S]*?\\*\\/\\s*/, '');\n\nexport const GraphVisualizationBarebonesSrc =\n  GraphVisualizationBarebonesSrcRaw.replace(/^\\/\\*[\\s\\S]*?\\*\\/\\s*/, '');\n\nexport const GraphVisualizationMaximalistSrc =\n  GraphVisualizationMaximalistSrcRaw.replace(/^\\/\\*[\\s\\S]*?\\*\\/\\s*/, '');\n\nexport const GraphVisualizationCustomSrc =\n  GraphVisualizationCustomSrcRaw.replace(/^\\/\\*[\\s\\S]*?\\*\\/\\s*/, '');\n\nexport const GraphVisualizationHighlightingSrc =\n  GraphVisualizationHighlightingSrcRaw.replace(/^\\/\\*[\\s\\S]*?\\*\\/\\s*/, '');\n\nexport const GraphVisualizationSearchSrc =\n  GraphVisualizationSearchSrcRaw.replace(/^\\/\\*[\\s\\S]*?\\*\\/\\s*/, '');\n\nexport const PreviewGraphVisualizationSrc =\n  PreviewGraphVisualizationSrcRaw.replace(/^\\/\\*[\\s\\S]*?\\*\\/\\s*/, '');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/stories/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,0CAA0C,CAAC;AACrG,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,0CAA0C,EAAE,MAAM,yDAAyD,CAAC;AAChI,OAAO,EAAE,OAAO,IAAI,kCAAkC,EAAE,MAAM,gDAAgD,CAAC;AAC/G,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,4CAA4C,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAE3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,iCAAiC,MAAM,2CAA2C,CAAC;AAC1F,OAAO,8BAA8B,MAAM,wCAAwC,CAAC;AACpF,OAAO,+BAA+B,MAAM,yCAAyC,CAAC;AACtF,OAAO,oCAAoC,MAAM,8CAA8C,CAAC;AAChG,OAAO,kCAAkC,MAAM,4CAA4C,CAAC;AAC5F,OAAO,wCAAwC,MAAM,oDAAoD,CAAC;AAC1G,OAAO,gDAAgD,MAAM,6DAA6D,CAAC;AAC3H,OAAO,8BAA8B,MAAM,wCAAwC,CAAC;AACpF,OAAO,qCAAqC,MAAM,gDAAgD,CAAC;AACnG,OAAO,+BAA+B,MAAM,yCAAyC,CAAC;AAEtF,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAG,mBAAmB,CAC/D,iCAAiC,CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAG,mBAAmB,CAChE,kCAAkC,CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,mBAAmB,CAC5D,8BAA8B,CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAG,mBAAmB,CAClE,oCAAoC,CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,kCAAkC,GAAG,mBAAmB,CACnE,qCAAqC,CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,qCAAqC,GAAG,mBAAmB,CACtE,wCAAwC,CACzC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,mBAAmB,CAC5D,8BAA8B,CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,6CAA6C,GACxD,mBAAmB,CAAC,gDAAgD,CAAC,CAAC;AAExE,MAAM,CAAC,MAAM,4BAA4B,GAAG,mBAAmB,CAC7D,+BAA+B,CAChC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as GraphVisualizationBarebones } from './graph-visualization-barebones.story';\nexport { default as GraphVisualizationCustom } from './graph-visualization-custom.story';\nexport { default as GraphVisualizationDefault } from './graph-visualization-default.story';\nexport { default as GraphVisualizationHighlighting } from './graph-visualization-highlighting.story';\nexport { default as GraphVisualizationMaximalist } from './graph-visualization-maximalist.story';\nexport { default as GraphVisualizationRuleBasedStylingAdvanced } from './graph-visualization-rule-based-styling-advanced.story';\nexport { default as GraphVisualizationRuleBasedStyling } from './graph-visualization-rule-based-styling.story';\nexport { default as GraphVisualizationSearch } from './graph-visualization-search.story';\nexport { default as GraphVisualizationSimpleStyling } from './graph-visualization-simple-styling.story';\nexport { default as PreviewGraphVisualization } from './preview-graph-visualization.story';\n\nimport { removeLicenseHeader } from '../utils';\nimport GraphVisualizationBarebonesSrcRaw from './graph-visualization-barebones.story?raw';\nimport GraphVisualizationCustomSrcRaw from './graph-visualization-custom.story?raw';\nimport GraphVisualizationDefaultSrcRaw from './graph-visualization-default.story?raw';\nimport GraphVisualizationHighlightingSrcRaw from './graph-visualization-highlighting.story?raw';\nimport GraphVisualizationMaximalistSrcRaw from './graph-visualization-maximalist.story?raw';\nimport GraphVisualizationRuleBasedStylingSrcRaw from './graph-visualization-rule-based-styling.story?raw';\nimport GraphVisualizationRuleBasedStylingAdvancedSrcRaw from './graph-visualization-rule-based-styling-advanced.story?raw';\nimport GraphVisualizationSearchSrcRaw from './graph-visualization-search.story?raw';\nimport GraphVisualizationSimpleStylingSrcRaw from './graph-visualization-simple-styling.story?raw';\nimport PreviewGraphVisualizationSrcRaw from './preview-graph-visualization.story?raw';\n\nexport const GraphVisualizationDefaultSrc = removeLicenseHeader(\n  GraphVisualizationDefaultSrcRaw,\n);\n\nexport const GraphVisualizationBarebonesSrc = removeLicenseHeader(\n  GraphVisualizationBarebonesSrcRaw,\n);\n\nexport const GraphVisualizationMaximalistSrc = removeLicenseHeader(\n  GraphVisualizationMaximalistSrcRaw,\n);\n\nexport const GraphVisualizationCustomSrc = removeLicenseHeader(\n  GraphVisualizationCustomSrcRaw,\n);\n\nexport const GraphVisualizationHighlightingSrc = removeLicenseHeader(\n  GraphVisualizationHighlightingSrcRaw,\n);\n\nexport const GraphVisualizationSimpleStylingSrc = removeLicenseHeader(\n  GraphVisualizationSimpleStylingSrcRaw,\n);\n\nexport const GraphVisualizationRuleBasedStylingSrc = removeLicenseHeader(\n  GraphVisualizationRuleBasedStylingSrcRaw,\n);\n\nexport const GraphVisualizationSearchSrc = removeLicenseHeader(\n  GraphVisualizationSearchSrcRaw,\n);\n\nexport const GraphVisualizationRuleBasedStylingAdvancedSrc =\n  removeLicenseHeader(GraphVisualizationRuleBasedStylingAdvancedSrcRaw);\n\nexport const PreviewGraphVisualizationSrc = removeLicenseHeader(\n  PreviewGraphVisualizationSrcRaw,\n);\n"]}