From 11bb0ba4d9f688ae7e220d0637f11c073b09f946 Mon Sep 17 00:00:00 2001 From: Michael Behrisch <m.behrisch@uu.nl> Date: Mon, 14 Mar 2022 20:04:46 +0100 Subject: [PATCH] fix(vis-schema): catching up with develop --- .../src/components/schema/schema.stories.tsx | 110 +++++++++++++++++- .../src/components/schema/schema.tsx | 20 ++-- 2 files changed, 119 insertions(+), 11 deletions(-) diff --git a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx b/apps/web-graphpolaris/src/components/schema/schema.stories.tsx index a38499b13..3184fd89c 100644 --- a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx +++ b/apps/web-graphpolaris/src/components/schema/schema.stories.tsx @@ -3,7 +3,6 @@ import { SchemaFromBackend, schemaSlice, setSchema, - store, } from '@graphpolaris/shared/data-access/store'; import { movieSchema, @@ -44,6 +43,111 @@ const Mockstore = configureStore({ export const TestWithSchema = Template.bind({}); TestWithSchema.play = async () => { - const parsed = parseSchemaFromBackend(twitterSchema as SchemaFromBackend); - Mockstore.dispatch(setSchema(parsed.export())); + const dispatch = Mockstore.dispatch; + + const schema = SchemaUtils.ParseSchemaFromBackend({ + nodes: [ + { + name: 'Thijs', + attributes: [], + }, + { + name: 'Airport', + attributes: [ + { name: 'city', type: 'string' }, + { name: 'vip', type: 'bool' }, + { name: 'state', type: 'string' }, + ], + }, + { + name: 'Airport2', + attributes: [ + { name: 'city', type: 'string' }, + { name: 'vip', type: 'bool' }, + { name: 'state', type: 'string' }, + ], + }, + { + name: 'Plane', + attributes: [ + { name: 'type', type: 'string' }, + { name: 'maxFuelCapacity', type: 'int' }, + ], + }, + { name: 'Staff', attributes: [] }, + ], + edges: [ + { + name: 'Airport2:Airport', + from: 'Airport2', + to: 'Airport', + collection: 'flights', + attributes: [ + { name: 'arrivalTime', type: 'int' }, + { name: 'departureTime', type: 'int' }, + ], + }, + { + name: 'Airport:Staff', + from: 'Airport', + to: 'Staff', + collection: 'flights', + attributes: [{ name: 'salary', type: 'int' }], + }, + { + name: 'Plane:Airport', + from: 'Plane', + to: 'Airport', + collection: 'flights', + attributes: [], + }, + { + name: 'Airport:Thijs', + from: 'Airport', + to: 'Thijs', + collection: 'flights', + attributes: [{ name: 'hallo', type: 'string' }], + }, + { + name: 'Thijs:Airport', + from: 'Thijs', + to: 'Airport', + collection: 'flights', + attributes: [{ name: 'hallo', type: 'string' }], + }, + { + name: 'Staff:Plane', + from: 'Staff', + to: 'Plane', + collection: 'flights', + attributes: [{ name: 'hallo', type: 'string' }], + }, + { + name: 'Staff:Airport2', + from: 'Staff', + to: 'Airport2', + collection: 'flights', + attributes: [{ name: 'hallo', type: 'string' }], + }, + { + name: 'Airport2:Plane', + from: 'Airport2', + to: 'Plane', + collection: 'flights', + attributes: [{ name: 'hallo', type: 'string' }], + }, + + { + name: 'Airport:Airport', + from: 'Airport', + to: 'Airport', + collection: 'flights', + attributes: [{ name: 'test', type: 'string' }], + }, + ], + }); + + console.info('dispatch dummy schema', schema.order); + dispatch(setSchema(schema.export())); + // handleSchemaLayout(schema); }; diff --git a/apps/web-graphpolaris/src/components/schema/schema.tsx b/apps/web-graphpolaris/src/components/schema/schema.tsx index 094621fb9..bddb337bb 100644 --- a/apps/web-graphpolaris/src/components/schema/schema.tsx +++ b/apps/web-graphpolaris/src/components/schema/schema.tsx @@ -1,13 +1,11 @@ -import { createReactFlowElements } from '@graphpolaris/schema/schema-usecases'; +import { AllLayoutAlgorithms, LayoutFactory } from '@graphpolaris/graph-layout'; +import { createReactFlowElements } from '@graphpolaris/schema/usecases'; import { useSchema, useSchemaLayout, } from '@graphpolaris/shared/data-access/store'; -import { - AllLayoutAlgorithms, - LayoutFactory, -} from '@graphpolaris/shared/graph-layout'; -import { Attributes } from 'graphology-types'; +import { MultiGraph } from 'graphology'; +// import { AllLayoutAlgorithms, LayoutFactory } from '@graphpolaris/graph-layout'; import { useEffect, useState } from 'react'; import ReactFlow, { Node, @@ -32,9 +30,15 @@ const Schema = (props: Props) => { const schemaLayout = useSchemaLayout(); useEffect(() => { - const layoutFactory = new LayoutFactory(); + console.log('dbSchema', dbschema, dbschema.order); + }, [dbschema]); - // console.log('schema Layout', schemaLayout); + useEffect(() => { + if (dbschema == undefined || dbschema.order == 0) { + return; + } + const layoutFactory = new LayoutFactory(); + console.log('schema Layout', schemaLayout, 'order', dbschema.order); const layout = layoutFactory.createLayout( // schemaLayout as AllLayoutAlgorithms 'Graphology_noverlap' -- GitLab