Skip to content

Commit 71a6a03

Browse files
stuarthendrenstuarthendren
committed
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.
1 parent 229bc64 commit 71a6a03

36 files changed

+627
-544
lines changed

‎apps/docs/src/Decoration.stories.tsx

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {
22
ContentModel,
33
DecoratorModel, Generator, Graph, GraphModel,
44
ModelNode,
5+
Node,
56
NodeDecoration,
67
sizeNodeBy
78
} from '@committed/components-graph'
@@ -47,8 +48,8 @@ export const TypedDecoration: React.FC = () => {
4748
new GraphModel(ContentModel.fromRaw(exampleGraphData), {
4849
decoratorModel: DecoratorModel.createDefault({
4950
nodeDecorators: [
50-
(node: ModelNode): Partial<NodeDecoration> => {
51-
const type = node.attributes['type']
51+
(node: Node): Partial<NodeDecoration> => {
52+
const type = node.metadata['type']
5253
if (type === 'person') return { color: '$colors$info' }
5354
if (type === 'place') return { color: '$colors$success' }
5455
return { color: '#00FF00' }
@@ -85,41 +86,41 @@ export const CustomIcons: React.FC = () => {
8586
{
8687
n1: {
8788
id: 'n1',
88-
attributes: {},
89+
metadata: {},
8990
label: faker.name.fullName(),
9091
icon: 'https://i.pravatar.cc/100',
9192
size: 100,
9293
},
9394
n2: {
9495
id: 'n2',
95-
attributes: {},
96+
metadata: {},
9697
label: faker.name.fullName(),
9798
icon: 'https://i.pravatar.cc/100',
9899
size: 100,
99100
},
100101
n3: {
101102
id: 'n3',
102-
attributes: {},
103+
metadata: {},
103104
label: faker.name.fullName(),
104105
size: 100,
105106
},
106107
n4: {
107108
id: 'n4',
108-
attributes: {},
109+
metadata: {},
109110
label: faker.name.fullName(),
110111
icon: 'https://i.pravatar.cc/100',
111112
size: 100,
112113
},
113114
n5: {
114115
id: 'n5',
115-
attributes: {},
116+
metadata: {},
116117
label: faker.name.fullName(),
117118
icon: 'https://i.pravatar.cc/100',
118119
size: 100,
119120
},
120121
n6: {
121122
id: 'n6',
122-
attributes: {},
123+
metadata: {},
123124
label: faker.name.fullName(),
124125
icon: 'https://i.pravatar.cc/100',
125126
size: 100,
@@ -129,51 +130,58 @@ export const CustomIcons: React.FC = () => {
129130
e1: {
130131
id: 'e1',
131132
label: '',
132-
attributes: {},
133+
metadata: {},
133134
source: 'n1',
134135
target: 'n2',
136+
directed: true
135137
},
136138
e2: {
137139
id: 'e2',
138140
label: '',
139-
attributes: {},
141+
metadata: {},
140142
source: 'n2',
141143
target: 'n3',
144+
directed: true
142145
},
143146
e3: {
144147
id: 'e3',
145148
label: '',
146-
attributes: {},
149+
metadata: {},
147150
source: 'n6',
148151
target: 'n4',
152+
directed: true
149153
},
150154
e4: {
151155
id: 'e4',
152156
label: '',
153-
attributes: {},
157+
metadata: {},
154158
source: 'n5',
155159
target: 'n6',
160+
directed: true
156161
},
157162
e5: {
158163
id: 'e5',
159164
label: '',
160-
attributes: {},
165+
metadata: {},
161166
source: 'n3',
162167
target: 'n5',
168+
directed: true
163169
},
164170
e6: {
165171
id: 'e6',
166172
label: '',
167-
attributes: {},
173+
metadata: {},
168174
source: 'n3',
169175
target: 'n4',
176+
directed: true
170177
},
171178
e7: {
172179
id: 'e7',
173180
label: '',
174-
attributes: {},
181+
metadata: {},
175182
source: 'n1',
176183
target: 'n4',
184+
directed: true
177185
},
178186
}
179187
)

‎apps/docs/src/GraphToolbar.stories.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ const typesLayout: CustomGraphLayout = {
9999
const rowHeight = 75
100100
const byType = Object.values(
101101
model.nodes.reduce<Record<string, DecoratedNode[]>>((acc, next) => {
102-
acc[(next.attributes.type ?? 'unknown') as string] = (
103-
acc[(next.attributes.type ?? 'unknown') as string] ?? []
102+
acc[(next.metadata.type ?? 'unknown') as string] = (
103+
acc[(next.metadata.type ?? 'unknown') as string] ?? []
104104
).concat(next)
105105
return acc
106106
}, {})
@@ -223,33 +223,33 @@ export const CustomLayout: Story = () => {
223223
e1: {
224224
id: 'e1',
225225
label: 'Type 1',
226-
attributes: {
226+
metadata: {
227227
type: 'type1',
228228
},
229229
},
230230
e2: {
231231
id: 'e2',
232232
label: 'Type 2',
233-
attributes: {
233+
metadata: {
234234
type: 'type2',
235235
},
236236
},
237237
e3: {
238238
id: 'e3',
239239
label: 'Type 3',
240-
attributes: {
240+
metadata: {
241241
type: 'type3',
242242
},
243243
},
244244
e4: {
245245
id: 'e4',
246246
label: 'Type 1 (2)',
247-
attributes: {
247+
metadata: {
248248
type: 'type1',
249249
},
250250
},
251251
},
252-
edges: {},
252+
edges: [],
253253
})
254254
)
255255
)

‎apps/docs/src/JSONGraph.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Alert, AlertContent, AlertTitle, Flex } from '@committed/components'
2-
import { ContentModel, cytoscapeRenderer, Graph, GraphModel, GraphToolbar, ModelNode, NodeViewer } from '@committed/components-graph'
2+
import { ContentModel, cytoscapeRenderer, Graph, GraphModel, GraphToolbar, Node, NodeViewer } from '@committed/components-graph'
33
import { Json, JsonExample } from '@committed/graph-json'
44
import { Meta, Story } from '@storybook/react'
55
import React, { useEffect, useState } from 'react'
6-
import { Template } from './StoryUtil'
76
import RJSON from "relaxed-json"
7+
import { Template } from './StoryUtil'
88

99
const { smallGraph, largeGraph } = JsonExample
1010

@@ -53,7 +53,7 @@ const StoryTemplate: Story<{
5353
}
5454
}, [setModel, setAlert, json])
5555

56-
const [node, setNode] = useState<ModelNode | undefined>(undefined)
56+
const [node, setNode] = useState<Node | undefined>(undefined)
5757

5858
return (
5959
<>

‎apps/docs/src/NodeViewer.stories.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { Button } from '@committed/components'
2-
import { Generator, ModelNode } from '@committed/graph'
2+
import { cytoscapeRenderer, Graph, NodeViewer } from '@committed/components-graph'
3+
import { Generator, Node } from '@committed/graph'
34
import { useBoolean } from '@committed/hooks'
45
import { Meta, Story } from '@storybook/react'
5-
import React, { useState } from 'react'
6-
import { cytoscapeRenderer } from '@committed/components-graph'
7-
import { Graph } from '@committed/components-graph'
8-
import { NodeViewer } from '@committed/components-graph'
96
import faker from 'faker'
7+
import React, { useState } from 'react'
108

119
export default {
1210
title: 'Components/NodeViewer',
@@ -16,7 +14,7 @@ export default {
1614
export const Default: Story<React.ComponentProps<typeof NodeViewer>> = () => {
1715
const [model, setModel] = useState(Generator.randomGraph)
1816

19-
const [node, setNode] = useState<ModelNode | undefined>(
17+
const [node, setNode] = useState<Node | undefined>(
2018
Object.values(model.getCurrentContent().nodes)[0]
2119
)
2220
const graph = (
@@ -42,10 +40,10 @@ export const Default: Story<React.ComponentProps<typeof NodeViewer>> = () => {
4240

4341
export const WithAttributes: Story = () => {
4442
const [open, { setTrue: setOpen, setFalse: setClosed }] = useBoolean(false)
45-
const node: ModelNode = {
43+
const node: Node = {
4644
id: 'test',
4745
label: 'example node',
48-
attributes: {
46+
metadata: {
4947
employer: 'Committed',
5048
},
5149
}
@@ -59,10 +57,10 @@ export const WithAttributes: Story = () => {
5957

6058
export const NoAttributes: Story = () => {
6159
const [open, { setTrue: setOpen, setFalse: setClosed }] = useBoolean(false)
62-
const node: ModelNode = {
60+
const node: Node = {
6361
id: 'test',
6462
label: 'example node',
65-
attributes: {},
63+
metadata: {},
6664
}
6765
return (
6866
<>
@@ -84,10 +82,10 @@ export const NoNode: Story = () => {
8482

8583
export const ManyAttributes: Story = () => {
8684
const [open, { setTrue: setOpen, setFalse: setClosed }] = useBoolean(false)
87-
const node: ModelNode = {
85+
const node: Node = {
8886
id: 'test',
8987
label: 'example node',
90-
attributes: {
88+
metadata: {
9189
firstName: faker.name.firstName(),
9290
middleName: faker.name.middleName(),
9391
lastName: faker.name.lastName(),

‎apps/docs/src/RdfGraph.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Alert, AlertContent, AlertTitle, Flex } from '@committed/components'
2-
import { ContentModel, cytoscapeRenderer, Graph, GraphModel, GraphToolbar, ModelNode, NodeViewer } from '@committed/components-graph'
2+
import { ContentModel, cytoscapeRenderer, Graph, GraphModel, GraphToolbar, Node, NodeViewer } from '@committed/components-graph'
33
import { Rdf, RdfUtil } from '@committed/graph-rdf'
44
import { Meta, Story } from '@storybook/react'
55
import React, { useEffect, useState } from 'react'
@@ -133,7 +133,7 @@ const StoryTemplate: Story<{
133133
}
134134
}, [setModel, setAlert, rdf])
135135

136-
const [node, setNode] = useState<ModelNode | undefined>(undefined)
136+
const [node, setNode] = useState<Node | undefined>(undefined)
137137

138138
return (
139139
<>

‎apps/docs/src/exampleData.ts

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,40 @@
11
import { ModelEdge, ModelNode } from '@committed/components-graph'
22

33
const exampleNodesArr: ModelNode[] = [
4-
{ id: 'n1', attributes: { type: 'person' } },
5-
{ id: 'n2', attributes: { type: 'person' } },
6-
{ id: 'n3', attributes: { type: 'person' } },
7-
{ id: 'n4', attributes: { type: 'place' } },
8-
{ id: 'n5', attributes: { type: 'place' } },
9-
{ id: 'n6', attributes: { type: 'place' } },
4+
{ id: 'n1', metadata: { type: 'person' } },
5+
{ id: 'n2', metadata: { type: 'person' } },
6+
{ id: 'n3', metadata: { type: 'person' } },
7+
{ id: 'n4', metadata: { type: 'place' } },
8+
{ id: 'n5', metadata: { type: 'place' } },
9+
{ id: 'n6', metadata: { type: 'place' } },
1010
]
1111
const exampleEdgesArr: ModelEdge[] = [
1212
{
1313
id: 'e1',
1414
source: 'n1',
1515
target: 'n2',
16-
attributes: {},
1716
},
1817
{
1918
id: 'e2',
2019
source: 'n1',
2120
target: 'n3',
22-
attributes: {},
2321
},
2422
{
2523
id: 'e3',
2624
source: 'n3',
2725
target: 'n4',
28-
attributes: {},
2926
},
3027
{
3128
id: 'e5',
3229
source: 'n5',
3330
target: 'n5',
34-
attributes: {},
3531
},
3632
]
3733

3834
export const exampleGraphData = {
3935
nodes: exampleNodesArr.reduce<Record<string, ModelNode>>((prev, next) => {
40-
prev[next.id] = next
41-
return prev
42-
}, {}),
43-
edges: exampleEdgesArr.reduce<Record<string, ModelEdge>>((prev, next) => {
44-
prev[next.id] = next
36+
prev[next.id as string] = next
4537
return prev
4638
}, {}),
39+
edges: exampleEdgesArr
4740
}

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"devDependencies": {
6060
"@commitlint/cli": "^13.1.0",
6161
"@commitlint/config-conventional": "^13.1.0",
62-
"@committed/components": "^8.1.3",
62+
"@committed/components": "8.1.3",
6363
"@qiwi/multi-semantic-release": "^3.16.0",
6464
"@testing-library/jest-dom": "^5.16.5",
6565
"@testing-library/react": "^12.1.5",

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1+
import { Node } from '@committed/graph'
12
import { largeGraph, smallGraph, veryLargeGraph } from 'examples'
23
import { buildGraph, Graph as JSONGraph } from 'JsonGraph'
3-
import { ModelNode } from '@committed/graph'
44

55
it('Create from json graph spec graph values', () => {
66
const contentModel = buildGraph(smallGraph)
77
expect(Object.keys(contentModel.nodes)).toHaveLength(4)
88
expect(Object.keys(contentModel.edges)).toHaveLength(2)
99

10-
const node = contentModel.getNode('nissan') as ModelNode
10+
const node = contentModel.getNode('nissan') as Node
1111
expect(node?.label).toBe('Nissan')
1212

1313
const edge = contentModel.getEdgesLinkedToNode(node.id)[0]
1414
expect(edge.id).toBeDefined()
1515
expect(edge.source).toBe(node.id)
1616
expect(edge.target).toBe('infiniti')
1717
expect(edge.label).toBe('has_luxury_division')
18-
expect(edge.attributes.relation).toBe('has_luxury_division')
18+
expect(edge.metadata.relation).toBe('has_luxury_division')
1919
})
2020

2121
it('Create from json graph', () => {
@@ -35,10 +35,10 @@ it('Create from json graph', () => {
3535
expect(Object.keys(contentModel.nodes)).toHaveLength(3)
3636
expect(Object.keys(contentModel.edges)).toHaveLength(2)
3737
expect(contentModel.getNode('n1')).toBeDefined()
38-
expect(contentModel.getNode('n1')?.attributes.a1).toBe(true)
39-
expect(contentModel.getNode('n1')?.attributes.a2).toBe(10)
40-
expect(contentModel.getNode('n1')?.attributes.a3).toBe('test')
41-
expect((contentModel.getNode('n1')?.attributes.a4 as any).object).toBe(
38+
expect(contentModel.getNode('n1')?.metadata.a1).toBe(true)
39+
expect(contentModel.getNode('n1')?.metadata.a2).toBe(10)
40+
expect(contentModel.getNode('n1')?.metadata.a3).toBe('test')
41+
expect((contentModel.getNode('n1')?.metadata.a4 as any).object).toBe(
4242
'example'
4343
)
4444
expect(contentModel.getNode('n2')).toBeDefined()

0 commit comments

Comments
 (0)