Pull config from window for now

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.routerBasenameicons}icons.svg`;
 
 const mapStateToProps = state => {
   const activeButton = state.tools.buttons.find(tool => tool.active === true);
 
   return {
-    buttons: [  {
+    buttons: [
-      command: 'Rotate',
+      {
-      type: 'tool',
+        command: 'Rotate',
-      text: 'Rotate',
+        type: 'tool',
-      svgUrl: `${Icons}#3d-rotate`,
+        text: 'Rotate',
-      active: true
+        svgUrl: `${Icons}#3d-rotate`,
-    }],
+        active: true
+      }
+    ],
     activeCommand: 'Rotate'
   };
 };

src/components/OHIFLogo/OHIFLogo.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from 'react'
-import './OHIFLogo.css';
+import './OHIFLogo.css'
 
-const Icons = 'icons.svg';
+const Icons = `${window.config.routerBasenameicons}icons.svg`
 
 function OHIFLogo() {
   return (
@@ -16,7 +16,7 @@ function OHIFLogo() {
       </svg>
       <div className="header-logo-text">Open Health Imaging Foundation</div>
     </a>
-  );
+  )
 }
 
-export default OHIFLogo;
+export default OHIFLogo

src/connectedComponents/ConnectedPluginSwitch.js

@@ -1,42 +1,42 @@
-import { connect } from 'react-redux';
+import { connect } from 'react-redux'
-import PluginSwitch from './PluginSwitch.js';
+import PluginSwitch from './PluginSwitch.js'
-import OHIF from 'ohif-core';
+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 viewports = originalArray.slice()
-  const layoutData = Object.assign({}, viewports[viewportIndex], data);
+  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 { activeViewportIndex, layout } = propsFromState
-  const { setLayout } = propsFromDispatch;
+  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.routerBasenameicons}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

src/connectedComponents/ToolbarRow.js

@@ -1,12 +1,12 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'
-import OHIF from 'ohif-core';
+import OHIF from 'ohif-core'
-import { RoundedButtonGroup } from 'react-viewerbase';
+import { RoundedButtonGroup } from 'react-viewerbase'
-import ConnectedLayoutButton from './ConnectedLayoutButton';
+import ConnectedLayoutButton from './ConnectedLayoutButton'
-import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
+import ConnectedPluginSwitch from './ConnectedPluginSwitch.js'
-import './ToolbarRow.css';
+import './ToolbarRow.css'
 
-const Icons = 'icons.svg';
+const Icons = `${window.config.routerBasenameicons}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 (
+      return entry.type === PLUGIN_TYPES.TOOLBAR && entry.id === currentPluginId
-        entry.type === PLUGIN_TYPES.TOOLBAR && entry.id === currentPluginId
+    })
-      );
-    });
 
-    let pluginComp;
+    let pluginComp
     if (plugin) {
-      const PluginComponent = plugin.component;
+      const PluginComponent = plugin.component
 
-      pluginComp = <PluginComponent />;
+      pluginComp = <PluginComponent />
     }
 
     return (
@@ -95,8 +93,8 @@ class ToolbarRow extends Component {
           />
         </div>
       </div>
-    );
+    )
   }
 }
 
-export default ToolbarRow;
+export default ToolbarRow