npm - @neo4j-ndl/react-graph - Versions diffs - 1.5.6 → 2.0.0 - Mend

@neo4j-ndl/react-graph 1.5.6 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

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

@@ -24,7 +24,7 @@ import { advancedStoryGraph, containerClasses } from './story-data';
 export const defaultNodeRules = [
     {
         match: { label: null },
-        apply: { size: 10 },
+        apply: { size: { value: 10 } },
     },
 ];
 export const trainerRules = [
@@ -33,14 +33,16 @@ export const trainerRules = [
         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',
+            color: { value: '#9b59b6' },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' 🏆', styles: [] },
+                    { value: ' Gym Leader', styles: ['italic'] },
+                ],
+                align: 'bottom',
+            },
+            size: { value: 45 },
         },
     },
     {
@@ -48,14 +50,16 @@ export const trainerRules = [
         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,
+            size: { value: 30 },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' (Lv ', styles: [] },
+                    { value: { property: 'level' }, styles: [] },
+                    { value: ')', styles: [] },
+                ],
+                size: 2,
+            },
         },
     },
 ];
@@ -66,23 +70,27 @@ export const pokemonRules = [
         where: { endsWith: [{ property: 'name' }, 'saur'] },
         priority: 50,
         apply: {
-            color: '#2ecc71',
-            captions: [
-                { value: '🌿 ', styles: [] },
-                { value: { property: 'name' }, styles: ['bold', 'italic'] },
-            ],
+            color: { value: '#2ecc71' },
+            captions: {
+                text: [
+                    { 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,
+            color: { value: '#f39c12' },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' ⭐', styles: [] },
+                ],
+            },
+            size: { value: 40 },
         },
     },
     {
@@ -90,14 +98,16 @@ export const pokemonRules = [
         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,
+            color: { value: '#c0392b' },
+            captions: {
+                text: [
+                    { value: '💪 ', styles: [] },
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' Lv', styles: [] },
+                    { value: { property: 'level' }, styles: [] },
+                ],
+            },
+            size: { value: 42 },
         },
     },
     {
@@ -105,10 +115,12 @@ export const pokemonRules = [
         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'] },
-            ],
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' (Rare)', styles: ['italic'] },
+                ],
+            },
         },
     },
     {
@@ -121,12 +133,14 @@ export const pokemonRules = [
         },
         priority: 15, // Baby Pokemon get special styling
         apply: {
-            size: 25,
-            color: '#95a5a6',
-            captions: [
-                { value: { property: 'name' }, styles: ['italic'] },
-                { value: ' (Smol)', styles: [] },
-            ],
+            size: { value: 25 },
+            color: { value: '#95a5a6' },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['italic'] },
+                    { value: ' (Smol)', styles: [] },
+                ],
+            },
         },
     },
 ];
@@ -140,7 +154,7 @@ export const typeRules = [
             ],
         },
         apply: {
-            color: '#27ae60',
+            color: { value: '#27ae60' },
         },
     },
 ];
@@ -148,13 +162,15 @@ export const gymRules = [
     {
         match: { label: 'Gym' },
         apply: {
-            color: '#8e44ad',
-            size: 48,
-            captionAlign: 'top',
-            captions: [
-                { value: '🏛️ ', styles: [] },
-                { value: { property: 'name' }, styles: ['bold', 'underline'] },
-            ],
+            color: { value: '#8e44ad' },
+            size: { value: 48 },
+            captions: {
+                text: [
+                    { value: '🏛️ ', styles: [] },
+                    { value: { property: 'name' }, styles: ['bold', 'underline'] },
+                ],
+                align: 'top',
+            },
         },
     },
 ];
