Skip to content

Commit

Permalink
CELE-32 refactor: Refactor TwoDViewer component
Browse files Browse the repository at this point in the history
  • Loading branch information
afonsobspinto committed May 20, 2024
1 parent 6815b9a commit 33889f9
Show file tree
Hide file tree
Showing 9 changed files with 89 additions and 55 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from '@mui/material';
import {useGlobalContext} from "../contexts/GlobalContext.tsx";
import footerImage from '../assets/summary-neurons.png';
import {TEMPLATE_ACTIVE_DATASETS, TEMPLATE_ACTIVE_NEURONS} from "../../settings/templateWorkspaceSettings.ts";
import {TEMPLATE_ACTIVE_DATASETS, TEMPLATE_ACTIVE_NEURONS} from "../settings/templateWorkspaceSettings.ts";
import {fetchAndFilterNeurons, fetchDatasets} from "../helpers/templateWorkspaceHelper.ts";

function AppLauncher() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { RootState } from "../../../layout-manager/layoutManagerFactory";
import { BufferGeometry, DoubleSide, NormalBlending } from "three";
import { ThreeEvent } from "@react-three/fiber";
import { getFurthestIntersectedObject } from "../../../helpers/threeDHelpers";
import { OUTLINE_COLOR, OUTLINE_THICKNESS } from "../../../../settings/threeDSettings";
import { OUTLINE_COLOR, OUTLINE_THICKNESS } from "../../../settings/threeDSettings";

interface Props {
stl: BufferGeometry;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
CAMERA_NEAR,
CAMERA_POSITION, LIGHT_1_COLOR, LIGHT_2_COLOR, LIGHT_2_POSITION,
SCENE_BACKGROUND
} from "../../../../settings/threeDSettings.ts";
} from "../../../settings/threeDSettings.ts";

import STLViewer from "./STLViewer.tsx";
import { Canvas } from "@react-three/fiber";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,26 @@
import {useEffect, useRef, useState} from 'react';
import cytoscape from 'cytoscape';
import {useSelectedWorkspace} from "../../../hooks/useSelectedWorkspace.ts";
import {ConnectivityService} from "../../../rest";
import {Connection, ConnectivityService} from "../../../rest";
import {GRAPH_STYLES} from "../../../theme/twoDStyles.ts";
import {createEdge, createNode} from "../../../helpers/twoDHelpers.ts";
import {
CHEMICAL_THRESHOLD,
ELECTRICAL_THRESHOLD,
INCLUDE_ANNOTATIONS,
INCLUDE_NEIGHBORING_CELLS
} from "../../../settings/twoDSettings.ts";

const LAYOUT = 'cose'
const TwoDViewer = () => {
const workspace = useSelectedWorkspace()
const cyContainer = useRef(null);
const cyRef = useRef(null);
const [connections, setConnections] = useState([]);
const [connections, setConnections] = useState<Connection[]>([]);
const [thresholdChemical, setThresholdChemical] = useState<number>(CHEMICAL_THRESHOLD);
const [thresholdElectrical, setThresholdElectrical] = useState<number>(ELECTRICAL_THRESHOLD);
const [includeNeighboringCells, setIncludeNeighboringCells] = useState<boolean>(INCLUDE_NEIGHBORING_CELLS);
const [includeAnnotations, setIncludeAnnotations] = useState<boolean>(INCLUDE_ANNOTATIONS);

const updateGraphElements = (cy, connections) => {
const nodes = new Set();
Expand All @@ -17,22 +29,10 @@ const TwoDViewer = () => {
connections.forEach(conn => {
nodes.add(conn.pre);
nodes.add(conn.post);
edges.push({
group: 'edges',
data: {
id: `${conn.pre}-${conn.post}`,
source: conn.pre,
target: conn.post,
label: conn.type
},
classes: conn.type
});
edges.push(createEdge(conn));
});

const elements = Array.from(nodes).map(node => ({
group: 'nodes',
data: {id: node, label: node}
})).concat(edges);
const elements = Array.from(nodes).map(nodeId => createNode(nodeId)).concat(edges);

cy.elements().remove(); // Remove all existing elements
cy.add(elements); // Add new elements
Expand All @@ -54,10 +54,10 @@ const TwoDViewer = () => {
cells,
datasetIds,
datasetType,
thresholdChemical: 1,
thresholdElectrical: 1,
includeNeighboringCells: true,
includeAnnotations: false,
thresholdChemical: thresholdChemical,
thresholdElectrical: thresholdElectrical,
includeNeighboringCells: includeNeighboringCells,
includeAnnotations: includeAnnotations,
}).then(connections => {
setConnections(connections);
}).catch(error => {
Expand All @@ -79,38 +79,7 @@ const TwoDViewer = () => {

const cy = cytoscape({
container: cyContainer.current,
style: [
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(label)',
'color': '#fff',
'text-outline-color': '#000',
'text-outline-width': 2,
'text-valign': 'center',
'text-halign': 'center',
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier'
}
},
{
selector: '.chemical',
style: {'line-color': 'blue'}
},
{
selector: '.electrical',
style: {'line-color': 'red'}
}
],
style: GRAPH_STYLES,
layout: {
name: LAYOUT,
}
Expand Down
21 changes: 21 additions & 0 deletions applications/visualizer/frontend/src/helpers/twoDHelpers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type {Connection} from "../rest";

export const createEdge = (conn: Connection) => {
return {
group: 'edges',
data: {
id: `${conn.pre}-${conn.post}`,
source: conn.pre,
target: conn.post,
label: conn.type
},
classes: conn.type
}
}

export const createNode = (nodeId: string) => {
return {
group: 'nodes',
data: {id: nodeId, label: nodeId}
}
}
5 changes: 5 additions & 0 deletions applications/visualizer/frontend/src/settings/twoDSettings.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const CHEMICAL_THRESHOLD = 3
export const ELECTRICAL_THRESHOLD = 3

export const INCLUDE_NEIGHBORING_CELLS = false
export const INCLUDE_ANNOTATIONS = true
39 changes: 39 additions & 0 deletions applications/visualizer/frontend/src/theme/twoDStyles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
const NODE_STYLE = {
'background-color': '#666',
'label': 'data(label)',
'color': '#fff',
'text-outline-color': '#000',
'text-outline-width': 2,
'text-valign': 'center',
'text-halign': 'center',
}

const EDGE_STYLE = {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier'
}

const CHEMICAL_STYLE = {'line-color': 'blue'}
const ELECTRICAL_STYLE = {'line-color': 'yellow'}

export const GRAPH_STYLES = [
{
selector: 'node',
style: NODE_STYLE
},
{
selector: 'edge',
style: EDGE_STYLE
},
{
selector: '.chemical',
style: CHEMICAL_STYLE
},
{
selector: '.electrical',
style: ELECTRICAL_STYLE
}
]

0 comments on commit 33889f9

Please sign in to comment.