hise-flow-graphs 1.0.0

package/dist/main.js.LICENSE.txt

@@ -0,0 +1,21 @@
+/*! For license information please see main.js.LICENSE.txt */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "hise-flow-graphs",
+  "version": "1.0.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"
+  },
+  "dependencies": {
+    "bootstrap": "5.1.3",
+    "dagre": "^0.8.5",
+    "ramda": "0.27.1",
+    "reactflow": "^11.8.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.47.0",
+    "eslint-plugin-react": "^7.33.1",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.0.0"
+  }
+}

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

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

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

@@ -0,0 +1,239 @@
+import React from 'react';
+import dagre from 'dagre';
+
+export const getEdges = (edges) => (
+  Object.entries(edges || {})
+    .reduce((all, [source, targets]) => (
+      [
+        ...all,
+        ...targets.map((target) => ({
+          id: `${source}-${target}`,
+          source,
+          target,
+          type: 'smoothstep',
+          animated: true,
+        })),
+      ]
+    ), [])
+);
+
+const nodeWidth = 200;
+const nodeHeight = 75;
+
+export const getLayoutedElements = (nodes, edges, direction = 'LR') => {
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  const isHorizontal = direction === 'LR';
+
+  dagreGraph.setGraph({ rankdir: direction });
+
+  nodes.forEach((node) => {
+    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  });
+
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  nodes.forEach((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+
+    node.targetPosition = isHorizontal ? 'left' : 'top';
+    node.sourcePosition = isHorizontal ? 'right' : 'bottom';
+
+    // We are shifting the dagre node position (anchor=center center) to the top left
+    // so it matches the React Flow node anchor point (top left).
+    node.position = {
+      x: nodeWithPosition.x - nodeWidth / 2,
+      y: nodeWithPosition.y - nodeHeight / 2,
+    };
+
+    return node;
+  });
+
+  return { nodes, edges };
+};
+
+export const getStyle = (type) => {
+  const style = {
+    'background-color': 'white',
+    'border-radius': '3px',
+  };
+
+  switch (type) {
+    case 'FileSet':
+    case 'Visualization':
+      style['background-color'] = 'yellow';
+      style.border = '4px solid';
+      break;
+
+    case 'IngestReceipt':
+      style.border = '2px solid #EE7733';
+      break;
+
+    case 'File':
+      style.border = '2px solid #33BBEE';
+      break;
+
+    case 'IDE':
+      style.border = '2px solid #882255';
+      break;
+
+    case 'Process':
+      style.border = '2px solid #009988';
+      break;
+
+    case 'Trace':
+      style.border = '2px solid #999933';
+      break;
+
+    case 'Sample':
+    case 'Subject':
+    case 'Cohort':
+      style.border = '2px solid #BBBBBB';
+      break;
+
+    default:
+      style.border = '2px solid #eee';
+      break;
+  }
+
+  return style;
+};
+
+export const getSchemes = (vert, labels, schemes) => {
+  const nodeSchemes = {};
+
+  if (!labels || !schemes) return nodeSchemes;
+
+  const schemeLabels = labels[vert];
+
+  Object.entries(schemeLabels).forEach(([key, val]) => {
+    if (key === 'Survey Data Scheme Key') {
+      nodeSchemes.surveyData = schemes[val];
+    }
+
+    if (key === 'EMR Scheme Key') {
+      nodeSchemes.emrData = schemes[val];
+    }
+
+    if (key === 'Lab Data Scheme Key') {
+      nodeSchemes.labData = schemes[val];
+    }
+  });
+
+  return nodeSchemes;
+};
+
+export const getNodeLabel = (type, desc) => {
+  switch (type) {
+    case 'FileSet':
+    case 'Visualization':
+      return (
+        <React.Fragment>
+          { type }
+          <br />
+          (
+          { desc.Title }
+          )
+        </React.Fragment>
+      );
+
+    case 'IngestReceipt':
+      return 'Data Ingested';
+
+    case 'Process':
+    case 'File':
+    case 'Subject':
+    case 'IDE':
+    case 'Trace':
+    case 'Sample':
+    case 'Cohort':
+      return type;
+
+    default:
+      return null;
+  }
+};
+
+export const getNodeDescription = (type, desc) => {
+  switch (type) {
+    case 'FileSet':
+    case 'Visualization':
+      return desc.Description;
+
+    case 'File':
+      return desc['File Type'];
+
+    case 'IDE':
+    case 'IngestReceipt':
+    case 'Process':
+      return desc.Type;
+
+    case 'Trace':
+    case 'Cohort':
+      return desc.Description;
+
+    case 'Sample':
+      return `${desc['Visit Name']} (${desc['Visit Details']})`;
+
+      // case 'Subject':
+
+    default:
+      return null;
+  }
+};
+
+export const getLabelLink = (type, guid, isExecutable) => {
+  if (isExecutable === 'false') return null;
+
+  switch (type) {
+    case 'Visualization':
+      return `/collaboration/visualization/${guid}`;
+
+    case 'IngestReceipt':
+      return `/ingest-receipts/${guid}`;
+
+    case 'File':
+      return `/files/${guid}`;
+
+    case 'Process':
+      return `/processes/${guid}`;
+
+    case 'Sample':
+      return `/samples/${guid}`;
+
+    case 'Subject':
+      return `/subjects/${guid}`;
+
+    case 'Cohort':
+      return `/cohorts/${guid}`;
+
+    default:
+      return null;
+  }
+};
+
+export const getKey = (key, scheme, tab) => {
+  if (!scheme) return key;
+  if (tab === 'demographicsData') return `${key[0].toUpperCase()}${key.split(/(?=[A-Z])/).join(' ').slice(1)}`;
+
+  const definition = scheme[key];
+  if (!definition) return key;
+  if (definition.friendlyName) return definition.friendlyName;
+
+  return key;
+};
+
+export const getValue = (key, value, scheme, tab) => {
+  if (!scheme) return value;
+
+  const definition = scheme[key];
+  if (!definition || tab === 'demographicsData') return value;
+  if (definition.units) return `${value} ${definition.units}`;
+
+  return value;
+};

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

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import dagre from 'dagre';
+import ReactFlow, {
+  Controls,
+  Background,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  ConnectionLineType,
+} from 'reactflow';
+import ReadNode from '../ReadCertificate/ReadNode';
+import EditNode from '../EditCertificate/EditNode';
+import ReviewNode from '../ReviewCertificate/ReviewNode';
+import 'reactflow/dist/style.css';
+import './style.css';
+
+const nodeTypes = {
+  readNode: ReadNode,
+  editNode: EditNode,
+  reviewNode: ReviewNode,
+};
+
+const dagreGraph = new dagre.graphlib.Graph();
+dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+const CertificateGraph = (props) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  useEffect(() => {
+    setNodes(props.nodes);
+    setEdges(props.edges);
+  }, [props]);
+
+  return (
+    <div className="layoutflow">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        nodeTypes={nodeTypes}
+        fitView
+      >
+        <Controls />
+        <Background />
+        <MiniMap />
+      </ReactFlow>
+    </div>
+  );
+};
+
+export default CertificateGraph;

