Skip to content

feat: changes from attributes to metadata in graph model #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 18, 2023
Merged

feat: changes from attributes to metadata in graph model #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 23 additions & 15 deletions apps/docs/src/Decoration.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
ContentModel,
DecoratorModel, Generator, Graph, GraphModel,
ModelNode,
Node,
NodeDecoration,
sizeNodeBy
} from '@committed/components-graph'
Expand Down Expand Up @@ -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' }
Expand Down Expand Up @@ -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,
Expand All @@ -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
},
}
)
Expand Down
14 changes: 7 additions & 7 deletions apps/docs/src/GraphToolbar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}, {})
Expand Down Expand Up @@ -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: [],
})
)
)
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/src/JSONGraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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 (
<>
Expand Down
22 changes: 10 additions & 12 deletions apps/docs/src/NodeViewer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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 = (
Expand All @@ -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',
},
}
Expand All @@ -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 (
<>
Expand All @@ -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(),
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/src/RdfGraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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 (
<>
Expand Down
23 changes: 8 additions & 15 deletions apps/docs/src/exampleData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 7 additions & 7 deletions packages/graph-json/src/JsonGraph.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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()
Expand Down
Loading