hise-flow-graphs 1.0.21 → 1.1.0

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

@@ -0,0 +1,105 @@
+import { Button } from 'hise-components';
+import * as R from 'ramda';
+import { useGraph } from '../../../../state/GraphContext';
+import { getKey, getValue } from '../../CertificateGraph/helpers';
+import { maskRow, maskEMRRow } from './helpers';
+import { labels } from './index';
+import { Metadata, MetadataType } from '../../../../@types/CertificateTypes';
+
+const MaskAllSectionButton = (props: {
+  update: Function,
+  currMetadata: object,
+  dataType: string,
+}) => {
+  const onMask = () => props.update({
+    ...props.currMetadata,
+    [props.dataType]: {},
+  });
+
+  return (
+    <Button
+      className="mt-3 mb-2 float-right"
+      onClick={onMask}
+    >
+      {`${labels[props.dataType]}: Mask All`}
+    </Button>
+  );
+};
+
+const Table = ({ children }: { children: React.ReactNode }) => (
+  <table className="table">
+    <thead>
+      <tr>
+        <th scope="col" />
+        <th scope="col">Variable</th>
+        <th scope="col">Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {children}
+    </tbody>
+  </table>
+);
+
+const MaskMetadataTable = ({
+  type, metadata, setMetadata, emrEntry, emrIndex,
+}: {
+  type: MetadataType,
+  metadata: Metadata,
+  setMetadata: Function,
+  emrEntry: { [key: string]: any },
+  emrIndex: number,
+}) => {
+  const { schemes } = useGraph().certificate;
+
+  const scheme = schemes[type];
+  const metadataEntries = Object.entries((type !== MetadataType['emrData']) ? metadata[type] : emrEntry.patientData);
+
+  const onMaskRow = (entry: Array<any>) => {
+    if (type === MetadataType['emrData']) {
+      maskEMRRow(entry[0], metadata, setMetadata, emrEntry, emrIndex);
+    } else {
+      maskRow(entry[0], metadata, type, setMetadata);
+    }
+  };
+
+  const getEntryRows = () => (
+    metadataEntries.map((entry) => (
+      <tr key={entry[0]}>
+        <td>
+          <Button
+            key={`${entry}-mask-btn`}
+            icon="fas fa-times"
+            color="link"
+            className="btn-sm text-danger"
+            noText
+            onClick={() => onMaskRow(entry)}
+          />
+        </td>
+        <td>
+          {getKey(entry[0], scheme, type)}
+        </td>
+        <td>
+          {getValue(entry[0], entry[1], scheme, type)}
+        </td>
+      </tr>
+    ))
+  );
+
+  return (
+    <>
+      <MaskAllSectionButton dataType={type} currMetadata={metadata} update={setMetadata} />
+
+      <Table>
+        {getEntryRows()}
+      </Table>
+    </>
+  );
+};
+
+export default MaskMetadataTable;
+
+MaskMetadataTable.defaultProps = {
+  emrEntry: null,
+  emrIndex: null,
+};

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

@@ -0,0 +1,41 @@
+import * as R from 'ramda';
+import { Metadata } from '../../../../@types/CertificateTypes';
+
+export const maskRow = (
+  variable: string,
+  currMetadata: { [key: string]: any },
+  dataType: string,
+  update: Function,
+) => {
+  const omitted = R.omit(
+    [variable],
+    currMetadata[dataType],
+  );
+
+  update({
+    ...currMetadata,
+    [dataType]: omitted,
+  });
+};
+
+export const maskEMRRow = (
+  variable: string,
+  currMetadata: Metadata,
+  update: Function,
+  emrEntry: {
+    [key: string]: any,
+  },
+  emrIndex: number,
+) => {
+  update({
+    ...currMetadata,
+    emrData: [
+      ...currMetadata?.emrData?.slice(0, emrIndex),
+      {
+        ...emrEntry,
+        patientData: R.omit([variable], emrEntry.patientData),
+      },
+      ...currMetadata?.emrData?.slice((Number(emrIndex) + 1)),
+    ],
+  });
+};

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

