#290: Edge Sub Label

docs/DataShapes.mdx

@@ -10,6 +10,7 @@ The graph is made up of 2 basic data shape objects you can pass to the graph.
 - `GraphEdge` - The link between Nodes
 
 ## GraphElementBaseAttributes
+
 ```ts
 export interface GraphElementBaseAttributes<T = any> {
   /**
@@ -27,6 +28,11 @@ export interface GraphElementBaseAttributes<T = any> {
    */
   label?: string;
 
+  /**
+   * SubLabel for the element.
+   */
+  subLabel?: string;
+
   /**
    * Size of the element.
    */
@@ -40,6 +46,7 @@ export interface GraphElementBaseAttributes<T = any> {
 ```
 
 ## GraphNode
+
 ```ts
 export interface GraphNode extends GraphElementBaseAttributes {
   /**
@@ -55,6 +62,7 @@ export interface GraphNode extends GraphElementBaseAttributes {
 ```
 
 ## GraphEdge
+
 ```ts
 export interface GraphEdge extends GraphElementBaseAttributes {
   /**
@@ -66,5 +74,12 @@ export interface GraphEdge extends GraphElementBaseAttributes {
    * Target ID of the node.
    */
   target: string;
+
+  /**
+   * Placement of the subLabel relative to the main label.
+   * - 'below': Show subLabel below the main label (default)
+   * - 'above': Show subLabel above the main label
+   */
+  subLabelPlacement?: 'below' | 'above';
 }
 ```

docs/demos/Labels.story.tsx

@@ -2,33 +2,33 @@ import React from 'react';
 import { GraphCanvas } from '../../src';
 import { simpleEdges, simpleNodes } from '../assets/demo';
 
-export default {
-  title: 'Demos/Labels',
-  component: GraphCanvas
-};
+export default { title: 'Demos/Labels', component: GraphCanvas };
 
 export const All = () => (
   <GraphCanvas labelType="all" nodes={simpleNodes} edges={simpleEdges} />
 );
 
 export const LongLabels = () => (
-  <GraphCanvas labelType="all" nodes={[
-    {
-      id: '1',
-      label: 'Department of Defense Logistics and Operations',
-    },
-    {
-      id: '2',
-      label: 'The Security Operations of the Cyber Defense System for the United States of America',
-    }
-  ]} edges={[
-  {
-    id: '1-2',
-    source: '1',
-    target: '2',
-    label: 'The Security Operations of the Cyber Defense System for the United States of America'
-  }
-  ]} />
+  <GraphCanvas
+    labelType="all"
+    nodes={[
+      { id: '1', label: 'Department of Defense Logistics and Operations' },
+      {
+        id: '2',
+        label:
+          'The Security Operations of the Cyber Defense System for the United States of America'
+      }
+    ]}
+    edges={[
+      {
+        id: '1-2',
+        source: '1',
+        target: '2',
+        label:
+          'The Security Operations of the Cyber Defense System for the United States of America'
+      }
+    ]}
+  />
 );
 
 export const NodesOnly = () => (
@@ -45,29 +45,50 @@ export const Automatic = () => (
 
 export const SubLabels = () => (
   <GraphCanvas
-    nodes={[{
-      id: '1',
-      label: 'Node 1',
-      subLabel: 'SubLabel 1'
-    },
-    {
-      id: '2',
-      label: 'Node 2'
-    },
-    {
-      id: '3',
-      label: 'Node 3',
-      subLabel: 'SubLabel 3'
-    }]}
-    edges={[{
-      source: '1',
-      target: '2',
-      id: '1-2',
-    },
-    {
-      source: '3',
-      target: '1',
-      id: '3-1',
-    }]}
+    nodes={[
+      { id: '1', label: 'Node 1', subLabel: 'SubLabel 1' },
+      { id: '2', label: 'Node 2' },
+      { id: '3', label: 'Node 3', subLabel: 'SubLabel 3' }
+    ]}
+    edges={[
+      { source: '1', target: '2', id: '1-2' },
+      { source: '3', target: '1', id: '3-1' }
+    ]}
+  />
+);
+
+export const EdgeSubLabels = () => (
+  <GraphCanvas
+    labelType="edges"
+    nodes={[
+      { id: '1', label: 'Node 1' },
+      { id: '2', label: 'Node 2' },
+      { id: '3', label: 'Node 3' },
+      { id: '4', label: 'Node 4' }
+    ]}
+    edges={[
+      {
+        source: '1',
+        target: '2',
+        id: '1-2',
+        label: 'Edge 1-2',
+        subLabel: 'Sub Label 1-2'
+      },
+      {
+        source: '1',
+        target: '3',
+        id: '1-3',
+        label: 'Edge 1-3',
+        subLabel: 'Sub Label 1-3',
+        subLabelPlacement: 'above'
+      },
+      {
+        source: '4',
+        target: '2',
+        id: '4-2',
+        label: 'Edge 4-2',
+        subLabel: 'Sub Label 4-2'
+      }
+    ]}
   />
 );