diff --git a/extensions/lesion-tracker/src/components/MeasurementComparisonTable.css b/extensions/lesion-tracker/src/components/MeasurementComparisonTable.css
new file mode 100644
index 000000000..2148a2ee2
--- /dev/null
+++ b/extensions/lesion-tracker/src/components/MeasurementComparisonTable.css
@@ -0,0 +1,60 @@
+.MeasurementComparisonTable {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.MeasurementComparisonTable .displayTexts {
+ display: flex;
+}
+
+.MeasurementComparisonTable .displayTexts .measurementDisplayText {
+ flex: 1;
+}
+
+.MeasurementComparisonTable .measurementTableHeader {
+ display: flex;
+ position: relative;
+ padding-left: 38px;
+}
+
+.MeasurementComparisonTable .measurementTableHeader .warning-status {
+ left: 0;
+ top: 3px;
+ cursor: pointer;
+ width: 40px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+
+.MeasurementComparisonTable .measurementTableHeader .warning-status .warning-border {
+ padding: 2px 3px;
+ width: 30px;
+ height: 30px;
+}
+
+.MeasurementComparisonTable .measurementTableHeader .warning-status svg {
+ width: 20px;
+ height: 18px;
+}
+
+.MeasurementComparisonTable .measurementTableHeader .measurementTableHeaderItem {
+ position: relative;
+ flex: 1;
+}
+
+.MeasurementComparisonTable .generate-report {
+ background-color: #151a1f;
+ margin-top: 2px;
+ padding: 10px 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.MeasurementComparisonTable .generate-report button {
+ font-size: 12px;
+ color: black;
+ background-color: var(--active-color);
+}
diff --git a/extensions/lesion-tracker/src/components/MeasurementComparisonTable.js b/extensions/lesion-tracker/src/components/MeasurementComparisonTable.js
new file mode 100644
index 000000000..8218f2c55
--- /dev/null
+++ b/extensions/lesion-tracker/src/components/MeasurementComparisonTable.js
@@ -0,0 +1,151 @@
+import React from 'react';
+
+import { MeasurementTable } from '@ohif/ui';
+
+import './MeasurementComparisonTable.css';
+
+const overallWarnings = {
+ warningList: [
+ 'All measurements should have a location',
+ 'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
+ ],
+};
+
+const measurements = [
+ {
+ measurementId: '125',
+ measurementNumber: '125',
+ itemNumber: 1,
+ label: '(No description)',
+ data: [{ displayText: '12.5 x 4.6' }],
+ },
+ {
+ measurementId: '124',
+ measurementNumber: '124',
+ itemNumber: 2,
+ label: '(No description)',
+ data: [{ displayText: '32.5 x 1.6' }],
+ },
+ {
+ measurementId: '123',
+ measurementNumber: '123',
+ itemNumber: 3,
+ hasWarnings: true,
+ warningList: [
+ 'All measurements should have a location',
+ 'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
+ ],
+ label: '(No description)',
+ data: [{ displayText: '5.5 x 9.2' }],
+ },
+];
+
+const additionalFindings = [
+ {
+ measurementId: '122',
+ measurementNumber: '122',
+ itemNumber: 1,
+ hasWarnings: true,
+ warningList: [
+ 'All measurements should have a location',
+ 'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
+ ],
+ label: '(No description)',
+ data: [{ displayText: '23.5 x 9.2' }],
+ },
+ {
+ measurementId: '121',
+ measurementNumber: '121',
+ itemNumber: 2,
+ hasWarnings: true,
+ warningList: [
+ 'All measurements should have a location',
+ 'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
+ ],
+ label: '(No description)',
+ data: [{ displayText: '11.2 x 9.2' }],
+ },
+ {
+ measurementId: '120',
+ measurementNumber: '120',
+ itemNumber: 3,
+ label: '(No description)',
+ data: [{ displayText: '2.9 x 9.2' }],
+ },
+];
+
+const currentCollections = [
+ {
+ selectorAction: () => { },
+ maxMeasurements: 3,
+ groupName: 'Measurements',
+ measurements: measurements,
+ },
+ {
+ selectorAction: () => { },
+ groupName: 'Additional Findings',
+ measurements: additionalFindings,
+ },
+];
+
+const comparisonColletions = [
+ {
+ selectorAction: () => { },
+ maxMeasurements: 3,
+ groupName: 'Measurements',
+ measurements: measurements,
+ },
+ {
+ selectorAction: () => { },
+ groupName: 'Additional Findings',
+ measurements: additionalFindings,
+ },
+];
+
+const comparisonCollections = currentCollections.map((group, index) => {
+ return {
+ ...group,
+ measurements: group.measurements.map((measurement, measurementIndex) => {
+ const comparisonCollection = comparisonColletions[index].measurements;
+ if (measurementIndex < comparisonCollection.length) {
+ return {
+ ...measurement,
+ data: [
+ ...measurement.data,
+ ...comparisonCollection[measurementIndex].data,
+ ],
+ };
+ }
+ }),
+ };
+});
+
+const comparisonTimepoints = [
+ {
+ key: 'Current',
+ date: '10-Apr-18',
+ },
+ {
+ key: 'Comparison',
+ date: '15-Jun-18',
+ }
+];
+
+const MeasurementComparisonTable = () => {
+ return (
+
+
{ }}
+ onEditDescriptionClick={() => { }}
+ />
+
+
+
+
+ );
+};
+
+export default MeasurementComparisonTable;
diff --git a/extensions/lesion-tracker/src/index.js b/extensions/lesion-tracker/src/index.js
index 870175591..a521b2128 100644
--- a/extensions/lesion-tracker/src/index.js
+++ b/extensions/lesion-tracker/src/index.js
@@ -1,12 +1,4 @@
-// SEE: Async imports (code-splitting)
-// import asyncComponent from './asyncComponent.js';
-// import OHIFDicomPDFSopClassHandler from './OHIFDicomPDFSopClassHandler.js';
-
-// const ConnectedOHIFDicomPDFViewer = asyncComponent(() =>
-// import(
-// /* webpackChunkName: "ConnectedOHIFDicomPDFViewer" */ './ConnectedOHIFDicomPDFViewer'
-// )
-// );
+import MeasurementComparisonTable from './components/MeasurementComparisonTable';
export default {
/**
@@ -20,56 +12,21 @@ export default {
* @param {CommandsManager} params.commandsManager
*/
getPanelModule({ servicesManager, commandsManager }) {
- return undefined;
- // {
- // TODO:
- // - Right, alternative StudyBrowser
- // - Left, alternative Measurements Table
- // menuOptions: [
- // {
- // // A suggested icon
- // // Available icons determined by consuming app
- // icon: 'list',
- // // A suggested label
- // label: 'Magic',
- // // 'right' or 'left'
- // from: 'right',
- // // The target component to toggle open/close
- // target: 'target-component-id',
- // // Overrides `defaultContext`, if specified
- // context: ['ACTIVE_VIEWPORT:MAGIC'],
- // },
- // ],
- // components: [
- // {
- // id: 'target-component-id',
- // component: MyComponent,
- // },
- // ],
- // defaultContext: ['ROUTE:VIEWER'],
- // };
- },
-
- /**
- * @param {object} params
- * @param {ServicesManager} params.servicesManager
- * @param {CommandsManager} params.commandsManager
- * @returns Object
- */
- getToolbarModule({ servicesManager, commandsManager }) {
- // TODO: Zoom, Levels, Pan, More (see lesiontracker.ohif.org)
- // These may be driven through configuration of `cornerstone` extension instead of defined here
return {
- definitions: [
+ menuOptions: [
{
- id: 'say-hell-world',
- label: '🎉 HELLO WORLD 🎉',
- icon: 'exclamation-triangle',
- type: 'command',
- commandName: 'sayHelloWorld',
+ icon: 'th-list',
+ label: 'Measurements',
+ target: 'lesion-tracker-panel',
},
],
- defaultContext: 'VIEWER',
+ components: [
+ {
+ id: 'lesion-tracker-panel',
+ component: MeasurementComparisonTable,
+ },
+ ],
+ defaultContext: ['VIEWER']
};
},
@@ -79,23 +36,17 @@ export default {
* @param {CommandsManager} params.commandsManager
* @returns Object
*/
- getCommandsModule({ servicesManager }) {
- const { UINotificationService } = servicesManager.services;
- return {
- definitions: {
- sayHelloWorld: {
- commandFn: function() {
- console.log(UINotificationService);
- UINotificationService.show({
- title: 'What does a nosey pepper do?',
- message: 'Gets jalapeno business!',
- });
- },
- storeContexts: [],
- options: {},
- },
- },
- defaultContext: ['VIEWER'],
- };
+ getToolbarModule() {
+ return null;
+ },
+
+ /**
+ * @param {object} params
+ * @param {ServicesManager} params.servicesManager
+ * @param {CommandsManager} params.commandsManager
+ * @returns Object
+ */
+ getCommandsModule() {
+ return null;
},
};
diff --git a/platform/ui/src/components/measurementTable/MeasurementTable.js b/platform/ui/src/components/measurementTable/MeasurementTable.js
index 6225bff7c..47bbe1adf 100644
--- a/platform/ui/src/components/measurementTable/MeasurementTable.js
+++ b/platform/ui/src/components/measurementTable/MeasurementTable.js
@@ -184,10 +184,12 @@ class MeasurementTable extends Component {
};
getTimepointsHeader = () => {
- return this.props.timepoints.map((timepoint, index) => {
+ const { timepoints, t } = this.props;
+
+ return timepoints.map((timepoint, index) => {
return (
-
{this.props.t(timepoint.key)}
+
{t(timepoint.key)}
{timepoint.date}
);
diff --git a/platform/ui/src/components/measurementTable/MeasurementTable.styl b/platform/ui/src/components/measurementTable/MeasurementTable.styl
index 82a80c99e..42150d84f 100644
--- a/platform/ui/src/components/measurementTable/MeasurementTable.styl
+++ b/platform/ui/src/components/measurementTable/MeasurementTable.styl
@@ -84,7 +84,6 @@
position: relative
top: 2px
-
.tooltip-warning
&.in
opacity 1
diff --git a/platform/ui/src/components/measurementTable/MeasurementTableItem.js b/platform/ui/src/components/measurementTable/MeasurementTableItem.js
index 203c93ec6..bb0c3ada8 100644
--- a/platform/ui/src/components/measurementTable/MeasurementTableItem.js
+++ b/platform/ui/src/components/measurementTable/MeasurementTableItem.js
@@ -44,8 +44,8 @@ class MeasurementTableItem extends Component {
{this.getTableListItem()}
) : (
- {this.getTableListItem()}
- )}
+ {this.getTableListItem()}
+ )}
);
}
@@ -101,7 +101,7 @@ class MeasurementTableItem extends Component {
nsSeparator: '|',
})}
- {this.getDataDisplayText()}
+ {this.getDataDisplayText()}
{actionButtons}
diff --git a/platform/ui/src/components/tableList/TableList.styl b/platform/ui/src/components/tableList/TableList.styl
index f62c7444d..4c0c0d88d 100644
--- a/platform/ui/src/components/tableList/TableList.styl
+++ b/platform/ui/src/components/tableList/TableList.styl
@@ -25,6 +25,20 @@ $headerRowHeight = 63px
text-align: left
flex: 1;
+ .tableListHeaderSelector
+ cursor: pointer
+ max-width: 30px
+ padding-left: 2px
+ align-items: stretch
+ flex: 1
+ justify-content: space-around
+ text-align: center
+
+ svg
+ fill: #c1d8e3
+ height: 63px
+ max-width: 11px
+
.numberOfItems
color: var(--ui-sky-blue)
float: right