OHIF Viewer 开发笔记(一):添加启动页面

OHIF Viewer 开发笔记(一):添加登录页面

项目组件概览

在添加启动页面之前,需要对项目的框架结构有一个大致的了解。使用 React 官方提供的 React Developer Tools 可以在浏览器的调试窗口中看到StudyList页面的Component Tree:
OHIF Viewer 开发笔记(一):添加启动页面
图中左侧显示的是组件树,右侧显示组件的props属性。
上图的组件树中,App组件是项目的顶层组件,它的render方法返回的内容如下:

	<Provider store={store}>
        <AppProvider config={this._appConfig}>
          <I18nextProvider i18n={i18n}>
            <Router basename={routerBasename}>
              <WhiteLabelingContext.Provider value={whiteLabeling}>
                <SnackbarProvider service={UINotificationService}>
                  <DialogProvider service={UIDialogService}>
                    <ModalProvider modal={OHIFModal} service={UIModalService}>
                      <OHIFStandaloneViewer />
                    </ModalProvider>
                  </DialogProvider>
                </SnackbarProvider>
              </WhiteLabelingContext.Provider>
            </Router>
          </I18nextProvider>
        </AppProvider>
      </Provider>

组件嵌套最内层的OHIFStandaloneViewer组件是非常重要的组件,它使用react-router 提供的路由(Route)功能根据当前url返回对应的页面(组件)。

	const routes = RoutesUtil.getRoutes(appConfig);

    const currentPath = this.props.location.pathname;
    const noMatchingRoutes = !routes.find(r =>
      matchPath(currentPath, {
        path: r.path,
        exact: true,
      })
    );
    console.log(routes);
	return (
      <>
        <NProgress isAnimating={this.state.isLoading}>
          {({ isFinished, progress, animationDuration }) => (
            <Container
              isFinished={isFinished}
              animationDuration={animationDuration}
            >
              <Bar progress={progress} animationDuration={animationDuration} />
            </Container>
          )}
        </NProgress>
        <Route exact path="/silent-refresh.html" onEnter={RoutesUtil.reload} />
        <Route exact path="/logout-redirect.html" onEnter={RoutesUtil.reload} />
        {!noMatchingRoutes &&
          routes.map(({ path, Component }) => (
            <Route key={path} exact path={path}>
              {({ match }) => (
                <CSSTransition
                  in={match !== null}
                  timeout={300}
                  classNames="fade"
                  unmountOnExit
                  onEnter={() => {
                    this.setState({
                      isLoading: true,
                    });
                  }}
                  onEntered={() => {
                    this.setState({
                      isLoading: false,
                    });
                  }}
                >
                  {match === null ? (
                    <></>
                  ) : (
                      <Component match={match} location={this.props.location} />
                    )}
                </CSSTransition>
              )}
            </Route>
          ))}
        {noMatchingRoutes && <NotFound />}
      </>
    );

上述代码使用routes.map()方法将Route path和组件映射对应起来,我们使用console.log()方法查看routes的值:
OHIF Viewer 开发笔记(一):添加启动页面
routes数组中存储了5个元素,对应6个路径。其中根路径"/“和”/studylist"对应的都是studylist页面;"/local"页面功能为Drag and Drop DICOM files here to load them in the Viewer,Or click to Load files or Load folders from dialog。

修改思路&实现

  1. React项目默认会从localhost:3000启动,也就是根目录"/"。为了添加启动或登录页面,必须首先渲染一个我们自己定义的Home组件,然后在Home组件中设置链接跳转到studylist页面。
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import App from './App.js';

export default function Home(props) {
  return (
    <Router>
      <Switch>
        <Route exact path="/studylist">
          <App {...props} />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/">
          <Welcome />
        </Route>
      </Switch>
    </Router>
  );
}

function About() {
  return (
    <div>
      <h2 color="blue">About</h2>
    </div>
  );
}

function Welcome() {
  return (
    <div>
      <h2 color="blue" align="center">
        欢迎来到直结肠癌诊断一体化平台!
      </h2>
      <ul>
        <li>
          <Link to="/studylist">Studylist</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <hr />
    </div>
  );
}