@@ -0,0 +1,167 @@
+import { useEffect, useState } from 'react';
+import { NodeProps } from 'reactflow';
+import * as R from 'ramda';
+import { Button, ConfirmationModal, HISETabs, MessageStripe } from 'hise-components';
+import MaskMetadataTable from './MaskMetadataTable';
+import EMRMaskingTables from './EMRMaskingTables';
+import { useGraph } from '../../../../state/GraphContext';
+import { Response } from '../../../../@types/GeneralTypes';
+import { MetadataType } from '../../../../@types/CertificateTypes';
+
+export const labels: { [key: string]: string } = {
+  labData: 'Lab Results',
+  surveyData: 'Survey Data',
+  emrData: 'EMR Data',
+  demographicsData: 'Demographics Data',
+};
+
+export const MaskMetadataButton = ({ node }: {
+  node: NodeProps,
+}) => {
+  const { certificate, setNode } = useGraph();
+  const { metadata } = certificate;
+  const nodeMetadata = metadata[node.id];
+
+  const isHidden = !nodeMetadata || R.isEmpty(nodeMetadata);
+
+  if (isHidden) return null;
+
+  return (
+    <Button
+      id="mask-btn"
+      key="mask-btn"
+      color="link"
+      className="text-warning px-1 pt-0"
+      onClick={() => {
+        node.data.toggleMaskModal();
+        setNode(node);
+      }}
+    >
+      MASK
+    </Button>
+  );
+};
+
+const MaskMetadataModal = ({
+  isOpen,
+  loading,
+  toggle,
+  handleUpdate,
+  refresh,
+}: {
+  isOpen: boolean,
+  loading: boolean,
+  toggle: Function,
+  handleUpdate: Function,
+  refresh: Function,
+}) => {
+  const { node, certificate, setNode } = useGraph();
+  const { metadata } = certificate;
+
+  const [metadataBody, setMetadataBody] = useState({});
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (R.isEmpty(metadata) || R.isEmpty(node)) return;
+
+    setMetadataBody(metadata[node.id]);
+  }, [node, metadata]);
+
+  const tabs = metadataBody ? Object.keys(metadataBody) : [];
+
+  const onCancel = () => {
+    toggle();
+    setNode({});
+    setError('');
+  };
+
+  const onUpdate = () => {
+    const body = {
+      metadata: {
+        ...metadata,
+        [node.id]: metadataBody,
+      },
+    };
+
+    handleUpdate(body).then((response: Response) => {
+      if (response.status === 200) {
+        toggle();
+        refresh();
+        setError('');
+      } else {
+        setError(response.data.Message);
+      }
+    });
+  };
+
+  return (
+    <ConfirmationModal
+      id="mask-metadata-modal"
+      scrollable
+      isOpen={isOpen}
+      onClose={toggle}
+      headerContent="Mask Node Metadata"
+      noSubmit
+      noCancel
+      content={(
+        <>
+          {(error && !loading) && (
+            <MessageStripe message={error} color="danger" dismissible={false} />
+          )}
+
+          <HISETabs
+            activeTab={tabs[0]}
+            tabs={tabs.map((tab) => {
+              const metadataType: MetadataType = tab as MetadataType;
+
+              return ({
+                key: tab,
+                label: labels[tab] || tab,
+                content: (tab === 'emrData')
+                  ? (
+                    <EMRMaskingTables
+                      type={metadataType}
+                      metadata={metadataBody}
+                      setMetadata={setMetadataBody}
+                    />
+                  ) : (
+                    <MaskMetadataTable
+                      type={metadataType}
+                      metadata={metadataBody}
+                      setMetadata={setMetadataBody}
+                    />
+                  ),
+              });
+            })}
+          />
+        </>
+      )}
+      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"
+            noText
+            className="mx-2"
+            onClick={onCancel}
+          />
+
+          <Button
+            id="ok-btn"
+            icon="fas fa-check"
+            color="primary"
+            onClick={onUpdate}
+          >
+            Update Metadata
+          </Button>
+        </div>
+      )}
+    />
+  );
+};
+
+export default MaskMetadataModal;

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

