feat: changes from attributes to metadata in graph model

The JSON graph spec no longer uses attributes so changing to metadata. This will ease the tranistion
for clients between JSON Graph and the GraphModel.

BREAKING CHANGE: Node and Edge no longer have attributes - use metadata instead.

apps/docs/src/Decoration.stories.tsx

@@ -2,6 +2,7 @@ import {
   ContentModel,
   DecoratorModel, Generator, Graph, GraphModel,
   ModelNode,
+  Node,
   NodeDecoration,
   sizeNodeBy
 } from '@committed/components-graph'
@@ -47,8 +48,8 @@ export const TypedDecoration: React.FC = () => {
     new GraphModel(ContentModel.fromRaw(exampleGraphData), {
       decoratorModel: DecoratorModel.createDefault({
         nodeDecorators: [
-          (node: ModelNode): Partial<NodeDecoration> => {
-            const type = node.attributes['type']
+          (node: Node): Partial<NodeDecoration> => {
+            const type = node.metadata['type']
             if (type === 'person') return { color: '$colors$info' }
             if (type === 'place') return { color: '$colors$success' }
             return { color: '#00FF00' }
@@ -85,41 +86,41 @@ export const CustomIcons: React.FC = () => {
         {
           n1: {
             id: 'n1',
-            attributes: {},
+            metadata: {},
             label: faker.name.fullName(),
             icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
           n2: {
             id: 'n2',
-            attributes: {},
+            metadata: {},
             label: faker.name.fullName(),
             icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
           n3: {
             id: 'n3',
-            attributes: {},
+            metadata: {},
             label: faker.name.fullName(),
             size: 100,
           },
           n4: {
             id: 'n4',
-            attributes: {},
+            metadata: {},
             label: faker.name.fullName(),
             icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
           n5: {
             id: 'n5',
-            attributes: {},
+            metadata: {},
             label: faker.name.fullName(),
             icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
           n6: {
             id: 'n6',
-            attributes: {},
+            metadata: {},
             label: faker.name.fullName(),
             icon: 'https://i.pravatar.cc/100',
             size: 100,
@@ -129,51 +130,58 @@ export const CustomIcons: React.FC = () => {
           e1: {
             id: 'e1',
             label: '',
-            attributes: {},
+            metadata: {},
             source: 'n1',
             target: 'n2',
+            directed: true
           },
           e2: {
             id: 'e2',
             label: '',
-            attributes: {},
+            metadata: {},
             source: 'n2',
             target: 'n3',
+            directed: true
           },
           e3: {
             id: 'e3',
             label: '',
-            attributes: {},
+            metadata: {},
             source: 'n6',
             target: 'n4',
+            directed: true
           },
           e4: {
             id: 'e4',
             label: '',
-            attributes: {},
+            metadata: {},
             source: 'n5',
             target: 'n6',
+            directed: true
           },
           e5: {
             id: 'e5',
             label: '',
-            attributes: {},
+            metadata: {},
             source: 'n3',
             target: 'n5',
+            directed: true
           },
           e6: {
             id: 'e6',
             label: '',
-            attributes: {},
+            metadata: {},
             source: 'n3',
             target: 'n4',
+            directed: true
           },
           e7: {
             id: 'e7',
             label: '',
-            attributes: {},
+            metadata: {},
             source: 'n1',
             target: 'n4',
+            directed: true
           },
         }
       )

apps/docs/src/GraphToolbar.stories.tsx

@@ -99,8 +99,8 @@ const typesLayout: CustomGraphLayout = {
     const rowHeight = 75
     const byType = Object.values(
       model.nodes.reduce<Record<string, DecoratedNode[]>>((acc, next) => {
-        acc[(next.attributes.type ?? 'unknown') as string] = (
-          acc[(next.attributes.type ?? 'unknown') as string] ?? []
+        acc[(next.metadata.type ?? 'unknown') as string] = (
+          acc[(next.metadata.type ?? 'unknown') as string] ?? []
         ).concat(next)
         return acc
       }, {})
@@ -223,33 +223,33 @@ export const CustomLayout: Story = () => {
           e1: {
             id: 'e1',
             label: 'Type 1',
-            attributes: {
+            metadata: {
               type: 'type1',
             },
           },
           e2: {
             id: 'e2',
             label: 'Type 2',
-            attributes: {
+            metadata: {
               type: 'type2',
             },
           },
           e3: {
             id: 'e3',
             label: 'Type 3',
-            attributes: {
+            metadata: {
               type: 'type3',
             },
           },
           e4: {
             id: 'e4',
             label: 'Type 1 (2)',
-            attributes: {
+            metadata: {
               type: 'type1',
             },
           },
         },
-        edges: {},
+        edges: [],
       })
     )
   )

apps/docs/src/JSONGraph.stories.tsx

@@ -1,10 +1,10 @@
 import { Alert, AlertContent, AlertTitle, Flex } from '@committed/components'
-import { ContentModel, cytoscapeRenderer, Graph, GraphModel, GraphToolbar, ModelNode, NodeViewer } from '@committed/components-graph'
+import { ContentModel, cytoscapeRenderer, Graph, GraphModel, GraphToolbar, Node, NodeViewer } from '@committed/components-graph'
 import { Json, JsonExample } from '@committed/graph-json'
 import { Meta, Story } from '@storybook/react'
 import React, { useEffect, useState } from 'react'
-import { Template } from './StoryUtil'
 import RJSON from "relaxed-json"
+import { Template } from './StoryUtil'
 
 const { smallGraph, largeGraph } = JsonExample
 
@@ -53,7 +53,7 @@ const StoryTemplate: Story<{
     }
   }, [setModel, setAlert, json])
 
-  const [node, setNode] = useState<ModelNode | undefined>(undefined)
+  const [node, setNode] = useState<Node | undefined>(undefined)
 
   return (
     <>

apps/docs/src/NodeViewer.stories.tsx

@@ -1,12 +1,10 @@
 import { Button } from '@committed/components'
-import { Generator, ModelNode } from '@committed/graph'
+import { cytoscapeRenderer, Graph, NodeViewer } from '@committed/components-graph'
+import { Generator, Node } from '@committed/graph'
 import { useBoolean } from '@committed/hooks'
 import { Meta, Story } from '@storybook/react'
-import React, { useState } from 'react'
-import { cytoscapeRenderer } from '@committed/components-graph'
-import { Graph } from '@committed/components-graph'
-import { NodeViewer } from '@committed/components-graph'
 import faker from 'faker'
+import React, { useState } from 'react'
 
 export default {
   title: 'Components/NodeViewer',
@@ -16,7 +14,7 @@ export default {
 export const Default: Story<React.ComponentProps<typeof NodeViewer>> = () => {
   const [model, setModel] = useState(Generator.randomGraph)
 
-  const [node, setNode] = useState<ModelNode | undefined>(
+  const [node, setNode] = useState<Node | undefined>(
     Object.values(model.getCurrentContent().nodes)[0]
   )
   const graph = (
@@ -42,10 +40,10 @@ export const Default: Story<React.ComponentProps<typeof NodeViewer>> = () => {
 
 export const WithAttributes: Story = () => {
   const [open, { setTrue: setOpen, setFalse: setClosed }] = useBoolean(false)
-  const node: ModelNode = {
+  const node: Node = {
     id: 'test',
     label: 'example node',
-    attributes: {
+    metadata: {
       employer: 'Committed',
     },
   }
@@ -59,10 +57,10 @@ export const WithAttributes: Story = () => {
 
 export const NoAttributes: Story = () => {
   const [open, { setTrue: setOpen, setFalse: setClosed }] = useBoolean(false)
-  const node: ModelNode = {
+  const node: Node = {
     id: 'test',
     label: 'example node',
-    attributes: {},
+    metadata: {},
   }
   return (
     <>
@@ -84,10 +82,10 @@ export const NoNode: Story = () => {
 
 export const ManyAttributes: Story = () => {
   const [open, { setTrue: setOpen, setFalse: setClosed }] = useBoolean(false)
-  const node: ModelNode = {
+  const node: Node = {
     id: 'test',
     label: 'example node',
-    attributes: {
+    metadata: {
       firstName: faker.name.firstName(),
       middleName: faker.name.middleName(),
       lastName: faker.name.lastName(),

apps/docs/src/RdfGraph.stories.tsx

@@ -1,5 +1,5 @@
 import { Alert, AlertContent, AlertTitle, Flex } from '@committed/components'
-import { ContentModel, cytoscapeRenderer, Graph, GraphModel, GraphToolbar, ModelNode, NodeViewer } from '@committed/components-graph'
+import { ContentModel, cytoscapeRenderer, Graph, GraphModel, GraphToolbar, Node, NodeViewer } from '@committed/components-graph'
 import { Rdf, RdfUtil } from '@committed/graph-rdf'
 import { Meta, Story } from '@storybook/react'
 import React, { useEffect, useState } from 'react'
@@ -133,7 +133,7 @@ const StoryTemplate: Story<{
     }
   }, [setModel, setAlert, rdf])
 
-  const [node, setNode] = useState<ModelNode | undefined>(undefined)
+  const [node, setNode] = useState<Node | undefined>(undefined)
 
   return (
     <>

apps/docs/src/exampleData.ts

@@ -1,47 +1,40 @@
 import { ModelEdge, ModelNode } from '@committed/components-graph'
 
 const exampleNodesArr: ModelNode[] = [
-  { id: 'n1', attributes: { type: 'person' } },
-  { id: 'n2', attributes: { type: 'person' } },
-  { id: 'n3', attributes: { type: 'person' } },
-  { id: 'n4', attributes: { type: 'place' } },
-  { id: 'n5', attributes: { type: 'place' } },
-  { id: 'n6', attributes: { type: 'place' } },
+  { id: 'n1', metadata: { type: 'person' } },
+  { id: 'n2', metadata: { type: 'person' } },
+  { id: 'n3', metadata: { type: 'person' } },
+  { id: 'n4', metadata: { type: 'place' } },
+  { id: 'n5', metadata: { type: 'place' } },
+  { id: 'n6', metadata: { type: 'place' } },
 ]
 const exampleEdgesArr: ModelEdge[] = [
   {
     id: 'e1',
     source: 'n1',
     target: 'n2',
-    attributes: {},
   },
   {
     id: 'e2',
     source: 'n1',
     target: 'n3',
-    attributes: {},
   },
   {
     id: 'e3',
     source: 'n3',
     target: 'n4',
-    attributes: {},
   },
   {
     id: 'e5',
     source: 'n5',
     target: 'n5',
-    attributes: {},
   },
 ]
 
 export const exampleGraphData = {
   nodes: exampleNodesArr.reduce<Record<string, ModelNode>>((prev, next) => {
-    prev[next.id] = next
-    return prev
-  }, {}),
-  edges: exampleEdgesArr.reduce<Record<string, ModelEdge>>((prev, next) => {
-    prev[next.id] = next
+    prev[next.id as string] = next
     return prev
   }, {}),
+  edges: exampleEdgesArr
 }

package.json

@@ -59,7 +59,7 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@committed/components": "^8.1.3",
+    "@committed/components": "8.1.3",
     "@qiwi/multi-semantic-release": "^3.16.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",

packages/graph-json/src/JsonGraph.test.ts

@@ -1,21 +1,21 @@
+import { Node } from '@committed/graph'
 import { largeGraph, smallGraph, veryLargeGraph } from 'examples'
 import { buildGraph, Graph as JSONGraph } from 'JsonGraph'
-import { ModelNode } from '@committed/graph'
 
 it('Create from json graph spec graph values', () => {
   const contentModel = buildGraph(smallGraph)
   expect(Object.keys(contentModel.nodes)).toHaveLength(4)
   expect(Object.keys(contentModel.edges)).toHaveLength(2)
 
-  const node = contentModel.getNode('nissan') as ModelNode
+  const node = contentModel.getNode('nissan') as Node
   expect(node?.label).toBe('Nissan')
 
   const edge = contentModel.getEdgesLinkedToNode(node.id)[0]
   expect(edge.id).toBeDefined()
   expect(edge.source).toBe(node.id)
   expect(edge.target).toBe('infiniti')
   expect(edge.label).toBe('has_luxury_division')
-  expect(edge.attributes.relation).toBe('has_luxury_division')
+  expect(edge.metadata.relation).toBe('has_luxury_division')
 })
 
 it('Create from json graph', () => {
@@ -35,10 +35,10 @@ it('Create from json graph', () => {
   expect(Object.keys(contentModel.nodes)).toHaveLength(3)
   expect(Object.keys(contentModel.edges)).toHaveLength(2)
   expect(contentModel.getNode('n1')).toBeDefined()
-  expect(contentModel.getNode('n1')?.attributes.a1).toBe(true)
-  expect(contentModel.getNode('n1')?.attributes.a2).toBe(10)
-  expect(contentModel.getNode('n1')?.attributes.a3).toBe('test')
-  expect((contentModel.getNode('n1')?.attributes.a4 as any).object).toBe(
+  expect(contentModel.getNode('n1')?.metadata.a1).toBe(true)
+  expect(contentModel.getNode('n1')?.metadata.a2).toBe(10)
+  expect(contentModel.getNode('n1')?.metadata.a3).toBe('test')
+  expect((contentModel.getNode('n1')?.metadata.a4 as any).object).toBe(
     'example'
   )
   expect(contentModel.getNode('n2')).toBeDefined()