Dev | Examples | Graph: SVG Icons, curved links, long labels

f5#319 f5#320 f5#321

packages/dev/src/declarations.d.ts

@@ -2,3 +2,8 @@ declare module '*.module.css' {
   const classes: { [key: string]: string }
   export default classes
 }
+
+declare module '*.svg?raw' {
+  const content: string
+  export default content
+}

packages/dev/src/examples/networks-and-flows/graph/graph-custom-icons/index.module.css

@@ -0,0 +1,7 @@
+.graph {
+  --vis-graph-node-label-font-size: 8pt;
+  --vis-graph-node-label-text-color: #717179;
+
+  --vis-graph-node-sublabel-font-size: 9pt;
+  --vis-graph-node-sublabel-text-color: #000000;
+}

packages/dev/src/examples/networks-and-flows/graph/graph-custom-icons/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { VisSingleContainer, VisGraph } from '@unovis/react'
+import { NodeDatum } from '@src/utils/data'
+
+import personIcon from './person.svg?raw'
+import roleIcon from './role.svg?raw'
+import instanceIcon from './instance.svg?raw'
+import bucketIcon from './bucket.svg?raw'
+
+import s from './index.module.css'
+
+export const title = 'Graph: SVG Node Icons'
+export const subTitle = 'cured links, long labels'
+
+export const component = (): JSX.Element => {
+  const svgDefs = `
+    ${personIcon}
+    ${roleIcon}
+    ${instanceIcon}
+    ${bucketIcon}
+  `
+
+  const nodes = [
+    { id: '[email protected]', icon: '#personIcon', fillColor: '#DFFAFD', label: 'External User', sublabel: '[email protected]' },
+    { id: 'AWSReservedSSO_Something', icon: '#roleIcon', fillColor: '#E3DEFC', label: 'Role', sublabel: 'AWSReservedSSO_Something' },
+    { id: 'i-0a1b2c3d4e5f6g7h8', icon: '#instanceIcon', fillColor: '#D0E1FC', label: 'EC2 Instance', sublabel: 'i-0a1b2c3d4e5f6g7h8' },
+    { id: 'i-1a1b2c3d4e5f6g7h8', icon: '#instanceIcon', fillColor: '#D0E1FC', label: 'EC2 Instance', sublabel: 'i-1a1b2c3d4e5f6g7h8' },
+    { id: 'my-bucket', icon: '#bucketIcon', fillColor: '#D4DBFB', label: 'S3 Bucket', sublabel: 'my-bucket' },
+    { id: 'tests-ansible-ssm-file-transfer', icon: '#bucketIcon', fillColor: '#D4DBFB', label: 'S3 Bucket', sublabel: 'tests-ansible-ssm-file-transfer' },
+  ]
+
+  const links = [
+    { source: 0, target: 1, label: { text: 'assume' } },
+    { source: 1, target: 2, label: { text: '1' } },
+    { source: 1, target: 3, label: { text: 'label' } },
+    { source: 1, target: 4 },
+    { source: 1, target: 5, label: { text: '2' } },
+  ]
+
+  const data = { nodes, links }
+  return (
+    <div className={s.graph}>
+      <VisSingleContainer svgDefs={svgDefs} height={600}>
+        <VisGraph
+          data={data}
+          nodeIcon={(n: NodeDatum) => n.icon}
+          nodeIconSize={18}
+          nodeStroke={'none'}
+          nodeFill={(n: NodeDatum) => n.fillColor}
+          nodeLabel={(n: NodeDatum) => n.label}
+          nodeSubLabel={(n: NodeDatum) => n.sublabel}
+          layoutType='dagre'
+          dagreLayoutSettings={{
+            rankdir: 'LR',
+            ranksep: 120,
+            nodesep: 20,
+          }}
+          linkBandWidth={6}
+          linkFlow={true}
+          linkCurvature={1}
+          linkArrow={'single'}
+          linkLabel={(l: typeof links[0]) => l.label}
+        />
+      </VisSingleContainer>
+    </div>
+  )
+}
+

packages/dev/webpack.config.js

@@ -48,6 +48,10 @@ module.exports = {
           },
         ],
       },
+      {
+        resourceQuery: /raw/,
+        type: 'asset/source',
+      },
     ],
   },
   resolve: {

packages/ts/src/components/graph/modules/node/index.ts

@@ -216,6 +216,7 @@ export function updateNodes<N extends GraphInputNode, L extends GraphInputLink>
     // Update Node Icon
     const nodeIconContent = getString(d, nodeIcon, d._index)
     const nodeIconSizeValue = getNumber(d, nodeIconSize, d._index) ?? 2.5 * Math.sqrt(nodeSizeValue)
+    const nodeIconColor = getNodeIconColor(d, nodeFill, d._index, selection.node())
     icon.selectAll('*').remove() // Removing all children first
     if (isInternalHref(nodeIconContent)) { // If the icon is a href, we need to append a <use> element and render the icon with it
       icon.append('use')
@@ -224,12 +225,13 @@ export function updateNodes<N extends GraphInputNode, L extends GraphInputLink>
         .attr('y', -nodeIconSizeValue / 2)
         .attr('width', nodeIconSizeValue)
         .attr('height', nodeIconSizeValue)
+        .style('fill', nodeIconColor)
     } else { // If the icon is a text, we need to append a <text> element and render the icon as text
       icon
         .append('text')
         .style('font-size', `${nodeIconSizeValue}px`)
         .attr('dy', '0.1em')
-        .style('fill', getNodeIconColor(d, nodeFill, d._index, selection.node()))
+        .style('fill', nodeIconColor)
         .html(nodeIconContent)
     }