@@ -163,20 +179,21 @@ export const battledRelRules = [
         match: { reltype: 'BATTLED' },
         where: { equal: [{ property: 'won' }, true] },
         apply: {
-            color: '#27ae60',
-            width: 4,
-            captions: [{ value: 'WON BATTLE', styles: ['bold'] }],
-            captionSize: 2,
+            color: { value: '#27ae60' },
+            width: { value: 4 },
+            captions: { text: [{ value: 'WON BATTLE', styles: ['bold'] }], size: 2 },
         },
     },
     {
         match: { reltype: 'BATTLED' },
         where: { equal: [{ property: 'won' }, false] },
         apply: {
-            color: '#e74c3c',
-            width: 2,
-            captions: [{ value: 'LOST BATTLE', styles: ['italic'] }],
-            captionSize: 2,
+            color: { value: '#e74c3c' },
+            width: { value: 2 },
+            captions: {
+                text: [{ value: 'LOST BATTLE', styles: ['italic'] }],
+                size: 2,
+            },
         },
     },
 ];
@@ -184,13 +201,15 @@ export const caughtRelRules = [
     {
         match: { reltype: 'CAUGHT' },
         apply: {
-            color: '#e91e63',
-            width: 3,
-            captions: [
-                { value: 'Caught @ Lv', styles: [] },
-                { value: { property: 'level' }, styles: ['bold'] },
-            ],
-            captionSize: 1.5,
+            color: { value: '#e91e63' },
+            width: { value: 3 },
+            captions: {
+                text: [
+                    { value: 'Caught @ Lv', styles: [] },
+                    { value: { property: 'level' }, styles: ['bold'] },
+                ],
+                size: 1.5,
+            },
         },
     },
 ];