上述代码使用react-router 提供的路由功能实现了页面间的跳转。Home组件并不是真正的“首页”,它的功能只是根据当前URL渲染不同的组件。当URL为"/"时,渲染自定义的Welcome组件,Welcome组件包含两个链接(Link将在渲染时被替换成a标签)。

  1. 之后,我们需要在OHIFStandaloneViewer的路由表中将“/”和Home组件对应,"/studylist"和原StudylistRouting组件对应。
    我们找到获取routes的RoutesUtil.getRoutes()方法,其中定义的默认route为:
const ROUTES_DEF = {
  default: {
    viewer: {
      path: '/viewer/:studyInstanceUIDs',
      component: ViewerRouting,
    },
    standaloneViewer: {
      path: '/viewer',
      component: StandaloneRouting,
    },
    list: {
      path: ['/studylist', '/'],
      component: StudyListRouting,
      condition: appConfig => {
        return appConfig.showStudyList;
      },
    },
    local: {
      path: '/local',
      component: ViewerLocalFileData,
    },
    IHEInvokeImageDisplay: {
      path: '/IHEInvokeImageDisplay',
      component: IHEInvokeImageDisplay
    },
  }
  

将list对象替换为:

	// list: {
    //   path: ['/studylist', '/'],
    //   component: StudyListRouting,
    //   condition: appConfig => {
    //     return appConfig.showStudyList;
    //   },
    // },
    home: {
      path: '/',
      component: Home,
    },
    list: {
      path: '/studylist',
      component: StudyListRouting,
      condition: appConfig => {
        return appConfig.showStudyList;
      },
    },

即可在OHIFStandaloneViewer组件中实现路由,url为"/“时导向Home组件,url为”/studylist"时导向StudyingRouting组件。
此时重启项目,首先会进入Home组件渲染的页面,点击Studylist链接就进入了Studylist页面。
OHIF Viewer 开发笔记(一):添加启动页面
但如果进入study viewer页面,页面左上角的“Study List”链接会返回到"/",需要把它修改为“/studylist”。使用React Development Tools定位到该链接由Header组件渲染,它的LinkPath prop由Viewer组件提供。
OHIF Viewer 开发笔记(一):添加启动页面
找到Viewers\platform\viewer\src\connectedComponents目录下的Viewer.js文件,将render方法return中 ConnectedHeader 元素的LinkPath prop由/改为/studylist。(原有代码被注释掉)

linkPath={
   // appContext.appConfig.showStudyList ? '/' : undefined
   appContext.appConfig.showStudyList ? '/studylist' : undefined
   }       

这样我们就将一个简单的页面添加到了OHIF Viewer的最前面,可以实现用户登录的功能。

简化的修改过程

  1. 在Viewers\platform\viewer\src目录(App.js和OHIFStandaloneViewer.js的同级目录)下添加Home.js文件(为简化只粘贴必要代码):
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import App from './App.js';

export default function Home(props) {
  return (
    <Router>
      <Switch>
        <Route exact path="/studylist">
          <App {...props} />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
        <Route exact path="/">
          <Welcome />
        </Route>
      </Switch>
    </Router>
  );
}

function About() {
  return (
    <div>
      <h2 color="blue">About</h2>
    </div>
  );
}

function Welcome() {
  return (
    <div>
      <h2 color="blue">
        欢迎来到直结肠癌诊断一体化平台!
      </h2>
      <ul>
        <li>
          <Link to="/studylist">Studylist</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <hr />
    </div>
  );
}

  1. 找到Viewers\platform\viewer\src\routes\RoutesUtil.js文件,在顶部引入Home组件:
import Home from '../Home.js';

将ROUTES_DEF常量修改为:

	// list: {
    //   path: ['/studylist', '/'],
    //   component: StudyListRouting,
    //   condition: appConfig => {
    //     return appConfig.showStudyList;
    //   },
    // },
    home: {
      path: '/',
      component: Home,
    },
    list: {
      path: '/studylist',
      component: StudyListRouting,
      condition: appConfig => {
        return appConfig.showStudyList;
      },
    },

注释中为原有代码,未注释部分为新添加的部分。

  1. 找到Viewers\platform\viewer\src\connectedComponents目录下的Viewer.js文件,将render方法return中 ConnectedHeader 元素的LinkPath prop由/改为/studylist。(原有代码被注释掉)
linkPath={
   // appContext.appConfig.showStudyList ? '/' : undefined
   appContext.appConfig.showStudyList ? '/studylist' : undefined
   }       
上一篇:[OHIF-Viewers]医疗数字阅片-医学影像-学习开篇


下一篇:在超图添加其他图层