diff --git a/extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js b/extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js index e787d784f..37adbf11d 100644 --- a/extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js +++ b/extensions/ohif-vtk-extension/src/ConnectedToolbarSection.js @@ -1,21 +1,23 @@ import { connect } from 'react-redux'; import { ToolbarSection } from 'react-viewerbase'; -import OHIF from 'ohif-core' +import OHIF from 'ohif-core'; const { setToolActive } = OHIF.redux.actions; -const Icons = 'icons.svg'; +const Icons = `${window.config.routerBasename}/icons.svg`; const mapStateToProps = state => { const activeButton = state.tools.buttons.find(tool => tool.active === true); return { - buttons: [ { - command: 'Rotate', - type: 'tool', - text: 'Rotate', - svgUrl: `${Icons}#3d-rotate`, - active: true - }], + buttons: [ + { + command: 'Rotate', + type: 'tool', + text: 'Rotate', + svgUrl: `${Icons}#3d-rotate`, + active: true + } + ], activeCommand: 'Rotate' }; }; diff --git a/generateStaticSite.sh b/generateStaticSite.sh index c01d50020..6ad76a0f6 100755 --- a/generateStaticSite.sh +++ b/generateStaticSite.sh @@ -47,14 +47,3 @@ export ROOT_URL=$DEPLOY_PRIME_URL/demo mkdir ./docs/latest/_book/demo/ yarn install yarn build:web:ci - -# OLD DEPLOY -# cd example -# yarn install -# yarn run prepare -# sed -i "s,http://localhost:5000,${ROOT_URL},g" index.html -# sed -i 's,"routerBasename": "/","routerBasename": "/demo",g' index.html -# rm -rf node_modules - -# NEW DEPLOY -# cpx 'build/*' docs/latest/_book/demo --verbose diff --git a/src/App.js b/src/App.js index 0aa7b9d94..233d20ecb 100644 --- a/src/App.js +++ b/src/App.js @@ -15,11 +15,11 @@ import OHIFDicomHtmlExtension from 'ohif-dicom-html-extension' import OHIFDicomMicroscopyExtension from 'ohif-dicom-microscopy-extension' import { OidcProvider, reducer as oidcReducer } from 'redux-oidc' import { + getDefaultToolbarButtons, getUserManagerForOpenIdConnectClient, initWebWorkers, } from './utils/index.js' -const Icons = 'icons.svg' const { ExtensionManager } = OHIF.extensions const { reducers, localStorage } = OHIF.redux @@ -35,90 +35,6 @@ store.subscribe(() => { }) }) -const defaultButtons = [ - { - command: 'StackScroll', - type: 'tool', - text: 'Stack Scroll', - svgUrl: `${Icons}#icon-tools-stack-scroll`, - active: false, - }, - { - command: 'Zoom', - type: 'tool', - text: 'Zoom', - svgUrl: `${Icons}#icon-tools-zoom`, - active: false, - }, - { - command: 'Wwwc', - type: 'tool', - text: 'Levels', - svgUrl: `${Icons}#icon-tools-levels`, - active: true, - }, - { - command: 'Pan', - type: 'tool', - text: 'Pan', - svgUrl: `${Icons}#icon-tools-pan`, - active: false, - }, - { - command: 'Length', - type: 'tool', - text: 'Length', - svgUrl: `${Icons}#icon-tools-measure-temp`, - active: false, - }, - /*{ - command: 'Annotate', - type: 'tool', - text: 'Annotate', - svgUrl: `${Icons}#icon-tools-measure-non-target`, - active: false - },*/ - { - command: 'Angle', - type: 'tool', - text: 'Angle', - iconClasses: 'fa fa-angle-left', - active: false, - }, - { - command: 'Bidirectional', - type: 'tool', - text: 'Bidirectional', - svgUrl: `${Icons}#icon-tools-measure-target`, - active: false, - }, - { - command: 'Brush', - type: 'tool', - text: 'Brush', - iconClasses: 'fa fa-circle', - active: false, - }, - { - command: 'FreehandMouse', - type: 'tool', - text: 'Freehand', - iconClasses: 'fa fa-star', - active: false, - }, - { - command: 'reset', - type: 'command', - text: 'Reset', - svgUrl: `${Icons}#icon-tools-reset`, - active: false, - }, -] - -const buttonsAction = OHIF.redux.actions.setAvailableButtons(defaultButtons) - -store.dispatch(buttonsAction) - const availableTools = [ { name: 'Pan', mouseButtonMasks: [1, 4] }, { name: 'Zoom', mouseButtonMasks: [1, 2] }, @@ -181,6 +97,13 @@ class App extends Component { constructor(props) { super(props) + // + const defaultButtons = getDefaultToolbarButtons(this.props.routerBasename) + const buttonsAction = OHIF.redux.actions.setAvailableButtons(defaultButtons) + + store.dispatch(buttonsAction) + + // this.userManager = getUserManagerForOpenIdConnectClient( store, this.props.oidc diff --git a/src/components/OHIFLogo/OHIFLogo.js b/src/components/OHIFLogo/OHIFLogo.js index e1fe80967..abbb524f8 100644 --- a/src/components/OHIFLogo/OHIFLogo.js +++ b/src/components/OHIFLogo/OHIFLogo.js @@ -1,7 +1,7 @@ -import React from 'react'; -import './OHIFLogo.css'; +import React from 'react' +import './OHIFLogo.css' -const Icons = 'icons.svg'; +const Icons = `${window.config.routerBasename}/icons.svg` function OHIFLogo() { return ( @@ -16,7 +16,7 @@ function OHIFLogo() {
Open Health Imaging Foundation
- ); + ) } -export default OHIFLogo; +export default OHIFLogo diff --git a/src/connectedComponents/ConnectedPluginSwitch.js b/src/connectedComponents/ConnectedPluginSwitch.js index 55e1dd213..f22fb2787 100644 --- a/src/connectedComponents/ConnectedPluginSwitch.js +++ b/src/connectedComponents/ConnectedPluginSwitch.js @@ -1,42 +1,42 @@ -import { connect } from 'react-redux'; -import PluginSwitch from './PluginSwitch.js'; -import OHIF from 'ohif-core'; +import { connect } from 'react-redux' +import PluginSwitch from './PluginSwitch.js' +import OHIF from 'ohif-core' -const { setLayout } = OHIF.redux.actions; +const { setLayout } = OHIF.redux.actions const mapStateToProps = state => { - const { activeViewportIndex, layout } = state.viewports; + const { activeViewportIndex, layout } = state.viewports return { activeViewportIndex, - layout - }; -}; + layout, + } +} const mapDispatchToProps = dispatch => { return { setLayout: data => { - dispatch(setLayout(data)); - } - }; -}; + dispatch(setLayout(data)) + }, + } +} function setSingleLayoutData(originalArray, viewportIndex, data) { - const viewports = originalArray.slice(); - const layoutData = Object.assign({}, viewports[viewportIndex], data); + const viewports = originalArray.slice() + const layoutData = Object.assign({}, viewports[viewportIndex], data) - viewports[viewportIndex] = layoutData; + viewports[viewportIndex] = layoutData - return viewports; + return viewports } const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { - const { activeViewportIndex, layout } = propsFromState; - const { setLayout } = propsFromDispatch; + const { activeViewportIndex, layout } = propsFromState + const { setLayout } = propsFromDispatch // TODO: Do not display certain options if the current display set // cannot be displayed using these view types - const Icons = 'icons.svg'; + const Icons = `${window.config.routerBasename}/icons.svg` const buttons = [ { text: 'Acquired', @@ -44,16 +44,16 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { iconClasses: 'fa fa-bars', active: false, onClick: click => { - console.warn('Original Acquisition'); + console.warn('Original Acquisition') const layoutData = setSingleLayoutData( layout.viewports, activeViewportIndex, { plugin: 'cornerstone' } - ); + ) - setLayout({ viewports: layoutData }); - } + setLayout({ viewports: layoutData }) + }, }, { text: 'Axial', @@ -61,46 +61,46 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { svgClasses: 'icon-rotate-120', active: false, onClick: click => { - console.warn('Axial'); + console.warn('Axial') const data = { plugin: 'vtk', vtk: { mode: 'mpr', - sliceNormal: [0, 0, 1] - } - }; + sliceNormal: [0, 0, 1], + }, + } const layoutData = setSingleLayoutData( layout.viewports, activeViewportIndex, data - ); + ) - setLayout({ viewports: layoutData }); - } + setLayout({ viewports: layoutData }) + }, }, { text: 'Sagittal', svgUrl: `${Icons}#cube`, active: false, onClick: click => { - console.warn('Sagittal'); + console.warn('Sagittal') const data = { plugin: 'vtk', vtk: { mode: 'mpr', - sliceNormal: [1, 0, 0] - } - }; + sliceNormal: [1, 0, 0], + }, + } const layoutData = setSingleLayoutData( layout.viewports, activeViewportIndex, data - ); + ) - setLayout({ viewports: layoutData }); - } + setLayout({ viewports: layoutData }) + }, }, { text: 'Coronal', @@ -108,24 +108,24 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { svgClasses: 'fa-rotate-90 fa-flip-horizontal', active: false, onClick: click => { - console.warn('Coronal'); + console.warn('Coronal') const data = { plugin: 'vtk', vtk: { mode: 'mpr', - sliceNormal: [0, 1, 0] - } - }; + sliceNormal: [0, 1, 0], + }, + } const layoutData = setSingleLayoutData( layout.viewports, activeViewportIndex, data - ); + ) - setLayout({ viewports: layoutData }); - } - } + setLayout({ viewports: layoutData }) + }, + }, /*{ text: '3D', svgUrl: `${Icons}#cube`, @@ -143,17 +143,17 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { setLayout({ viewports: layoutData }); } }*/ - ]; + ] return { - buttons - }; -}; + buttons, + } +} const ConnectedPluginSwitch = connect( mapStateToProps, mapDispatchToProps, mergeProps -)(PluginSwitch); +)(PluginSwitch) -export default ConnectedPluginSwitch; +export default ConnectedPluginSwitch diff --git a/src/connectedComponents/ToolbarRow.js b/src/connectedComponents/ToolbarRow.js index 7559d96de..e7f57d65e 100644 --- a/src/connectedComponents/ToolbarRow.js +++ b/src/connectedComponents/ToolbarRow.js @@ -1,12 +1,12 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import OHIF from 'ohif-core'; -import { RoundedButtonGroup } from 'react-viewerbase'; -import ConnectedLayoutButton from './ConnectedLayoutButton'; -import ConnectedPluginSwitch from './ConnectedPluginSwitch.js'; -import './ToolbarRow.css'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import OHIF from 'ohif-core' +import { RoundedButtonGroup } from 'react-viewerbase' +import ConnectedLayoutButton from './ConnectedLayoutButton' +import ConnectedPluginSwitch from './ConnectedPluginSwitch.js' +import './ToolbarRow.css' -const Icons = 'icons.svg'; +const Icons = `${window.config.routerBasename}/icons.svg` class ToolbarRow extends Component { static propTypes = { @@ -14,21 +14,21 @@ class ToolbarRow extends Component { rightSidebarOpen: PropTypes.bool.isRequired, setLeftSidebarOpen: PropTypes.func, setRightSidebarOpen: PropTypes.func, - pluginId: PropTypes.string - }; + pluginId: PropTypes.string, + } static defaultProps = { leftSidebarOpen: false, - rightSidebarOpen: false - }; + rightSidebarOpen: false, + } onLeftSidebarValueChanged = value => { - this.props.setLeftSidebarOpen(!!value); - }; + this.props.setLeftSidebarOpen(!!value) + } onRightSidebarValueChanged = value => { - this.props.setRightSidebarOpen(!!value); - }; + this.props.setRightSidebarOpen(!!value) + } render() { const leftSidebarToggle = [ @@ -37,9 +37,9 @@ class ToolbarRow extends Component { svgLink: `${Icons}#icon-studies`, svgWidth: 15, svgHeight: 13, - bottomLabel: 'Series' - } - ]; + bottomLabel: 'Series', + }, + ] const rightSidebarToggle = [ { @@ -47,32 +47,30 @@ class ToolbarRow extends Component { svgLink: `${Icons}#icon-measurements-lesions`, svgWidth: 15, svgHeight: 13, - bottomLabel: 'Measurements' - } - ]; + bottomLabel: 'Measurements', + }, + ] const leftSidebarValue = this.props.leftSidebarOpen ? leftSidebarToggle[0].value - : null; + : null const rightSidebarValue = this.props.rightSidebarOpen ? rightSidebarToggle[0].value - : null; + : null - const currentPluginId = this.props.pluginId; + const currentPluginId = this.props.pluginId - const { PLUGIN_TYPES, availablePlugins } = OHIF.plugins; + const { PLUGIN_TYPES, availablePlugins } = OHIF.plugins const plugin = availablePlugins.find(entry => { - return ( - entry.type === PLUGIN_TYPES.TOOLBAR && entry.id === currentPluginId - ); - }); + return entry.type === PLUGIN_TYPES.TOOLBAR && entry.id === currentPluginId + }) - let pluginComp; + let pluginComp if (plugin) { - const PluginComponent = plugin.component; + const PluginComponent = plugin.component - pluginComp = ; + pluginComp = } return ( @@ -95,8 +93,8 @@ class ToolbarRow extends Component { /> - ); + ) } } -export default ToolbarRow; +export default ToolbarRow diff --git a/src/utils/getDefaultToolbarButtons.js b/src/utils/getDefaultToolbarButtons.js new file mode 100644 index 000000000..657e057b7 --- /dev/null +++ b/src/utils/getDefaultToolbarButtons.js @@ -0,0 +1,92 @@ +/** + * + * @param {String} [baseDirectory='/'] + */ +export default function(baseDirectory = '/') { + const iconsFileName = 'icons.svg' + const sanitizedBaseDirectory = + baseDirectory[baseDirectory.length - 1] === '/' + ? baseDirectory + : `${baseDirectory}/` + const relativePathToIcons = `${sanitizedBaseDirectory}${iconsFileName}` + + return [ + { + command: 'StackScroll', + type: 'tool', + text: 'Stack Scroll', + svgUrl: `${relativePathToIcons}#icon-tools-stack-scroll`, + active: false, + }, + { + command: 'Zoom', + type: 'tool', + text: 'Zoom', + svgUrl: `${relativePathToIcons}#icon-tools-zoom`, + active: false, + }, + { + command: 'Wwwc', + type: 'tool', + text: 'Levels', + svgUrl: `${relativePathToIcons}#icon-tools-levels`, + active: true, + }, + { + command: 'Pan', + type: 'tool', + text: 'Pan', + svgUrl: `${relativePathToIcons}#icon-tools-pan`, + active: false, + }, + { + command: 'Length', + type: 'tool', + text: 'Length', + svgUrl: `${relativePathToIcons}#icon-tools-measure-temp`, + active: false, + }, + /*{ + command: 'Annotate', + type: 'tool', + text: 'Annotate', + svgUrl: `${Icons}#icon-tools-measure-non-target`, + active: false + },*/ + { + command: 'Angle', + type: 'tool', + text: 'Angle', + iconClasses: 'fa fa-angle-left', + active: false, + }, + { + command: 'Bidirectional', + type: 'tool', + text: 'Bidirectional', + svgUrl: `${relativePathToIcons}#icon-tools-measure-target`, + active: false, + }, + { + command: 'Brush', + type: 'tool', + text: 'Brush', + iconClasses: 'fa fa-circle', + active: false, + }, + { + command: 'FreehandMouse', + type: 'tool', + text: 'Freehand', + iconClasses: 'fa fa-star', + active: false, + }, + { + command: 'reset', + type: 'command', + text: 'Reset', + svgUrl: `${relativePathToIcons}#icon-tools-reset`, + active: false, + }, + ] +} diff --git a/src/utils/getDefaultToolbarButtons.test.js b/src/utils/getDefaultToolbarButtons.test.js new file mode 100644 index 000000000..2fa45839b --- /dev/null +++ b/src/utils/getDefaultToolbarButtons.test.js @@ -0,0 +1,26 @@ +import getDefaultToolbarButtons from './getDefaultToolbarButtons.js' + +describe('getDefaultToolbarButtons.js', () => { + it('returns a non-empty array', () => { + const basePath = '/' + + const buttons = getDefaultToolbarButtons(basePath) + + expect(buttons.length).toBeGreaterThan(0) + }) + + it('uses the provided basePath in buttons with an svgUrl property', () => { + const basePath = '/demo/' + + const buttons = getDefaultToolbarButtons(basePath) + const hasOneOrMoreButtonsWithSvgUrlProperty = buttons.some(btn => + btn.hasOwnProperty('svgUrl') + ) + const usesBasePathInButtonSvgUrls = buttons.every( + btn => !btn.hasOwnProperty('svgUrl') || btn.svgUrl.includes(basePath) + ) + + expect(hasOneOrMoreButtonsWithSvgUrlProperty).toBeTruthy() + expect(usesBasePathInButtonSvgUrls).toBeTruthy() + }) +}) diff --git a/src/utils/index.js b/src/utils/index.js index 2498ab47d..4c8522124 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,4 +1,9 @@ +import getDefaultToolbarButtons from './getDefaultToolbarButtons.js' import getUserManagerForOpenIdConnectClient from './getUserManagerForOpenIdConnectClient.js' import initWebWorkers from './initWebWorkers.js' -export { getUserManagerForOpenIdConnectClient, initWebWorkers } +export { + getDefaultToolbarButtons, + getUserManagerForOpenIdConnectClient, + initWebWorkers, +} diff --git a/src/utils/index.test.js b/src/utils/index.test.js index 78174122a..59b8f7394 100644 --- a/src/utils/index.test.js +++ b/src/utils/index.test.js @@ -5,7 +5,11 @@ describe('utils', () => { const utilExports = Object.keys(utils).sort() expect(utilExports).toEqual( - ['getUserManagerForOpenIdConnectClient', 'initWebWorkers'].sort() + [ + 'getDefaultToolbarButtons', + 'getUserManagerForOpenIdConnectClient', + 'initWebWorkers', + ].sort() ) }) })