Skip to content

Commit 4ca0ec8

Browse files
stuarthendrenstuarthendren
authored
Merge pull request #91 from commitd/sh/metadata
feat: changes from attributes to metadata in graph model
2 parents 229bc64 + 71a6a03 commit 4ca0ec8

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)