hise-flow-graphs 1.0.21 → 1.1.0

package/webpack.config.js

@@ -1,60 +1,77 @@
+const webpack = require('webpack');
 const path = require('path');
+const dotenv = require('dotenv');
+dotenv.config();
 
-module.exports = {
-  mode: 'production',
-  entry: path.join(__dirname, 'src', 'index.ts'),
-  output: {
-    library: 'hise-flow-graphs',
-    libraryTarget: 'umd',
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'main.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              '@babel/preset-env',
-              '@babel/preset-react',
-            ],
+module.exports = (env) => {
+  const envFile = `.env.${env.ENVIRONMENT}`;
+
+  const envConfig = dotenv.config({ path: envFile }).parsed;
+
+  const envKeys = Object.keys(envConfig).reduce((prev, next) => {
+    prev[`process.env.${next}`] = JSON.stringify(envConfig[next]);
+    return prev;
+  }, {});
+
+  return {
+    mode: 'production',
+    entry: path.join(__dirname, 'src', 'index.ts'),
+    output: {
+      library: 'hise-flow-graphs',
+      libraryTarget: 'umd',
+      path: path.resolve(__dirname, 'dist'),
+      filename: 'main.js',
+    },
+    plugins: [
+      new webpack.DefinePlugin(envKeys),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                '@babel/preset-react',
+              ],
+            }
           }
-        }
-      },
-      {
-        test: /\.(ts|tsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'ts-loader',
-        }
+        },
+        {
+          test: /\.(ts|tsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'ts-loader',
+          }
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+      ]
+    },
+    resolve: {
+      extensions: ['.js', '.jsx', '.tsx', '.ts'],
+    },
+    externals: {
+      react: {
+        umd: 'react',
+        commonjs: 'react',
+        commonjs2: 'react',
       },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+      'react-dom': {
+        umd: 'react-dom',
+        commonjs: 'react-dom',
+        commonjs2: 'react-dom',
       },
-    ]
-  },
-  resolve: {
-    extensions: ['.js', '.jsx', '.tsx', '.ts'],
-  },
-  externals: {
-    react: {
-      umd: 'react',
-      commonjs: 'react',
-      commonjs2: 'react',
-    },
-    'react-dom': {
-      umd: 'react-dom',
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
+      'react/jsx-runtime': {
+        umd: 'react/jsx-runtime',
+        commonjs: 'react/jsx-runtime',
+        commonjs2: 'react/jsx-runtime',
+      }
     },
-    'react/jsx-runtime': {
-      umd: 'react/jsx-runtime',
-      commonjs: 'react/jsx-runtime',
-      commonjs2: 'react/jsx-runtime',
-    }
-  },
-};
+  };
+}

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

