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