package/src/components/Certificates/CertificateGraph/style.css

@@ -0,0 +1,29 @@
+.layoutflow {
+  flex-grow: 1;
+  position: relative;
+  height: 100%;
+}
+
+.layoutflow .controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 10;
+  font-size: 12px;
+}
+
+.layoutflow .controls button:first-child {
+  margin-right: 10px;
+}
+
+/* reactflow styling */
+
+.react-flow__node {
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+
+  .label {
+    font-weight: 800;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Handle, Position } from 'reactflow';
+import { MaskMetadataButton } from './MaskMetadataModal';
+import { Description, Label } from '../CertificateGraph/NodeAttributes';
+import { EditNodeModalBtn } from './EditNodeModal';
+import { getLabelLink } from '../CertificateGraph/helpers';
+
+const EditNode = ({ data }) => {
+  const { vert, description, metadata, isExecutable } = data;
+
+  const [label, guid] = data.vert.split('/');
+  const link = getLabelLink(label, guid, isExecutable);
+
+  return (
+    <>
+      <Handle
+        type="target"
+        position={Position.Left}
+      />
+
+      <div className="p-2" style={{ width: '200px' }}>
+        <div className="label">
+          <Label link={link} label={label} description={description} />
+
+          <EditNodeModalBtn
+            node={data}
+          />
+
+          <MaskMetadataButton
+            show={metadata[vert]}
+            node={data}
+          />
+        </div>
+
+        <Description label={label} description={description} />
+      </div>
+
+      <Handle
+        type="source"
+        position={Position.Right}
+      />
+    </>
+  );
+};
+
+export default EditNode;

package/src/components/Certificates/EditCertificate/EditNodeModal.jsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import { Button, ConfirmationModal, ResourceEditor, MessageStripe } from 'hise-components';
+import { useNode } from '../../../state/NodeContext';
+import { getFormControls } from './helpers';
+
+export const EditNodeModalBtn = ({ node }) => {
+  const { setNode } = useNode();
+
+  return (
+    <Button
+      id="edit-btn"
+      key="edit-btn"
+      color="link"
+      className="text-info px-1 pt-0 ml-2"
+      icon="fas fa-edit"
+      noText
+      onClick={() => {
+        node.toggleEditModal();
+        setNode(node);
+      }}
+    />
+  );
+};
+
+const EditNodeModal = ({
+  isOpen,
+  loading,
+  toggle,
+  handleUpdate,
+  refresh,
+}) => {
+  const { node } = useNode();
+
+  const {
+    link, vert, description, customLabels, metadata,
+  } = node;
+
+  const [error, setError] = useState('');
+
+  const [form, setForm] = useState({});
+  const clear = () => setForm({});
+
+  useEffect(() => {
+    if (description) setForm(description);
+  }, [isOpen, node, description]);
+
+  return (
+    <ConfirmationModal
+      scrollable
+      isOpen={isOpen}
+      onClose={toggle}
+      headerContent="Edit Node Label"
+      noSubmit
+      noCancel
+      content={(
+        <>
+          { link && (
+            <Button
+              to={link}
+              color="link"
+              icon="fas fa-long-arrow-alt-right"
+              target="_blank"
+            >
+              { vert }
+            </Button>
+          )}
+
+          { (error && !loading) && (
+            <MessageStripe message={error} color="danger" dismissible={false} />
+          )}
+          
+          <ResourceEditor
+            className=""
+            onChange={(l) => setForm(l)}
+            editedResource={form}
+            controls={getFormControls(form)}
+          />
+        </>
+      )}
+      customFooter={(
+        <div className="float-right">
+          { loading && (
+            <div className="spinner-grow spinner-grow-sm text-warning" role="status" />
+          )}
+
+          <Button
+            id="cancel-btn"
+            icon="fas fa-times"
+            className="mx-2"
+            noText
+            onClick={() => {
+              toggle();
+              clear();
+              setError('');
+            }}
+          />
+
+          <Button
+            id="ok-btn"
+            icon="fas fa-check"
+            noText
+            color="primary"
+            onClick={() => {
+              const body = {
+                metadata,
+                customLabels: {
+                  ...customLabels,
+                  [vert]: form,
+                },
+              };
+
+              handleUpdate(body)
+                .then(([r, d]) => {
+                  if (r.ok) {
+                    toggle();
+                    clear();
+                    refresh();
+                    setError('');
+                  } else {
+                    setError(d.Message);
+                  }
+                });
+            }}
+          />
+        </div>
+      )}
+    />
+  );
+};
+
+export default EditNodeModal;