hise-flow-graphs 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hise-flow-graphs",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "This package manages ReactFlow graphs for HISE.",
   "main": "dist/main.js",
   "repository": "git@github.com:aifimmunology/hise-flow-graphs.git",

package/src/components/Certificates/CertificateGraph/NodeAttributes.tsx

@@ -7,7 +7,7 @@ export const Description = (props: {
 }) => {
   const nodeDescription = getNodeDescription(props.label, props.description);
 
-  if (!Object.keys(props.description).length || !nodeDescription) return null;
+  if (!nodeDescription || !Object.keys(props.description).length) return null;
 
   return (
     <div className="node-description text-center text-break">

package/src/components/Certificates/CertificateGraph/helpers.tsx

@@ -55,7 +55,7 @@ const getNodes = (
       id: vertex,
       position,
       type: label !== 'FileLayer' ? type : 'fileLayerNode',
-      data: data[vertex],
+      data: data[vertex] || {},
       style: getNodeStyle(type, label, assetReview),
     });
   });
@@ -181,13 +181,21 @@ export const getStyle = (type: string) => {
   return style;
 };
 
-export const getSchemes = (vertex: string, labels: Certificate['serviceLabels'], schemes: Certificate['schemes']) => {
+export const getSchemes = (
+  label: string,
+  vertex: string,
+  labels: Certificate['serviceLabels'],
+  schemes: Certificate['schemes'],
+) => {
   const nodeSchemes: { [key: string]: object } = {};
 
+  if (!['Sample', 'Subject'].includes(label)) return nodeSchemes;
   if (!labels || !schemes) return nodeSchemes;
 
   const schemeLabels = labels[vertex];
 
+  if (!schemeLabels) return nodeSchemes;
+
   Object.entries(schemeLabels).forEach(([key, val]: any) => {
     if (key === 'Survey Data Scheme Key') {
       nodeSchemes.surveyData = schemes[val];
@@ -205,7 +213,15 @@ export const getSchemes = (vertex: string, labels: Certificate['serviceLabels'],
   return nodeSchemes;
 };
 
+// export const getNodeData = (certificate, vertex) => {
+//   const data = {
+
+//   }
+// };
+
 export const getNodeLabel = (type: string, desc: any) => {
+  if (!desc) return type;
+
   switch (type) {
     case 'FileSet':
       return (
@@ -254,6 +270,8 @@ export const getNodeLabel = (type: string, desc: any) => {
 };
 
 export const getNodeDescription = (type: string, desc: any) => {
+  if (!desc) return null;
+
   switch (type) {
     case 'Cohort':
     case 'FileSet':

package/src/components/Certificates/CertificateGraph/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import dagre from 'dagre';
 import * as R from 'ramda';
 import ReactFlow, {
@@ -24,19 +24,6 @@ import 'react-toastify/dist/ReactToastify.css';
 import 'reactflow/dist/style.css';
 import './style.css';
 
-const nodeTypes = {
-  readNode: ReadNode,
-  fileLayerNode: FileLayerNode,
-  fileNode: ReadNode,
-  pipelineNode: ReadNode,
-  IDENode: ReadNode,
-  editNode: EditNode,
-  reviewNode: ReviewNode,
-  workspaceFileNode: WorkspaceFileNode,
-  workspacePipelineNode: WorkspacePipelineNode,
-  workspaceIDENode: WorkspaceIDENode,
-};
-
 const dagreGraph = new dagre.graphlib.Graph();
 dagreGraph.setDefaultEdgeLabel(() => ({}));
 
@@ -60,6 +47,19 @@ const Graph = ({ type, certificate, replica, graph, children }: {
     setNodeLayers,
   } = useGraph();
 
+  const nodeTypes = useMemo(() => ({
+    readNode: ReadNode,
+    fileLayerNode: FileLayerNode,
+    fileNode: ReadNode,
+    pipelineNode: ReadNode,
+    IDENode: ReadNode,
+    editNode: EditNode,
+    reviewNode: ReviewNode,
+    workspaceFileNode: WorkspaceFileNode,
+    workspacePipelineNode: WorkspacePipelineNode,
+    workspaceIDENode: WorkspaceIDENode,
+  }), []);
+
   const [nodes, setNodes, onNodesChange] = nodesState;
   const [edges, setEdges, onEdgesChange] = edgesState;
 
@@ -95,7 +95,9 @@ const Graph = ({ type, certificate, replica, graph, children }: {
         onEdgesChange={onEdgesChange}
         connectionLineType={ConnectionLineType.SmoothStep}
         nodeTypes={nodeTypes}
-        fitView
+        onlyRenderVisibleElements
+        edgesUpdatable={false}
+        defaultViewport={{ x: 0, y: 0, zoom: 0.6 }}
       >
         <Controls />
         <Background />

package/src/components/Certificates/EditCertificate/EditNode.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
+import { useGraph } from '../../../state/GraphContext';
 import { MaskMetadataButton } from './MaskMetadataModal';
 import { Description, Label } from '../CertificateGraph/NodeAttributes';
 import { EditNodeModalBtn } from './EditNodeModal';
 import { getLabelLink } from '../CertificateGraph/helpers';
 
 const EditNode = ({ data }: NodeProps) => {
-  const { vertex, description, metadata, isExecutable } = data;
+  const { certificate } = useGraph();
+  const { vertex, description, metadata } = data;
 
   const [label, guid] = vertex.split('/');
-  const link = getLabelLink(label, guid, isExecutable);
+  const link = getLabelLink(label, guid, certificate.isExecutable);
 
   return (
     <>

package/src/components/Certificates/EditCertificate/helpers.ts

@@ -12,7 +12,6 @@ export const getEditNodeData = (
   const data: { [key: string]: Node['data'] } = {};
 
   const {
-    isExecutable,
     generatedLabels,
     customLabels,
     serviceLabels,
@@ -32,8 +31,7 @@ export const getEditNodeData = (
       description,
       customLabels,
       metadata,
-      schemes: getSchemes(vertex, serviceLabels, schemes),
-      isExecutable,
+      schemes: getSchemes(label, vertex, serviceLabels, schemes),
       toggleEditModal,
       toggleMaskModal,
     };
@@ -43,6 +41,8 @@ export const getEditNodeData = (
 };
 
 export const getFormControls = (label: string, description: object) => {
+  if (!description) return null;
+
   switch (label) {
     case 'Cohort':
     case 'IDE':

package/src/components/Certificates/ReadCertificate/helpers.ts

@@ -29,7 +29,7 @@ export const getReadNodeData = (
       description,
       customLabels,
       metadata: metadata ? metadata[vertex] : null,
-      schemes: getSchemes(vertex, serviceLabels, schemes),
+      schemes: getSchemes(label, vertex, serviceLabels, schemes),
       toggleMetadataModal,
     };
   });

package/src/components/Certificates/ReviewCertificate/ReviewNode.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
+import { useGraph } from '../../../state/GraphContext';
 import { ReviewBtn } from './ReviewNodes';
 import { Description, Label } from '../CertificateGraph/NodeAttributes';
 import { MetadataButton } from '../ReadCertificate/MetadataModal';
 import { getLabelLink } from '../CertificateGraph/helpers';
 
 const ReviewNode = (props: NodeProps) => {
-  const { vertex, description, isExecutable } = props.data;
+  const { certificate } = useGraph();
+  const { vertex, description } = props.data;
 
   const [label, guid] = vertex.split('/');
-  const link = getLabelLink(label, guid, isExecutable);
+  const link = getLabelLink(label, guid, certificate.isExecutable);
 
   return (
     <>

package/src/components/Certificates/ReviewCertificate/helpers.ts

@@ -13,8 +13,6 @@ export const getReviewNodeData = (
   const data: { [key: string]: Node['data'] } = {};
 
   const {
-    id,
-    isExecutable,
     generatedLabels,
     customLabels,
     serviceLabels,
@@ -40,12 +38,10 @@ export const getReviewNodeData = (
       assetReview,
       otherReviews,
       certificate,
-      schemes: getSchemes(vertex, serviceLabels, schemes),
+      schemes: getSchemes(label, vertex, serviceLabels, schemes),
       metadata: metadata ? metadata[vertex] : null,
-      certId: id,
       toggleReviewModal,
       toggleMetadataModal,
-      isExecutable,
     };
   });
 

package/src/components/Certificates/WorkspaceCertificate/helpers.ts

@@ -66,7 +66,7 @@ export const getWorkspaceData = (
       description,
       customLabels,
       metadata: metadata ? metadata[vertex] : null,
-      schemes: getSchemes(vertex, serviceLabels, schemes),
+      schemes: getSchemes(label, vertex, serviceLabels, schemes),
       isReplicated,
       refresh,
     };

package/src/state/GraphContext.tsx

@@ -2,6 +2,7 @@ import React, {
   useState,
   useContext,
   createContext,
+  useMemo,
 } from 'react';
 import { useNodesState, useEdgesState, Node } from 'reactflow';
 import { Certificate, Replica, NodeLayers } from '../@types/CertificateTypes';
@@ -67,7 +68,7 @@ const GraphProvider = ({ children }: any) => {
   const nodesState = useNodesState([]); // [nodes, setNodes, onNodesChange]
   const edgesState = useEdgesState([]); // [edges, setEdges, onEdgesChange]
 
-  const contextValue = {
+  const contextValue = useMemo(() => ({
     node,
     setNode,
     type,
@@ -80,7 +81,20 @@ const GraphProvider = ({ children }: any) => {
     setNodeLayers,
     nodesState,
     edgesState,
-  };
+  }), [
+    node,
+    setNode,
+    type,
+    setType,
+    certificate,
+    setCertificate,
+    replica,
+    setReplica,
+    nodeLayers,
+    setNodeLayers,
+    nodesState,
+    edgesState,
+  ]);
 
   return (
     <GraphContext.Provider value={contextValue}>