@@ -198,9 +217,9 @@ export const evolvesToRelRules = [
     {
         match: { reltype: 'EVOLVES_TO' },
         apply: {
-            color: '#16a085',
-            width: 2,
-            captions: [{ value: '→', styles: ['bold'] }],
+            color: { value: '#16a085' },
+            width: { value: 2 },
+            captions: { text: [{ value: '→', styles: ['bold'] }] },
         },
     },
     {
@@ -208,10 +227,12 @@ export const evolvesToRelRules = [
         where: { equal: [{ property: 'method' }, 'Level'] },
         priority: 1,
         apply: {
-            captions: [
-                { value: '→ Lv', styles: [] },
-                { value: { property: 'level' }, styles: ['bold'] },
-            ],
+            captions: {
+                text: [
+                    { value: '→ Lv', styles: [] },
+                    { value: { property: 'level' }, styles: ['bold'] },
+                ],
+            },
         },
     },
     {
@@ -219,11 +240,13 @@ export const evolvesToRelRules = [
         where: { not: { equal: [{ property: 'method' }, 'Level'] } },
         priority: 1,
         apply: {
-            color: '#8e44ad',
-            captions: [
-                { value: '→ ', styles: [] },
-                { value: { property: 'method' }, styles: ['italic'] },
-            ],
+            color: { value: '#8e44ad' },
+            captions: {
+                text: [
+                    { value: '→ ', styles: [] },
+                    { value: { property: 'method' }, styles: ['italic'] },
+                ],
+            },
         },
     },
 ];
@@ -238,7 +261,7 @@ export const advancedStyleRules = [
     ...evolvesToRelRules,
 ];
 const Component = () => {
-    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: advancedStoryGraph.nodes, rels: advancedStoryGraph.rels, className: containerClasses, nvlStyleRules: advancedStyleRules }) }));
+    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: advancedStoryGraph.nodes, rels: advancedStoryGraph.rels, className: containerClasses, styleRules: 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 CHANGED Viewed

	@@ -1 +1 @@
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"]}
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 GraphStyleRule } from '../styling/style-types';\nimport { advancedStoryGraph, containerClasses } from './story-data';\n\nexport const defaultNodeRules: GraphStyleRule[] = [\n {\n match: { label: null },\n apply: { size: { value: 10 } },\n },\n];\n\nexport const trainerRules: GraphStyleRule[] = [\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: { value: '#9b59b6' },\n captions: {\n text: [\n { value: { property: 'name' }, styles: ['bold'] },\n { value: ' 🏆', styles: [] },\n { value: ' Gym Leader', styles: ['italic'] },\n ],\n align: 'bottom',\n },\n size: { value: 45 },\n },\n },\n {\n match: { label: 'Trainer' },\n where: { greaterThanOrEqual: [{ property: 'level' }, 85] },\n priority: 10, // Base high-level styling\n apply: {\n size: { value: 30 },\n captions: {\n text: [\n { value: { property: 'name' }, styles: ['bold'] },\n { value: ' (Lv ', styles: [] },\n { value: { property: 'level' }, styles: [] },\n { value: ')', styles: [] },\n ],\n size: 2,\n },\n },\n },\n];\n\nexport const pokemonRules: GraphStyleRule[] = [\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: { value: '#2ecc71' },\n captions: {\n text: [\n { value: '🌿 ', styles: [] },\n { value: { property: 'name' }, styles: ['bold', 'italic'] },\n ],\n },\n },\n },\n {\n match: { label: 'Pokemon' },\n where: { equal: [{ property: 'is_starter' }, true] },\n apply: {\n color: { value: '#f39c12' },\n captions: {\n text: [\n { value: { property: 'name' }, styles: ['bold'] },\n { value: ' ⭐', styles: [] },\n ],\n },\n size: { value: 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: { value: '#c0392b' },\n captions: {\n text: [\n { value: '💪 ', styles: [] },\n { value: { property: 'name' }, styles: ['bold'] },\n { value: ' Lv', styles: [] },\n { value: { property: 'level' }, styles: [] },\n ],\n },\n size: { value: 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 text: [\n { value: { property: 'name' }, styles: ['bold'] },\n { value: ' (Rare)', styles: ['italic'] },\n ],\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: { value: 25 },\n color: { value: '#95a5a6' },\n captions: {\n text: [\n { value: { property: 'name' }, styles: ['italic'] },\n { value: ' (Smol)', styles: [] },\n ],\n },\n },\n },\n];\n\nexport const typeRules: GraphStyleRule[] = [\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: { value: '#27ae60' },\n },\n },\n];\n\nexport const gymRules: GraphStyleRule[] = [\n {\n match: { label: 'Gym' },\n apply: {\n color: { value: '#8e44ad' },\n size: { value: 48 },\n captions: {\n text: [\n { value: '🏛️ ', styles: [] },\n { value: { property: 'name' }, styles: ['bold', 'underline'] },\n ],\n align: 'top',\n },\n },\n },\n];\n\nexport const battledRelRules: GraphStyleRule[] = [\n {\n match: { reltype: 'BATTLED' },\n where: { equal: [{ property: 'won' }, true] },\n apply: {\n color: { value: '#27ae60' },\n width: { value: 4 },\n captions: { text: [{ value: 'WON BATTLE', styles: ['bold'] }], size: 2 },\n },\n },\n {\n match: { reltype: 'BATTLED' },\n where: { equal: [{ property: 'won' }, false] },\n apply: {\n color: { value: '#e74c3c' },\n width: { value: 2 },\n captions: {\n text: [{ value: 'LOST BATTLE', styles: ['italic'] }],\n size: 2,\n },\n },\n },\n];\n\nexport const caughtRelRules: GraphStyleRule[] = [\n {\n match: { reltype: 'CAUGHT' },\n apply: {\n color: { value: '#e91e63' },\n width: { value: 3 },\n captions: {\n text: [\n { value: 'Caught @ Lv', styles: [] },\n { value: { property: 'level' }, styles: ['bold'] },\n ],\n size: 1.5,\n },\n },\n },\n];\n\nexport const evolvesToRelRules: GraphStyleRule[] = [\n {\n match: { reltype: 'EVOLVES_TO' },\n apply: {\n color: { value: '#16a085' },\n width: { value: 2 },\n captions: { text: [{ 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 text: [\n { value: '→ Lv', styles: [] },\n { value: { property: 'level' }, styles: ['bold'] },\n ],\n },\n },\n },\n {\n match: { reltype: 'EVOLVES_TO' },\n where: { not: { equal: [{ property: 'method' }, 'Level'] } },\n priority: 1,\n apply: {\n color: { value: '#8e44ad' },\n captions: {\n text: [\n { value: '→ ', styles: [] },\n { value: { property: 'method' }, styles: ['italic'] },\n ],\n },\n },\n },\n];\n\nexport const advancedStyleRules: GraphStyleRule[] = [\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 styleRules={advancedStyleRules}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

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

@@ -25,13 +25,13 @@ export const styleRules = [
     {
         // Nodes are teal by default
         match: { label: null },
-        apply: { color: 'teal' },
+        apply: { color: { value: 'teal' } },
     },
     {
         // Type named dragon becomes purple
         match: { label: 'Type' },
         where: { equal: [{ property: 'name' }, 'Dragon'] },
-        apply: { color: '#9b59b6' },
+        apply: { color: { value: '#9b59b6' } },
     },
     // Awesome and heavy Pokemon become larger
     {
@@ -43,18 +43,20 @@ export const styleRules = [
             ],
         },
         apply: {
-            size: 50,
+            size: { value: 50 },
         },
     },
     // Pokemon are red by default
     {
         match: { label: 'Pokemon' },
         apply: {
-            color: '#ff6b6b',
-            captions: [
-                { value: 'Pokemon', styles: ['bold'] },
-                { value: { property: 'name' } },
-            ],
+            color: { value: '#ff6b6b' },
+            captions: {
+                text: [
+                    { value: 'Pokemon', styles: ['bold'] },
+                    { value: { property: 'name' } },
+                ],
+            },
         },
     },
     {
@@ -62,15 +64,15 @@ export const styleRules = [
         match: { label: 'Pokemon' },
         where: { label: 'Legendary' },
         apply: {
-            color: 'gold',
-            captions: [
-                { value: { property: 'name' }, styles: ['bold', 'underline'] },
-            ],
+            color: { value: 'gold' },
+            captions: {
+                text: [{ 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 }) }));
+    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: StoryGraph.nodes, rels: StoryGraph.rels, className: containerClasses, styleRules: 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 CHANGED Viewed

	@@ -1 +1 @@
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"]}
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,GAAqB;IAC1C;QACE,4BAA4B;QAC5B,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;QACtB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;KACpC;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,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;KACvC;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,KAAK,EAAE,EAAE,EAAE;SACpB;KACF;IACD,6BAA6B;IAC7B;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;QAC3B,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC3B,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE;oBACtC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;iBAChC;aACF;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,EAAE,KAAK,EAAE,MAAM,EAAE;YACxB,QAAQ,EAAE;gBACR,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC;aACvE;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,UAAU,EAAE,UAAU,GACtB,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 GraphStyleRule } from '../styling/style-types';\nimport { containerClasses, StoryGraph } from './story-data';\n\nexport const styleRules: GraphStyleRule[] = [\n {\n // Nodes are teal by default\n match: { label: null },\n apply: { color: { value: 'teal' } },\n },\n {\n // Type named dragon becomes purple\n match: { label: 'Type' },\n where: { equal: [{ property: 'name' }, 'Dragon'] },\n apply: { color: { value: '#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: { value: 50 },\n },\n },\n // Pokemon are red by default\n {\n match: { label: 'Pokemon' },\n apply: {\n color: { value: '#ff6b6b' },\n captions: {\n text: [\n { value: 'Pokemon', styles: ['bold'] },\n { value: { property: 'name' } },\n ],\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: { value: 'gold' },\n captions: {\n text: [{ 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 styleRules={styleRules}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

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

@@ -25,30 +25,32 @@ export const simpleStyleRules = [
     {
         match: { label: 'Pokemon' },
         apply: {
-            color: 'red', // Red for Pokemon
-            captions: [
-                { value: 'Pokemon', styles: ['bold'] },
-                { value: { property: 'name' } },
-            ],
+            color: { value: 'red' }, // Red for Pokemon
+            captions: {
+                text: [
+                    { value: 'Pokemon', styles: ['bold'] },
+                    { value: { property: 'name' } },
+                ],
+            },
         },
     },
     {
         match: { label: 'Type' },
         apply: {
-            color: '#4ecdc4', // Teal for Types
+            color: { value: '#4ecdc4' }, // Teal for Types
         },
     },
     {
         match: { reltype: 'HAS_TYPE' },
         apply: {
-            color: '#95a5a6', // Gray for relationships
-            captions: [{ value: 'has type' }],
-            width: 2,
+            color: { value: '#95a5a6' }, // Gray for relationships
+            captions: { text: [{ value: 'has type' }] },
+            width: { value: 2 },
         },
     },
 ];
 const Component = () => {
-    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: StoryGraph.nodes, rels: StoryGraph.rels, className: containerClasses, nvlStyleRules: simpleStyleRules }) }));
+    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: StoryGraph.nodes, rels: StoryGraph.rels, className: containerClasses, styleRules: simpleStyleRules }) }));
 };
 export default Component;
 //# sourceMappingURL=graph-visualization-simple-styling.story.js.map

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

	@@ -1 +1 @@
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"]}
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,GAAqB;IAChD;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;QAC3B,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,kBAAkB;YAC3C,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE;oBACtC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;iBAChC;aACF;SACF;KACF;IACD;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,iBAAiB;SAC/C;KACF;IACD;QACE,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QAC9B,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,yBAAyB;YACtD,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAAE;YAC3C,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;SACpB;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,UAAU,EAAE,gBAAgB,GAC5B,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 GraphStyleRule } from '../styling/style-types';\nimport { containerClasses, StoryGraph } from './story-data';\n\nexport const simpleStyleRules: GraphStyleRule[] = [\n {\n match: { label: 'Pokemon' },\n apply: {\n color: { value: 'red' }, // Red for Pokemon\n captions: {\n text: [\n { value: 'Pokemon', styles: ['bold'] },\n { value: { property: 'name' } },\n ],\n },\n },\n },\n {\n match: { label: 'Type' },\n apply: {\n color: { value: '#4ecdc4' }, // Teal for Types\n },\n },\n {\n match: { reltype: 'HAS_TYPE' },\n apply: {\n color: { value: '#95a5a6' }, // Gray for relationships\n captions: { text: [{ value: 'has type' }] },\n width: { value: 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 styleRules={simpleStyleRules}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/stories/graph-visualization-unique-colors-styling.story.js ADDED Viewed

@@ -0,0 +1,69 @@
+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';
+/**
+ * Uses the Pokémon advancedStoryGraph to demonstrate uniqueColors styling.
+ * All nodes and relationships default to gray; Trainer nodes are then colored
+ * by their `reputation` property (Champion, Gym Leader, Rival, Breeder) and
+ * EVOLVES_TO relationships are colored by their `method` property (Level,
+ * Friendship, Thunder Stone, etc.).
+ */
+const styleRules = [
+    {
+        match: { label: null },
+        apply: { color: { value: '#aaaaaa' } },
+        priority: 0,
+    },
+    {
+        match: { reltype: null },
+        apply: { color: { value: '#aaaaaa' } },
+        priority: 0,
+    },
+    {
+        match: { label: 'Trainer' },
+        apply: {
+            uniqueColors: { onProperty: 'reputation' },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' · ', styles: [] },
+                    { value: { property: 'reputation' }, styles: ['italic'] },
+                ],
+            },
+        },
+        priority: 1,
+    },
+    {
+        match: { reltype: 'EVOLVES_TO' },
+        apply: {
+            uniqueColors: { onProperty: 'method' },
+            captions: { text: [{ value: { property: 'method' } }] },
+        },
+        priority: 1,
+    },
+];
+const Component = () => {
+    return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { nodes: advancedStoryGraph.nodes, rels: advancedStoryGraph.rels, className: containerClasses, styleRules: styleRules }) }));
+};
+export default Component;
+//# sourceMappingURL=graph-visualization-unique-colors-styling.story.js.map

