Merge branch 'feat/ui-v2-rebase-services' of github.com:OHIF/Viewers into feat/ui-v2-rebase-services

# Conflicts:
#	platform/viewer/src/routes/Mode/Mode.jsx
This commit is contained in:
dannyrb committed 2020-05-20 21:08:49 -04:00
commit b5070dd518
13 files changed
+199 -222

No files matched your search

-46
View File
@@ -1,46 +0,0 @@
export default class toolBarManager {
constructor(extensionManager) {
this.buttons = {};
this.extensionManager = extensionManager;
}
addButtons(buttons) {
buttons.forEach(button => {
const buttonDefinition = this.extensionManager.getModuleEntry(
button.namespace
);
const id = button.id || buttonDefinition.id;
this.buttons[id] = buttonDefinition;
});
}
setToolBarLayout(layouts) {
const toolBarLayout = [];
layouts.forEach(layout => {
const toolBarDefinitions = { tools: [], moreTools: [] };
const { tools, moreTools } = layout;
tools &&
tools.forEach(element => {
const button = this.buttons[element];
toolBarDefinitions.tools.push(button);
});
moreTools &&
moreTools.forEach(element => {
const button = this.buttons[element];
toolBarDefinitions.moreTools.push(button);
});
toolBarLayout.push(toolBarDefinitions);
});
// TODO -> Change this to a service. => emit an event to subscribers to update the toolbar layout.
}
}
-39
View File
@@ -1,39 +0,0 @@
import React, { Component, useContext } from 'react';
/// TODO MAKE THIS PRETTY DANNY
const ToolbarLayoutContext = React.createContext({
toolBarLayout: [],
setToolBarLayout: () => {},
});
ToolbarLayoutContext.displayName = 'ToolbarLayoutContext';
class ToolbarLayoutProvider extends Component {
state = {
toolBarLayout: [],
};
render() {
const setToolBarLayout = toolBarLayout => {
this.setState({ toolBarLayout });
};
return (
<ToolbarLayoutContext.Provider
value={{
toolBarLayout: this.state.toolBarLayout,
setToolBarLayout,
}}
>
{this.props.children}
</ToolbarLayoutContext.Provider>
);
}
}
const useToolbarLayout = () => useContext(ToolbarLayoutContext);
export default ToolbarLayoutContext;
export { ToolbarLayoutProvider, useToolbarLayout };
+3 -9
View File
@@ -20,12 +20,7 @@ import studies from './studies/';
import ui from './ui';
import user from './user.js';
import dicomMetadataStore from './dicomMetadataStore';
import ToolBarManager from './ToolBarManager';
import { ViewModelProvider, useViewModel } from './ViewModelContext';
import {
ToolbarLayoutProvider,
useToolbarLayout,
} from './ToolbarLayoutContext';
import utils, { hotkeys } from './utils/';
import {
@@ -35,6 +30,7 @@ import {
UINotificationService,
UIViewportDialogService,
DisplaySetService,
ToolBarSerivce,
} from './services';
import IWebApiDataSource from './DataSources/IWebApiDataSource';
@@ -73,10 +69,10 @@ const OHIF = {
UIViewportDialogService,
DisplaySetService,
MeasurementService,
ToolBarSerivce,
IWebApiDataSource,
dicomMetadataStore,
//
ToolBarManager,
ViewModelProvider,
useViewModel,
};
@@ -114,13 +110,11 @@ export {
UIViewportDialogService,
DisplaySetService,
MeasurementService,
ToolBarSerivce,
IWebApiDataSource,
dicomMetadataStore,
ToolBarManager,
ViewModelProvider,
useViewModel,
ToolbarLayoutProvider,
useToolbarLayout,
};
export { OHIF };
@@ -1,5 +1,9 @@
import pubSubServiceInterface from '../pubSubServiceInterface';
const EVENTS = {
TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
};
export default class ToolBarService {
constructor() {
this.displaySets = {};
@@ -26,6 +30,23 @@ export default class ToolBarService {
});
}
/**
* Broadcasts displaySetService changes.
*
* @param {string} eventName The event name
* @return void
*/
_broadcastChange = (eventName, callbackProps) => {
const hasListeners = Object.keys(this.listeners).length > 0;
const hasCallbacks = Array.isArray(this.listeners[eventName]);
if (hasListeners && hasCallbacks) {
this.listeners[eventName].forEach(listener => {
listener.callback(callbackProps);
});
}
};
setToolBarLayout(layouts) {
const toolBarLayout = [];
@@ -51,6 +72,8 @@ export default class ToolBarService {
toolBarLayout.push(toolBarDefinitions);
});
// TODO -> Change this to a service. => emit an event to subscribers to update the toolbar layout.
this.toolBarLayout = toolBarLayout;
this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, toolBarLayout);
}
}
@@ -0,0 +1,8 @@
import ToolBarService from './ToolBarService';
export default {
name: 'ToolBarService',
create: ({ configuration = {} }) => {
return new ToolBarService();
},
};
+2
View File
@@ -5,6 +5,7 @@ import UIModalService from './UIModalService';
import UINotificationService from './UINotificationService';
import UIViewportDialogService from './UIViewportDialogService';
import DisplaySetService from './DisplaySetService';
import ToolBarSerivce from './ToolBarService';
export {
MeasurementService,
@@ -14,4 +15,5 @@ export {
UINotificationService,
UIViewportDialogService,
DisplaySetService,
ToolBarSerivce,
};
+46 -17
View File
@@ -1,19 +1,48 @@
window.config = function(props) {
var servicesManager = props.servicesManager;
return {
routerBasename: '/',
enableGoogleCloudAdapter: true,
enableGoogleCloudAdapterUI: false,
showStudyList: true,
httpErrorHandler: error => {
// This is 429 when rejected from the public idc sandbox too often.
console.warn(error.status);
// Could use services manager here to bring up a dialog/modal if needed.
console.warn('test, navigate to https://ohif.org/');
window.location = 'https://ohif.org/';
window.config = {
routerBasename: '/',
enableGoogleCloudAdapter: true,
servers: {
// This is an array, but we'll only use the first entry for now
dicomWeb: [],
},
// This is an array, but we'll only use the first entry for now
oidc: [
{
// ~ REQUIRED
// Authorization Server URL
authority: 'https://accounts.google.com',
client_id:
'723928408739-k9k9r3i44j32rhu69vlnibipmmk9i57p.apps.googleusercontent.com',
redirect_uri: '/callback', // `OHIFStandaloneViewer.js`
response_type: 'id_token token',
scope:
'email profile openid https://www.googleapis.com/auth/cloudplatformprojects.readonly https://www.googleapis.com/auth/cloud-healthcare', // email profile openid
// ~ OPTIONAL
post_logout_redirect_uri: '/logout-redirect.html',
revoke_uri: 'https://accounts.google.com/o/oauth2/revoke?token=',
automaticSilentRenew: true,
revokeAccessTokenOnSignout: true,
},
healthcareApiEndpoint: 'https://idc-sandbox-002.appspot.com/v1beta1',
};
],
studyListFunctionsEnabled: true,
};
// window.config = function(props) {
// var servicesManager = props.servicesManager;
// return {
// routerBasename: '/',
// enableGoogleCloudAdapter: true,
// enableGoogleCloudAdapterUI: false,
// showStudyList: true,
// httpErrorHandler: error => {
// // This is 429 when rejected from the public idc sandbox too often.
// console.warn(error.status);
// // Could use services manager here to bring up a dialog/modal if needed.
// console.warn('test, navigate to https://ohif.org/');
// window.location = 'https://ohif.org/';
// },
// healthcareApiEndpoint: 'https://idc-sandbox-002.appspot.com/v1beta1',
// };
// };
+2
View File
@@ -8,6 +8,7 @@ import {
UIDialogService,
MeasurementService,
DisplaySetService,
ToolBarSerivce,
// utils,
// redux as reduxOHIF,
} from '@ohif/core';
@@ -45,6 +46,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
UIDialogService,
MeasurementService,
DisplaySetService,
ToolBarSerivce,
]);
/**
@@ -1,55 +0,0 @@
import { useEffect, useCallback } from 'react';
import {
displaySetManager,
ToolBarManager,
useViewModel,
useToolbarLayout,
} from '@ohif/core';
export default function DisplaySetCreator({
location,
mode,
dataSourceName,
extensionManager,
DisplaySetService,
}) {
console.warn('DisplaySetCreator rerendering');
const { routes, sopClassHandlers } = mode;
const dataSources = extensionManager.getDataSources(dataSourceName);
// TODO: For now assume one unique datasource.
const dataSource = dataSources[0];
const route = routes[0];
// Add toolbar state to the view model context?
const { displaySetInstanceUIDs, setDisplaySetInstanceUIDs } = useViewModel();
const { toolBarLayout, setToolBarLayout } = useToolbarLayout();
useEffect(() => {
let toolBarManager = new ToolBarManager(extensionManager, setToolBarLayout);
route.init({ toolBarManager });
}, [mode, dataSourceName, location]);
const createDisplaySets = useCallback(() => {
// Add SOPClassHandlers to a new SOPClassManager.
displaySetManager.init(extensionManager, sopClassHandlers, {
displaySetInstanceUIDs,
setDisplaySetInstanceUIDs,
});
const queryParams = location.search;
// Call the data source to start building the view model?
dataSource.retrieve.series.metadata(
queryParams,
displaySetManager.makeDisplaySets
);
}, [displaySetInstanceUIDs, location]);
useEffect(() => {
createDisplaySets();
}, [mode, dataSourceName, location]);
return null;
}
+21 -8
View File
@@ -72,10 +72,15 @@ export default function ModeRoute({
}
useEffect(() => {
// TODO -> Make this into a service
let toolBarManager = new ToolBarManager(extensionManager); //, setToolBarLayout);
route.init({ toolBarManager });
}, [mode, dataSourceName, location]);
route.init({ servicesManager, extensionManager });
}, [
mode,
dataSourceName,
location,
route,
servicesManager,
extensionManager,
]);
// This queries for series, but... What does it do with them?
useEffect(() => {
@@ -90,11 +95,19 @@ export default function ModeRoute({
queryParams,
DisplaySetService.makeDisplaySets
);
}, [mode, dataSourceName, location]);
}, [
mode,
dataSourceName,
location,
DisplaySetService,
extensionManager,
sopClassHandlers,
dataSource.retrieve.series,
]);
const reducer = (state, action) => {
console.log(state, action);
}
};
return (
<ImageViewerProvider
@@ -103,8 +116,8 @@ export default function ModeRoute({
>
<CombinedContextProvider>
{/* TODO: extensionManager is already provided to the extension module.
* Use it from there instead of passing as a prop here.
*/}
* Use it from there instead of passing as a prop here.
*/}
<DragAndDropProvider>
<LayoutComponent
{...layoutTemplateData.props}