@@ -1,299 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import * as R from 'ramda';
-import { Button, ConfirmationModal, HISETabs, MessageStripe } from 'hise-components';
-import { useGraph } from '../../../state/GraphContext';
-import { getKey, getValue } from '../CertificateGraph/helpers';
-
-const labels = {
-  labData: 'Lab Results',
-  surveyData: 'Survey Data',
-  emrData: 'EMR Data',
-  demographicsData: 'Demographics Data',
-};
-
-const MaskAllSectionButton = (props) => {
-  return (
-    <Button
-      className="mt-3 mb-2 float-right"
-      onClick={() => props.update({
-        ...props.currMetadata,
-        [props.dataType]: {},
-      })}
-    >
-      {labels[props.dataType]}
-      : Mask All
-    </Button>
-  );
-};
-
-const maskRow = (variable, currMetadata, dataType, update) => {
-  const omitted = R.omit(
-    [variable],
-    currMetadata[dataType],
-  );
-
-  update({
-    ...currMetadata,
-    [dataType]: omitted,
-  });
-};
-
-const maskEMRRow = (variable, currMetadata, update, emrEntry, emrIndex) => update({
-  ...currMetadata,
-  emrData: [
-    ...currMetadata.emrData.slice(0, emrIndex),
-    {
-      ...emrEntry,
-      patientData: R.omit([variable], emrEntry.patientData),
-    },
-    ...currMetadata.emrData.slice((Number(emrIndex) + 1)),
-  ],
-});
-
-const MaskMetadataTable = ({
-  metadata, scheme, tab, setMetadata, emrEntry, emrIndex,
-}) => {
-  if (R.isNil(metadata) || R.isEmpty(metadata)) return null;
-
-  const items = Object.entries((tab !== 'emrData') ? metadata[tab] : emrEntry.patientData);
-
-  return (
-    <>
-      <MaskAllSectionButton dataType={tab} currMetadata={metadata} update={setMetadata} />
-
-      <table className="table">
-        <thead>
-          <tr>
-            <th scope="col" />
-            <th scope="col">Variable</th>
-            <th scope="col">Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          {items.map((item) => (
-            <tr key={item.variable}>
-              <td>
-                <Button
-                  key={`${item}-mask-btn`}
-                  icon="fas fa-times"
-                  color="link"
-                  className="btn-sm text-danger"
-                  noText
-                  onClick={() => {
-                    if (tab === 'emrData') {
-                      maskEMRRow(item[0], metadata, setMetadata, emrEntry, emrIndex);
-                    } else {
-                      maskRow(item[0], metadata, tab, setMetadata);
-                    }
-                  }}
-                />
-              </td>
-              <td>
-                {getKey(item[0], scheme, tab)}
-              </td>
-              <td>
-                {getValue(item[0], item[1], scheme, tab)}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </>
-  );
-};
-
-MaskMetadataTable.defaultProps = {
-  emrEntry: null,
-  emrIndex: null,
-};
-
-const EMRDropdown = ({ data, entry, setEntry }) => (
-  <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 EMRMasking = ({ metadata, tab, setMetadata }) => {
-  const emrData = metadata[tab];
-
-  const [activeEntry, setActiveEntry] = React.useState(0);
-
-  return (
-    <>
-      <EMRDropdown
-        data={emrData}
-        entry={emrData[activeEntry]}
-        setEntry={setActiveEntry}
-      />
-
-      <MaskMetadataTable
-        tab={tab}
-        metadata={metadata}
-        setMetadata={setMetadata}
-        emrEntry={emrData[activeEntry]}
-        emrIndex={activeEntry}
-      />
-    </>
-  );
-};
-
-export const MaskMetadataButton = ({ show, node }) => {
-  const { setNode } = useGraph();
-
-  if (R.isNil(show) || R.isEmpty(show)) return null;
-
-  return (
-    <Button
-      id="mask-btn"
-      key="mask-btn"
-      color="link"
-      className="text-warning px-1 pt-0"
-      icon="fas fa-eye-slash"
-      noText
-      onClick={() => {
-        node.toggleMaskModal();
-        setNode(node);
-      }}
-    />
-  );
-};
-
-const MaskMetadataModal = ({
-  isOpen,
-  loading,
-  toggle,
-  handleUpdate,
-  refresh,
-}) => {
-  const { node } = useGraph();
-
-  const { vertex, schemes, metadata } = node;
-
-  const nodeMetadata = (metadata || {})[vertex];
-
-  if (R.isNil(nodeMetadata) || R.isEmpty(nodeMetadata)) return null;
-
-  const [error, setError] = useState('');
-
-  const [md, setMd] = useState({});
-
-  useEffect(() => {
-    if (metadata) setMd(metadata[vertex]);
-  }, [metadata, node, isOpen]);
-
-  const tabs = Object.keys(nodeMetadata);
-
-  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) => {
-              return ({
-                key: tab,
-                label: labels[tab] || tab,
-                content: (tab === 'emrData')
-                  ? (
-                    <EMRMasking
-                      tab={tab}
-                      metadata={md}
-                      setMetadata={setMd}
-                      scheme={schemes[tab]}
-                    />
-                  ) : (
-                    <MaskMetadataTable
-                      tab={tab}
-                      metadata={md}
-                      setMetadata={setMd}
-                      scheme={schemes[tab]}
-                    />
-                  ),
-              });
-            })}
-          />
-        </>
-      )}
-      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={() => {
-              toggle();
-              setMd({});
-              setError('');
-            }}
-          />
-
-          <Button
-            id="ok-btn"
-            icon="fas fa-check"
-            color="primary"
-            onClick={() => {
-              const body = {
-                metadata: {
-                  ...metadata,
-                  [vertex]: md,
-                },
-              };
-
-              handleUpdate(body)
-                .then((response) => {
-                  if (response.status === 200) {
-                    toggle();
-                    refresh();
-                    setError('');
-                  } else {
-                    setError(response.data.Message);
-                  }
-                });
-            }}
-          >
-            Update Metadata
-          </Button>
-        </div>
-      )}
-    />
-  );
-};
-
-export default MaskMetadataModal;

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

@@ -1,31 +0,0 @@
-import { Node } from 'reactflow';
-import { getReadNodeData } from '../ReadCertificate/helpers';
-import { getEditNodeData } from '../EditCertificate/helpers';
-import { getReviewNodeData } from '../ReviewCertificate/helpers';
-import { Certificate, Replica } from '../../../@types/CertificateTypes';
-import { getWorkspaceData } from '../WorkspaceCertificate/helpers';
-
-export const getData = (
-  type: string,
-  vertices: Array<string>,
-  certificate: Certificate,
-  replica: Replica,
-  nodeData: Node['data']
-) => {
-  switch (type) {
-    case 'readNode':
-      return getReadNodeData(vertices, certificate, nodeData.toggle);
-
-    case 'editNode':
-      return getEditNodeData(vertices, certificate, nodeData.toggleEditModal, nodeData.toggleMaskModal);
-
-    case 'reviewNode':
-      return getReviewNodeData(vertices, certificate, nodeData.toggleReviewModal, nodeData.toggleMetadataModal);
-
-    case 'fileLayerNode':
-      return getWorkspaceData(vertices, certificate, replica, nodeData.refresh);
-
-    default:
-      return {};
-  }
-};

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