package/lib/esm/stories/graph-visualization-unique-colors-styling.story.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"graph-visualization-unique-colors-styling.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-unique-colors-styling.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,UAAU,GAAqB;IACnC;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;QACtB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;QACtC,QAAQ,EAAE,CAAC;KACZ;IACD;QACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;QACtC,QAAQ,EAAE,CAAC;KACZ;IACD;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;QAC3B,KAAK,EAAE;YACL,YAAY,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE;YAC1C,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE;oBACjD,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;oBAC5B,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE;iBAC1D;aACF;SACF;QACD,QAAQ,EAAE,CAAC;KACZ;IACD;QACE,KAAK,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE;QAChC,KAAK,EAAE;YACL,YAAY,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;YACtC,QAAQ,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,CAAC,EAAE;SACxD;QACD,QAAQ,EAAE,CAAC;KACZ;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,kBAAkB,CAAC,KAAK,EAC/B,IAAI,EAAE,kBAAkB,CAAC,IAAI,EAC7B,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,UAAU,GACtB,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 GraphStyleRule } from '../styling/style-types';\nimport { advancedStoryGraph, containerClasses } from './story-data';\n\n/**\n * Uses the Pokémon advancedStoryGraph to demonstrate uniqueColors styling.\n * All nodes and relationships default to gray; Trainer nodes are then colored\n * by their `reputation` property (Champion, Gym Leader, Rival, Breeder) and\n * EVOLVES_TO relationships are colored by their `method` property (Level,\n * Friendship, Thunder Stone, etc.).\n */\nconst styleRules: GraphStyleRule[] = [\n {\n match: { label: null },\n apply: { color: { value: '#aaaaaa' } },\n priority: 0,\n },\n {\n match: { reltype: null },\n apply: { color: { value: '#aaaaaa' } },\n priority: 0,\n },\n {\n match: { label: 'Trainer' },\n apply: {\n uniqueColors: { onProperty: 'reputation' },\n captions: {\n text: [\n { value: { property: 'name' }, styles: ['bold'] },\n { value: ' · ', styles: [] },\n { value: { property: 'reputation' }, styles: ['italic'] },\n ],\n },\n },\n priority: 1,\n },\n {\n match: { reltype: 'EVOLVES_TO' },\n apply: {\n uniqueColors: { onProperty: 'method' },\n captions: { text: [{ value: { property: 'method' } }] },\n },\n priority: 1,\n },\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 styleRules={styleRules}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/stories/index.js CHANGED Viewed

