From d977d5536cc4c1ddfbd68ad6a323af4b0213fa85 Mon Sep 17 00:00:00 2001 From: Brian Blonski Date: Tue, 13 Aug 2024 15:54:04 -0700 Subject: [PATCH 1/4] Load by layout_id --- src/components/Details/WorkspacesComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Details/WorkspacesComponent.tsx b/src/components/Details/WorkspacesComponent.tsx index b77860c..18a6941 100644 --- a/src/components/Details/WorkspacesComponent.tsx +++ b/src/components/Details/WorkspacesComponent.tsx @@ -82,7 +82,7 @@ export const Workspaces = () => { for (let i= 0; i < ids.length; i += chunksize) { const chunk = ids.slice(i, i + chunksize) const withinStep = `within(${chunk.map(id => `'${id}'`).join(', ')})`; - const query = `g.V().hasId(${withinStep})`; + const query = `g.V().has('layout_id', ${withinStep})`; axios .post( QUERY_ENDPOINT, From 94fbbefb0b1a5ffc68878f4d2416b85069323b8b Mon Sep 17 00:00:00 2001 From: Brian Blonski Date: Mon, 12 Aug 2024 19:17:47 -0700 Subject: [PATCH 2/4] style changes --- src/components/Details/DetailsComponent.tsx | 7 +++++- src/components/Details/QueryComponent.tsx | 4 +-- src/logics/graphImpl/cytoImpl.ts | 28 +++++++++++++-------- 3 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/components/Details/DetailsComponent.tsx b/src/components/Details/DetailsComponent.tsx index e105060..6990a55 100644 --- a/src/components/Details/DetailsComponent.tsx +++ b/src/components/Details/DetailsComponent.tsx @@ -89,7 +89,12 @@ export const DetailsComponent = () => { */ function getRows(data: any) { if (data == null) return; - return Object.entries(data).sort().map(e => { + const rows = Object.entries(data); + const nameRow = rows.find(([key]) => key === 'name'); + const otherRows = rows.filter(([key]) => key !== 'name'); + const sortedRows = otherRows.sort((a, b) => a[0].localeCompare(b[0])); + const finalRows = nameRow ? [nameRow, ...sortedRows] : sortedRows; + return finalRows.map(e => { return {String(e[0])} diff --git a/src/components/Details/QueryComponent.tsx b/src/components/Details/QueryComponent.tsx index 3e9fbd9..99ec9e4 100644 --- a/src/components/Details/QueryComponent.tsx +++ b/src/components/Details/QueryComponent.tsx @@ -8,7 +8,7 @@ import axios from "axios"; import { COMMON_GREMLIN_ERROR, QUERY_ENDPOINT } from "../../constants"; import { onFetchQuery } from "../../logics/actionHelper"; import { RootState } from "../../app/store"; -import { highlightNodesAndEdges } from "../../logics/graphImpl/visImpl"; +// import { highlightNodesAndEdges } from "../../logics/graphImpl/visImpl"; const Query = ({ }) => { const dispatch = useDispatch() @@ -24,7 +24,7 @@ const Query = ({ }) => { function sendQuery() { dispatch(setError(null)); - highlightNodesAndEdges(null, null); + // highlightNodesAndEdges(null, null); axios .post( QUERY_ENDPOINT, diff --git a/src/logics/graphImpl/cytoImpl.ts b/src/logics/graphImpl/cytoImpl.ts index 365d29e..9c87361 100644 --- a/src/logics/graphImpl/cytoImpl.ts +++ b/src/logics/graphImpl/cytoImpl.ts @@ -52,10 +52,12 @@ function toCyNode(n: NodeData): cy.NodeDefinition { group: "nodes", data: { ...n, id: n.id!.toString() }, style: { - 'background-color': color, - 'background-opacity': 0.7, - 'border-width': '3px', + 'width': 41, + 'height': 41, 'border-color': color, + 'border-width': '0px', + 'background-color': color, + 'background-opacity': 0, 'background-image': getIcon(n.type), 'background-fit': 'contain', 'text-max-width' : '100px', @@ -150,7 +152,7 @@ export function getCytoGraph(container?: HTMLElement, data?: GraphData, options? }, enabled: true // whether the command is selectable }, - ], // function( ele ){ return [ /*...*/ ] }, // a function that returns commands or a promise of commands + ], // function( ele ){ return [ /*...*/ ] }, // a function that returns commands or a promise of commands }) layout.start() @@ -229,11 +231,10 @@ export function getCytoGraph(container?: HTMLElement, data?: GraphData, options? graph.remove(n) } } - const nodeIds = graph.nodes().map(x => x.id()) for (let e of edges) { if (!graph.edges().map(x => x.id()).includes(e.data.id!) && graph.$id(e.data.target).size() > 0) { const sourceNodeID = e.data.source - if (!nodeIds.includes(sourceNodeID)) { + if (!graph.nodes().map(x => x.id()).includes(sourceNodeID)) { continue; } graph.add(e) @@ -299,12 +300,19 @@ export function applyLayout(name: string) { export function getNodePositions() { layout?.stop() store.dispatch(setIsPhysicsEnabled(false)) - let positions: Record = {}; + let positions: Record = {}; + let nodemaps: Record = {}; + graph?.nodes().forEach(node => { - positions[node.data('id')] = Object.assign({}, node.position()) + const node_name = node.data('properties').name; + const node_id = node.data('id'); + const node_position = node.position(); + positions[node.data('properties').layout_id] = {node_id: node_id, name: node_name, x: node_position.x, y: node_position.y} }) return { layout: positions, + nodemap: nodemaps, + //layout: layouts, zoom: graph?.zoom(), view: Object.assign({}, graph?.pan()) }; @@ -314,7 +322,7 @@ export function setNodePositions(workspace: Workspace | undefined) { layout?.stop() store.dispatch(setIsPhysicsEnabled(false)) graph?.nodes().forEach(node => { - let newPosition = workspace?.layout[node.data('id')] + let newPosition = workspace?.layout[node.data('properties').layout_id] if (newPosition !== undefined) node.position(newPosition); }) graph?.zoom(workspace?.zoom) @@ -345,4 +353,4 @@ export function exportIMG() { document.body.appendChild(link); link.click(); document.body.removeChild(link); -} \ No newline at end of file +} From 01b058d1277fa4d03dd2c2678b723ff505f6202b Mon Sep 17 00:00:00 2001 From: Brian Blonski Date: Tue, 13 Aug 2024 14:44:16 -0700 Subject: [PATCH 3/4] merge proposal --- src/logics/graphImpl/cytoImpl.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/logics/graphImpl/cytoImpl.ts b/src/logics/graphImpl/cytoImpl.ts index 9c87361..184566c 100644 --- a/src/logics/graphImpl/cytoImpl.ts +++ b/src/logics/graphImpl/cytoImpl.ts @@ -111,7 +111,8 @@ export function getCytoGraph(container?: HTMLElement, data?: GraphData, options? style: { width: 1, "curve-style": "bezier", - "target-arrow-shape": 'triangle', + "target-arrow-shape": 'triangle', + "text-rotation": "autorotate", "label": "data(label)" } } From deac3ec6a8faef668426a04767146dfc6b260e1c Mon Sep 17 00:00:00 2001 From: Brian Blonski Date: Wed, 21 Aug 2024 17:25:56 -0700 Subject: [PATCH 4/4] text width --- src/logics/graphImpl/cytoImpl.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/logics/graphImpl/cytoImpl.ts b/src/logics/graphImpl/cytoImpl.ts index 184566c..76874ee 100644 --- a/src/logics/graphImpl/cytoImpl.ts +++ b/src/logics/graphImpl/cytoImpl.ts @@ -60,7 +60,8 @@ function toCyNode(n: NodeData): cy.NodeDefinition { 'background-opacity': 0, 'background-image': getIcon(n.type), 'background-fit': 'contain', - 'text-max-width' : '100px', + //'font-size': '0px', + 'text-max-width' : '80px', 'text-wrap': 'wrap', 'text-valign': 'bottom' }, @@ -112,6 +113,7 @@ export function getCytoGraph(container?: HTMLElement, data?: GraphData, options? width: 1, "curve-style": "bezier", "target-arrow-shape": 'triangle', + //"font-size": "0px", "text-rotation": "autorotate", "label": "data(label)" }