@@ -1,22 +0,0 @@
-export const getHeader = (label, desc) => {
-  if (label === 'Sample') return `${label} (${desc['Visit Name']} - ${desc['Visit Details']})`;
-  return label;
-};
-
-export const getTabs = (metadata) => {
-  const tabs = [];
-
-  if (!metadata) return tabs;
-
-  const keys = Object.keys(metadata);
-
-  if (!keys.length) return tabs;
-
-  keys.forEach((key) => {
-    const data = metadata[key];
-
-    if (data.length || Object.keys(data).length) tabs.push(key);
-  });
-
-  return tabs;
-};

package/src/components/Certificates/ReadCertificate/MetadataModal/index.jsx

@@ -1,169 +0,0 @@
-import React from 'react';
-import { Button, ConfirmationModal } from 'hise-components';
-import { useGraph } from '../../../../state/GraphContext';
-import { getHeader, getTabs } from './helpers';
-import { getKey, getValue } from '../../CertificateGraph/helpers';
-
-const EMRDropdown = ({ activeEntry, setActiveEntry, emrData }) => (
-  <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 }) => {
-  const [activeEntry, setActiveEntry] = React.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 }) => {
-  if (!metadata) return null;
-
-  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} />;
-};
-
-const Table = ({ entries, scheme, tab }) => {
-  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 Tabs = ({ tabs, activeTab, setActiveTab }) => (
-  <ul className="nav justify-content-center">
-    {tabs.map((tab) => (
-      <li className="nav-item" key={tab}>
-        <button
-          type="button"
-          className={`nav-link btn btn-link ${(activeTab === tab) && 'font-weight-bold'}`}
-          onClick={() => setActiveTab(tab)}
-        >
-          {tab.split(/(?=[A-Z])/).join(' ').toUpperCase()}
-        </button>
-      </li>
-    ))}
-  </ul>
-);
-
-export const MetadataButton = ({ node }) => {
-  const { setNode } = useGraph();
-
-  const { metadata, toggleMetadataModal } = node;
-
-  const hasMetadata = getTabs(metadata).length;
-
-  if (!hasMetadata || !toggleMetadataModal) return null;
-
-  return (
-    <Button
-      id="metadata-btn"
-      key="metadata-btn"
-      color="link"
-      className="p-0"
-      icon="fas fa-bars"
-      noText
-      onClick={() => {
-        toggleMetadataModal();
-        setNode(node);
-      }}
-    />
-  );
-};
-
-const MetadataModal = ({ isOpen, toggle }) => {
-  const { node } = useGraph();
-  const { metadata, schemes, label, description } = node;
-
-  const header = getHeader(label, description)
-  const tabs = getTabs(metadata);
-
-  const [activeTab, setActiveTab] = React.useState('');
-
-  React.useEffect(() => {
-    if (!activeTab) setActiveTab(tabs[0]);
-  }, [tabs]);
-
-  React.useEffect(() => setActiveTab(tabs[0]), [header]);
-
-  return (
-    <ConfirmationModal
-      scrollable
-      isOpen={isOpen}
-      onClose={toggle}
-      headerContent={header}
-      noSubmit
-      cancelButtonText="Close"
-      content={(
-        <>
-          <Tabs tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />
-
-          <div className="mt-2">
-            <MetadataTable
-              metadata={metadata}
-              scheme={schemes}
-              activeTab={activeTab}
-            />
-          </div>
-        </>
-      )}
-    />
-  );
-};
-
-export default MetadataModal;

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

@@ -1,38 +0,0 @@
-import { Node } from 'reactflow';
-import * as R from 'ramda';
-import { getSchemes } from '../CertificateGraph/helpers';
-import { Certificate } from '../../../@types/CertificateTypes';
-
-export const getReadNodeData = (
-  vertices: Certificate['vertices'],
-  certificate: Certificate,
-  toggleMetadataModal: Function,
-) => {
-  const data: { [key: string]: Node['data'] } = {};
-
-  const {
-    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,
-      description,
-      customLabels,
-      metadata: metadata ? metadata[vertex] : null,
-      schemes: getSchemes(vertex, serviceLabels, schemes),
-      toggleMetadataModal,
-    };
-  });
-
-  return data;
-};