@@ -28,6 +28,7 @@ export { default as GraphVisualizationRuleBasedStylingAdvanced } from './graph-v
 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 GraphVisualizationUniqueColorsStyling } from './graph-visualization-unique-colors-styling.story';
 export { default as PreviewGraphVisualization } from './preview-graph-visualization.story';
 import { removeLicenseHeader } from '../utils';
 import GraphVisualizationBarebonesSrcRaw from './graph-visualization-barebones.story?raw';
@@ -40,6 +41,7 @@ import GraphVisualizationRuleBasedStylingSrcRaw from './graph-visualization-rule
 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 GraphVisualizationUniqueColorsStylingRaw from './graph-visualization-unique-colors-styling.story?raw';
 import PreviewGraphVisualizationSrcRaw from './preview-graph-visualization.story?raw';
 export const GraphVisualizationDefaultSrc = removeLicenseHeader(GraphVisualizationDefaultSrcRaw);
 export const GraphVisualizationBarebonesSrc = removeLicenseHeader(GraphVisualizationBarebonesSrcRaw);
@@ -51,5 +53,6 @@ export const GraphVisualizationRuleBasedStylingSrc = removeLicenseHeader(GraphVi
 export const GraphVisualizationSearchSrc = removeLicenseHeader(GraphVisualizationSearchSrcRaw);
 export const GraphVisualizationRuleBasedStylingAdvancedSrc = removeLicenseHeader(GraphVisualizationRuleBasedStylingAdvancedSrcRaw);
 export const GraphVisualizationRangeStylingSrc = removeLicenseHeader(GraphVisualizationRangeStylingRaw);
+export const GraphVisualizationUniqueColorsStylingRawSrc = removeLicenseHeader(GraphVisualizationUniqueColorsStylingRaw);
 export const PreviewGraphVisualizationSrc = removeLicenseHeader(PreviewGraphVisualizationSrcRaw);
 //# sourceMappingURL=index.js.map