@@ -1,48 +1,6 @@
-import { Node } from 'reactflow';
-import * as R from 'ramda';
-import { getSchemes } from '../CertificateGraph/helpers';
-import { Certificate } from '../../../@types/CertificateTypes';
-
-export const getEditNodeData = (
-  vertices: Certificate['vertices'],
-  certificate: Certificate,
-  toggleEditModal: Function,
-  toggleMaskModal: Function,
-) => {
-  const data: { [key: string]: Node['data'] } = {};
-
-  const {
-    isExecutable,
-    generatedLabels,
-    customLabels,
-    serviceLabels,
-    schemes,
-    metadata,
-  } = certificate;
-
-  if (R.isEmpty(vertices) || R.isNil(vertices)) return data;
-
-  vertices.forEach((vertex: string) => {
-    const label = vertex.split('/')[0];
-    const description = customLabels[vertex] || generatedLabels[vertex];
-
-    data[vertex] = {
-      label,
-      vertex,
-      description,
-      customLabels,
-      metadata,
-      schemes: getSchemes(vertex, serviceLabels, schemes),
-      isExecutable,
-      toggleEditModal,
-      toggleMaskModal,
-    };
-  });
-
-  return data;
-};
-
 export const getFormControls = (label: string, description: object) => {
+  if (!description) return null;
+
   switch (label) {
     case 'Cohort':
     case 'IDE':

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

@@ -3,9 +3,14 @@ import CertificateGraph from '../CertificateGraph';
 import EditNodeModal from './EditNodeModal';
 import MaskMetadataModal from './MaskMetadataModal';
 import { getNodesAndEdges } from '../CertificateGraph/helpers';
-import { getEditNodeData } from './helpers';
+import { Certificate } from '../../../@types/CertificateTypes';
 
-const EditCertificate = ({ certificate, loading, handleUpdate, refresh }) => {
+const EditCertificate = ({ certificate, loading, handleUpdate, refresh }: {
+  certificate: Certificate,
+  loading: boolean,
+  handleUpdate: Function,
+  refresh: Function,
+}) => {
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const toggleEditModal = () => setIsEditModalOpen(!isEditModalOpen);
 
@@ -13,11 +18,11 @@ const EditCertificate = ({ certificate, loading, handleUpdate, refresh }) => {
   const toggleMaskModal = () => setIsMaskModalOpen(!isMaskModalOpen);
 
   const type = 'editNode';
-  const data = getEditNodeData(certificate.vertices, certificate, toggleEditModal, toggleMaskModal)
+  const data = { toggleEditModal, toggleMaskModal };
   const graph = getNodesAndEdges(
     certificate.vertices,
     certificate.edges,
-    certificate.assetReviews,
+    certificate.restrictedAssets,
     type,
     data,
   );

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

@@ -4,14 +4,10 @@ import { useGraph } from '../../../state/GraphContext';
 import { Label } from '../CertificateGraph/NodeAttributes';
 import CopyFileLayerNodeButton, { CopyFileLayerModal } from './CopyFileLayer';
 import { getNodesAndEdges } from '../CertificateGraph/helpers';
-import { getWorkspaceData, getWorkspaceNodesAndEdges } from '../WorkspaceCertificate/helpers';
-import { getData } from './helpers';
+import { getWorkspaceNodesAndEdges } from '../WorkspaceCertificate/helpers';
 import { Certificate } from '../../../@types/CertificateTypes';
 
 const FileLayerNode = (props: NodeProps) => {
-  const { id, data } = props;
-  const { label, description } = data;
-
   const {
     setNode,
     certificate,
@@ -22,8 +18,13 @@ const FileLayerNode = (props: NodeProps) => {
     nodeLayers,
     setNodeLayers,
   } = useGraph();
+  const { customLabels, generatedLabels } = certificate;
+
+  const { data } = props;
+  const label = props.id.split('/')[0];
+  const description = customLabels[props.id] || generatedLabels[props.id];
 
-  const subgraph = certificate.subgraphs[id];
+  const subgraph = certificate.subgraphs[props.id];
 
   const [_, setNodes] = nodesState;
   const [__, setEdges] = edgesState;
@@ -33,17 +34,6 @@ const FileLayerNode = (props: NodeProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const toggleModal = () => setIsModalOpen(!isModalOpen);
 
-  const getSubgraphData = (
-    vertices: Certificate['vertices'],
-    data: Node['data'],
-  ) => {
-    if (type === 'fileLayerNode') {
-      return getWorkspaceData(vertices, certificate, replica, data.refresh);
-    }
-
-    return getData(type, vertices, certificate, replica, data);
-  };
-
   const getSubgraph = (
     vertices: Certificate['vertices'],
     data: { [key: string]: Node['data'] },
@@ -52,6 +42,7 @@ const FileLayerNode = (props: NodeProps) => {
       return getWorkspaceNodesAndEdges(
         vertices,
         subgraph.edges,
+        replica,
         data,
       );
     }
@@ -59,7 +50,7 @@ const FileLayerNode = (props: NodeProps) => {
     return getNodesAndEdges(
       vertices,
       subgraph.edges,
-      certificate.assetReviews,
+      certificate.restrictedAssets,
       type,
       data,
     );
@@ -67,11 +58,9 @@ const FileLayerNode = (props: NodeProps) => {
 
   const onClick = () => {
     const subgraphVertices = Object.keys(subgraph.vertices);
-    const subgraphData = getSubgraphData(subgraphVertices, data);
-
     const subgraphNodesEdges = getSubgraph(
       subgraphVertices,
-      subgraphData,
+      data,
     );
 
     setNodes(subgraphNodesEdges.nodes);
@@ -118,7 +107,7 @@ const FileLayerNode = (props: NodeProps) => {
         />
 
         <CopyFileLayerNodeButton
-          vertexId={id}
+          vertexId={props.id}
           certificateId={certificate.id}
           type={type}
           isNodeHover={isHover}
@@ -126,7 +115,7 @@ const FileLayerNode = (props: NodeProps) => {
         />
 
         <CopyFileLayerModal
-          vertexId={id}
+          vertexId={props.id}
           certificateId={certificate.id}
           refresh={data.refresh}
           isOpen={isModalOpen}

package/src/components/Certificates/ReadCertificate/MetadataModal/MetadataTable.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { getKey, getValue } from '../../CertificateGraph/helpers';
+
+const Table = ({ entries, scheme, tab }: {
+  entries: Array<any>,
+  scheme: { [key: string]: any },
+  tab: string,
+}) => {
+  return (
+    <table className="table">
+      <tbody>
+        {entries.map(([key, value]) => (
+          <tr key={key}>
+            <th scope="row">
+              {getKey(key, scheme, tab)}
+            </th>
+            <td>{getValue(key, value, scheme, tab)}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const EMRDropdown = ({ activeEntry, setActiveEntry, emrData }: {
+  activeEntry: string,
+  setActiveEntry: Function,
+  emrData: Array<{
+    daysSinceFirstResearchVisit: string,
+  }>,
+}) => (
+  <div className="text-center">
+    <div className="btn-group mb-3">
+      <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        Visit Day
+        {' '}
+        {activeEntry}
+      </button>
+
+      <ul className="dropdown-menu">
+        {emrData.map((emr) => (
+          <li key={emr.daysSinceFirstResearchVisit}>
+            <button
+              type="button"
+              className="dropdown-item"
+              onClick={() => setActiveEntry(emr.daysSinceFirstResearchVisit)}
+            >
+              Visit Day
+              {' '}
+              {emr.daysSinceFirstResearchVisit}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+);
+
+const EMRTable = ({ emrData, scheme }: {
+  emrData: { [key: string]: any },
+  scheme: { [key: string]: any },
+}) => {
+  const [activeEntry, setActiveEntry] = useState(emrData[0].daysSinceFirstResearchVisit);
+
+  const emrDataValues = Object.values(emrData);
+  const emrMap = emrDataValues.reduce((accum, emr) => ({
+    ...accum, [emr.daysSinceFirstResearchVisit]: emr,
+  }), {});
+
+  const entries = Object.entries(emrMap[activeEntry].patientData);
+
+  return (
+    <React.Fragment>
+      <EMRDropdown
+        activeEntry={activeEntry}
+        setActiveEntry={setActiveEntry}
+        emrData={emrDataValues}
+      />
+
+      <Table entries={entries} scheme={scheme} tab="emrData" />
+    </React.Fragment>
+  );
+};
+
+const MetadataTable = ({ metadata, scheme, activeTab }: {
+  metadata: { [key: string]: any },
+  scheme: { [key: string]: any },
+  activeTab: string,
+}) => {
+  const tabMetadata = metadata[activeTab];
+  const tabScheme = scheme[activeTab];
+
+  const entries = Object.entries(tabMetadata || {});
+
+  if (activeTab === 'emrData') return <EMRTable emrData={tabMetadata} scheme={tabScheme} />;
+
+  return <Table entries={entries} scheme={tabScheme} tab={activeTab} />;
+};
+
+export default MetadataTable;

package/src/components/Certificates/ReadCertificate/MetadataModal/helpers.tsx

@@ -0,0 +1,46 @@
+import * as R from 'ramda';
+import { Metadata, MetadataType } from '../../../../@types/CertificateTypes';
+
+export const getHeader = (
+  label: string,
+  desc: {
+    [key: string]: string,
+  }) => {
+  if (label === 'Sample') return `${label} (${desc['Visit Name']})`;
+  return label;
+};
+
+export const getTabs = (metadata: Metadata) => {
+  const tabs: string[] = [];
+  const keys = Object.keys(metadata);
+
+  if (!keys.length) return tabs;
+
+  keys.forEach((key) => {
+    const metadataKey: MetadataType = key as MetadataType;
+    const data = metadata[metadataKey];
+
+    if (!R.isEmpty(data)) tabs.push(key);
+  });
+
+  return tabs;
+};
+
+export const hasMetadata = (
+  metadata: {
+    [key: string]: Metadata,
+  },
+  nodeId: string,
+) => {
+  const nodeMetadata = metadata[nodeId];
+
+  if (R.isNil(nodeMetadata) || R.isEmpty(nodeMetadata)) return false;
+
+  const typeEntries = Object.values(nodeMetadata);
+
+  const areAllEntriesEmpty = typeEntries.every((entry) => R.isEmpty(entry));
+
+  if (areAllEntriesEmpty) return false;
+
+  return true;
+};