hise-flow-graphs 1.0.21 → 1.1.0

package/package.json

@@ -1,18 +1,23 @@
 {
   "name": "hise-flow-graphs",
-  "version": "1.0.21",
+  "version": "1.1.0",
   "description": "This package manages ReactFlow graphs for HISE.",
   "main": "dist/main.js",
   "repository": "git@github.com:aifimmunology/hise-flow-graphs.git",
   "author": "Allen Institute for Immunology",
   "license": "ISC",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack --config webpack.config.js --env ENVIRONMENT=dev",
+    "build:dev": "webpack --config webpack.config.js --env ENVIRONMENT=dev",
+    "build:stage": "webpack --config webpack.config.js --env ENVIRONMENT=stage",
+    "build:prod": "webpack --config webpack.config.js --env ENVIRONMENT=prod"
   },
   "dependencies": {
     "bootstrap": "5.1.3",
     "dagre": "^0.8.5",
+    "dotenv": "^16.4.5",
     "hise-components": "^1.0.0",
+    "process": "^0.11.10",
     "ramda": "0.27.1",
     "react-toastify": "^9.1.3",
     "reactflow": "^11.8.1"

package/src/@types/CertificateTypes.ts

@@ -1,19 +1,7 @@
 import { Edge, Node } from 'reactflow';
 import { StringMap } from './GeneralTypes';
 
-export enum AssetReviewStatus {
-  Approved = "approved",
-  Rejected = "rejected",
-  Restricted = "restricted",
-  Unset = "unset"
-};
-
-export type AssetReview = {
-  vertex: string,
-  reviewStatus: AssetReviewStatus,
-};
-
-export type Certificate = {
+export interface Certificate {
   id: string,
   isExecutable: boolean,
   vertices: Array<string>,
@@ -22,8 +10,12 @@ export type Certificate = {
   customLabels: StringMap,
   serviceLabels: StringMap,
   schemes: StringMap,
-  metadata: StringMap,
-  assetReviews: Array<AssetReview>
+  metadata: {
+    [key: string]: Metadata,
+  },
+  restrictedAssets: {
+    [vertex: string]: RestrictedAssetObject,
+  },
   subgraphs: {
     [key: string]: {
       edges: { [key: string]: Array<string> }
@@ -32,6 +24,24 @@ export type Certificate = {
   },
 };
 
+export interface RestrictedAssetObject {
+  restrictionInstructions: string,
+  restrictionNotes: string,
+};
+
+export type MetadataMap = { [key: string]: any };
+
+export enum MetadataType {
+  labData = 'labData',
+  surveyData = 'surveyData',
+  demographicsData = 'demographicsData',
+  emrData = 'emrData'
+};
+
+export type Metadata = {
+  [key in MetadataType]?: MetadataMap;
+};
+
 export type Replica = {
   matches: StringMap,
 };

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

@@ -48,7 +48,7 @@ const LayerBackButton = () => {
         vertexId={node.id}
         certificateId={certificate.id}
         type={type}
-        refresh={node.data.refresh}
+        refresh={node.data?.refresh}
       />
     </div>
   );

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { getNodeDescription, getNodeLabel } from './helpers';
 
-export const Description = (props: {
+export const Description = ({ label, description }: {
   label: string,
-  description: string,
+  description: any,
 }) => {
-  const nodeDescription = getNodeDescription(props.label, props.description);
+  const nodeDescription = getNodeDescription(label, description);
 
-  if (!Object.keys(props.description).length || !nodeDescription) return null;
+  if (!nodeDescription || !Object.keys(description).length) return null;
 
   return (
     <div className="node-description text-center text-break">
@@ -16,24 +16,24 @@ export const Description = (props: {
   );
 };
 
-export const Label = (props: {
+export const Label = ({ label, description, link }: {
   label: string,
-  description: string,
+  description: any,
   link?: string | null,
 }) => {
-  const label = getNodeLabel(props.label, props.description);
+  const nodeLabel = getNodeLabel(label, description);
 
-  if (!props.link) {
+  if (!link) {
     return (
       <div className="node-label text-break flex-fill">
-        {label}
+        {nodeLabel}
       </div>
     );
   }
 
   return (
     <a
-      href={`#${props.link}`}
+      href={`#${link}`}
       target="_blank"
       rel="noreferrer"
       className="node-label text-break flex-fill"

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

@@ -4,12 +4,12 @@ import dagre from 'dagre';
 import * as R from 'ramda';
 import { getStyle as getReviewNodeStyle } from '../ReviewCertificate/helpers';
 import { StringMap } from '../../../@types/GeneralTypes';
-import { AssetReview, Certificate } from '../../../@types/CertificateTypes';
+import { Certificate } from '../../../@types/CertificateTypes';
 
-const getNodeStyle = (type: string, label: string, assetReview: AssetReview | null) => {
+const getNodeStyle = (type: string, label: string, isAssetRestricted: boolean) => {
   switch (type) {
     case 'reviewNode':
-      return getReviewNodeStyle(label, assetReview);
+      return getReviewNodeStyle(label, isAssetRestricted);
 
     case 'readNode':
     case 'editNode':
@@ -21,11 +21,11 @@ const getNodeStyle = (type: string, label: string, assetReview: AssetReview | nu
 export const getNodesAndEdges = (
   vertices: Certificate['vertices'],
   edges: Certificate['edges'],
-  assetReviews: Certificate['assetReviews'],
+  restrictedAssets: Certificate['restrictedAssets'],
   type: string,
-  data: { [key: string]: Node['data'] },
+  data: { [key: string]: Function },
 ) => {
-  const initialNodes = getNodes(vertices, assetReviews, type, data);
+  const initialNodes = getNodes(vertices, restrictedAssets, type, data);
   const initialEdges = getEdges(edges);
 
   return getLayoutedElements(initialNodes, initialEdges);
@@ -33,9 +33,9 @@ export const getNodesAndEdges = (
 
 const getNodes = (
   vertices: Certificate['vertices'],
-  assetReviews: Certificate['assetReviews'],
+  restrictedAssets: Certificate['restrictedAssets'],
   type: string,
-  data: { [key: string]: Node['data'] },
+  data: { [key: string]: Function },
 ) => {
   const position = { x: 0, y: 0 };
 
@@ -45,18 +45,13 @@ const getNodes = (
 
   vertices.forEach((vertex: string) => {
     const label = vertex.split('/')[0];
-    let assetReview: any;
-
-    if (type === 'reviewNode' && ['File', 'IDE'].includes(label)) {
-      assetReview = R.find(R.propEq('vertex', vertex))(assetReviews) ?? null;
-    }
 
     nodes.push({
       id: vertex,
       position,
       type: label !== 'FileLayer' ? type : 'fileLayerNode',
-      data: data[vertex],
-      style: getNodeStyle(type, label, assetReview),
+      data,
+      style: getNodeStyle(type, label, !!restrictedAssets[vertex]),
     });
   });
 
@@ -181,13 +176,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];
@@ -206,6 +209,8 @@ export const getSchemes = (vertex: string, labels: Certificate['serviceLabels'],
 };
 
 export const getNodeLabel = (type: string, desc: any) => {
+  if (!desc) return type;
+
   switch (type) {
     case 'FileSet':
       return (
@@ -254,6 +259,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':
@@ -267,7 +274,7 @@ export const getNodeDescription = (type: string, desc: any) => {
       return desc.Description;
 
     case 'Sample':
-      return `${desc['Visit Name']} (${desc['Visit Details']})`;
+      return desc['Visit Name'];
 
     case 'Specimen':
       return desc['Specimen Type'];

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,42 +24,37 @@ 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(() => ({}));
 
-const Graph = ({ type, certificate, replica, graph, children }: {
-  type: string,
+const Graph = ({ certificate, graph, children }: {
   certificate: Certificate,
   graph: {
     nodes: Array<Node>,
     edges: Array<Edge>,
   },
-  replica?: Replica,
   children: any,
 }) => {
   const {
-    setCertificate,
-    setReplica,
-    setType,
     nodesState,
     edgesState,
     nodeLayers,
     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;
 
@@ -76,10 +71,6 @@ const Graph = ({ type, certificate, replica, graph, children }: {
         edges: graph.edges,
       },
     });
-
-    setType(type);
-    setCertificate(certificate);
-    if (replica) setReplica(replica);
   }, [certificate]);
 
   return (
@@ -95,7 +86,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 />
@@ -115,12 +108,14 @@ const CertificateGraph = ({ type, certificate, replica, graph, children }: {
   replica?: Replica,
   children?: any,
 }) => (
-  <GraphProvider>
+  <GraphProvider
+    type={type}
+    certificate={certificate}
+    replica={replica}
+  >
     <div style={{ height: '75vh' }}>
       <Graph
-        type={type}
         certificate={certificate}
-        replica={replica}
         graph={graph}
       >
         {children}

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

@@ -1,14 +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 EditNode = (props: NodeProps) => {
+  const { customLabels, generatedLabels, isExecutable } = useGraph().certificate;
+  const { id } = props;
 
-  const [label, guid] = vertex.split('/');
+  const [label, guid] = id.split('/');
+  const description = customLabels[id] || generatedLabels[id];
   const link = getLabelLink(label, guid, isExecutable);
 
   return (
@@ -21,15 +24,8 @@ const EditNode = ({ data }: NodeProps) => {
       <div className="p-2" style={{ width: '250px' }}>
         <div className="label">
           <Label link={link} label={label} description={description} />
-
-          <EditNodeModalBtn
-            node={data}
-          />
-
-          <MaskMetadataButton
-            show={metadata[vertex]}
-            node={data}
-          />
+          <EditNodeModalBtn node={props} />
+          <MaskMetadataButton node={props} />
         </div>
 
         <Description label={label} description={description} />

package/src/components/Certificates/EditCertificate/{EditNodeModal.jsx → EditNodeModal.tsx}

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
+import { NodeProps } from 'reactflow';
 import { Button, ConfirmationModal, ResourceEditor, MessageStripe } from 'hise-components';
 import { useGraph } from '../../../state/GraphContext';
 import { getFormControls } from './helpers';
 
-export const EditNodeModalBtn = ({ node }) => {
+export const EditNodeModalBtn = ({ node }: {
+  node: NodeProps,
+}) => {
   const { setNode } = useGraph();
 
   return (
@@ -12,13 +15,13 @@ export const EditNodeModalBtn = ({ node }) => {
       key="edit-btn"
       color="link"
       className="text-info px-1 pt-0 ml-2"
-      icon="fas fa-edit"
-      noText
       onClick={() => {
-        node.toggleEditModal();
+        node.data.toggleEditModal();
         setNode(node);
       }}
-    />
+    >
+      EDIT
+    </Button>
   );
 };
 
@@ -28,21 +31,60 @@ const EditNodeModal = ({
   toggle,
   handleUpdate,
   refresh,
+}: {
+  isOpen: boolean,
+  loading: boolean,
+  toggle: Function,
+  handleUpdate: Function,
+  refresh: Function,
 }) => {
-  const { node } = useGraph();
-
-  const {
-    link, vertex, label, description, customLabels, metadata,
-  } = node;
+  const { node, certificate } = useGraph();
+  const { customLabels, generatedLabels, metadata } = certificate;
 
   const [error, setError] = useState('');
-
   const [form, setForm] = useState({});
   const clear = () => setForm({});
 
   useEffect(() => {
+    if (!node?.id) return;
+
+    const description = customLabels[node.id] || generatedLabels[node.id];
+
     if (description) setForm(description);
-  }, [isOpen, node, description]);
+  }, [node.id]);
+
+  if (!node?.id) return null;
+
+  const label = node?.id.split('/')[0];
+
+  const onFieldChange = (fields: Map<string, string>) => setForm(fields);
+
+  const onUpdate = () => {
+    const body = {
+      metadata,
+      customLabels: {
+        ...customLabels,
+        [node.id]: form,
+      },
+    };
+
+    handleUpdate(body).then((response: any) => {
+      if (response.status === 200) {
+        toggle();
+        clear();
+        refresh();
+        setError('');
+      } else {
+        setError(response.data.Message);
+      }
+    });
+  };
+
+  const onCancel = () => {
+    toggle();
+    clear();
+    setError('');
+  };
 
   return (
     <ConfirmationModal
@@ -54,24 +96,13 @@ const EditNodeModal = ({
       noCancel
       content={(
         <>
-          {link && (
-            <Button
-              to={link}
-              color="link"
-              icon="fas fa-long-arrow-alt-right"
-              target="_blank"
-            >
-              {vertex}
-            </Button>
-          )}
-
           {(error && !loading) && (
             <MessageStripe message={error} color="danger" dismissible={false} />
           )}
 
           <ResourceEditor
             className=""
-            onChange={(l) => setForm(l)}
+            onChange={onFieldChange}
             editedResource={form}
             controls={getFormControls(label, form)}
           />
@@ -88,11 +119,7 @@ const EditNodeModal = ({
             icon="fas fa-times"
             className="mx-2"
             noText
-            onClick={() => {
-              toggle();
-              clear();
-              setError('');
-            }}
+            onClick={onCancel}
           />
 
           <Button
@@ -100,27 +127,7 @@ const EditNodeModal = ({
             icon="fas fa-check"
             noText
             color="primary"
-            onClick={() => {
-              const body = {
-                metadata,
-                customLabels: {
-                  ...customLabels,
-                  [vertex]: form,
-                },
-              };
-
-              handleUpdate(body)
-                .then((response) => {
-                  if (response.status === 200) {
-                    toggle();
-                    clear();
-                    refresh();
-                    setError('');
-                  } else {
-                    setError(response.data.Message);
-                  }
-                });
-            }}
+            onClick={onUpdate}
           />
         </div>
       )}

package/src/components/Certificates/EditCertificate/MaskMetadataModal/EMRMaskingTables.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import MaskMetadataTable from './MaskMetadataTable';
+import { Metadata, MetadataType } from '../../../../@types/CertificateTypes';
+
+const EMRDropdown = ({ data, entry, setEntry }: {
+  data: { [key: string]: any }
+  entry: {
+    daysSinceFirstResearchVisit: string,
+  },
+  setEntry: Function,
+}) => (
+  <div className="text-center mt-3">
+    <div className="dropdown">
+      <button className="btn btn-secondary dropdown-toggle" type="button" id="emrDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
+        Visit Day
+        {' '}
+        {entry.daysSinceFirstResearchVisit}
+      </button>
+      <ul className="dropdown-menu" aria-labelledby="emrDropdownBtn">
+        {Object.entries(data).map(([i, emr]) => (
+          <li key={i}>
+            <button
+              type="button"
+              className="dropdown-item"
+              onClick={() => setEntry(i)}
+            >
+              Visit Day
+              {' '}
+              {emr.daysSinceFirstResearchVisit}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+);
+
+const EMRMaskingTables = ({ type, metadata, setMetadata }: {
+  type: MetadataType,
+  metadata: Metadata,
+  setMetadata: Function,
+}) => {
+  const emrData = metadata[type];
+
+  const [activeEntry, setActiveEntry] = useState(0);
+
+  if (!metadata) return null;
+  if (!emrData) return null;
+
+  return (
+    <>
+      <EMRDropdown
+        data={emrData}
+        entry={emrData[activeEntry]}
+        setEntry={setActiveEntry}
+      />
+
+      <MaskMetadataTable
+        type={type}
+        metadata={metadata}
+        setMetadata={setMetadata}
+        emrEntry={emrData[activeEntry]}
+        emrIndex={activeEntry}
+      />
+    </>
+  );
+};
+
+export default EMRMaskingTables;