Start adding measurement table

extensions/default/src/MeasurementTable.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  MeasurementsPanel,
+  Button,
+  ButtonGroup,
+  Icon,
+  IconButton,
+} from '@ohif/ui';
+
+export default function MeasurementTable({ servicesManager, commandsManager }) {
+  console.warn(servicesManager);
+
+  const { MeasurementService } = servicesManager.services;
+
+  const actionButtons = (
+    <React.Fragment>
+      <ButtonGroup onClick={() => alert('Export')}>
+        <Button
+          className="text-white border-primary-main bg-black text-base py-2 px-2"
+          size="initial"
+          color="inherit"
+        >
+          Export
+        </Button>
+        <IconButton
+          className="bg-black border-primary-main px-2 text-white px-2"
+          color="inherit"
+          size="initial"
+        >
+          <Icon name="arrow-down" />
+        </IconButton>
+      </ButtonGroup>
+      <Button
+        className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
+        variant="outlined"
+        size="initial"
+        color="inherit"
+        onClick={() => alert('Create Report')}
+      >
+        Create Report
+      </Button>
+    </React.Fragment>
+  );
+
+  const descriptionData = {
+    date: '07-Sep-2010',
+    modality: 'CT',
+    description: 'CHEST/ABD/PELVIS W CONTRAST',
+  };
+
+  const activeMeasurementItem = 0;
+
+  const measurementTableData = {
+    title: 'Measurements',
+    amount: 10,
+    data: new Array(10).fill({}).map((el, i) => ({
+      id: i + 1,
+      label: 'Label short description',
+      displayText: '24.0 x 24.0 mm (S:4, I:22)',
+      isActive: activeMeasurementItem === i + 1,
+    })),
+    onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
+    onEdit: id => alert(`Edit: ${id}`),
+  };
+
+  return (
+    <MeasurementsPanel
+      descriptionData={descriptionData}
+      measurementTableData={measurementTableData}
+      actionButtons={actionButtons}
+    />
+  );
+}

extensions/default/src/getPanelModule.js

@@ -1,19 +1,13 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { StudyBrowser } from '@ohif/ui';
-
 import {
   dicomMetadataStore,
   useViewModel,
   displaySetManager,
 } from '@ohif/core';
 
-// Create map in local state from displaySetInstanceUids to thumbnails
+import MeasurementTable from './MeasurementTable.js';
-// Get thumbnail imageId from displaySet
+
-// When displaySetInstanceUids change, initiate async render into canvas
-// Get image data-uri from canvas offscreen
-// Set image data-uri into state (NOTE: This will probably end up in the fucking browser cache, NEED to find a way to prevent that from happening)
-// state triggers rerender
-//
 // TODO:
 // - No loading UI exists yet
 // - cancel promises when component is destroyed
@@ -253,7 +247,7 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
   return <StudyBrowser tabs={tabs} onClickStudy={memoOnClickStudy} />;
 }
 
-function getPanelModule({ getDataSources, commandsManager }) {
+function getPanelModule({ getDataSources, commandsManager, servicesManager }) {
   const wrappedStudyBrowserPanel = () => {
     return (
       <StudyBrowserPanel
@@ -263,6 +257,15 @@ function getPanelModule({ getDataSources, commandsManager }) {
     );
   };
 
+  const wrappedMeasurementPanel = () => {
+    return (
+      <MeasurementTable
+        commandsManager={commandsManager}
+        servicesManager={servicesManager}
+      />
+    );
+  };
+
   return [
     {
       name: 'seriesList',
@@ -276,7 +279,7 @@ function getPanelModule({ getDataSources, commandsManager }) {
       iconName: 'list-bullets',
       iconLabel: 'Measure',
       label: 'Measurements',
-      component: wrappedStudyBrowserPanel,
+      component: wrappedMeasurementPanel,
     },
   ];
 }