EntityViewer.tsx 5.43 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

17
import React, { useEffect } from 'react';
18 19 20
import { ApolloProvider } from '@apollo/client';
import { useSelector, useDispatch } from 'react-redux';
import { replace } from 'connected-react-router';
21
import { useParams } from 'react-router-dom';
Andrey Azov's avatar
Andrey Azov committed
22

23
import { client } from 'src/gql-client';
24 25
import * as urlFor from 'src/shared/helpers/urlHelper';
import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers';
Andrey Azov's avatar
Andrey Azov committed
26 27

import { getBreakpointWidth } from 'src/global/globalSelectors';
28 29
import {
  getEntityViewerActiveGenomeId,
30
  getEntityViewerActiveEntityId
31
} from 'src/content/app/entity-viewer/state/general/entityViewerGeneralSelectors';
Jyothish's avatar
Jyothish committed
32 33 34 35
import {
  isEntityViewerSidebarOpen,
  getEntityViewerSidebarModalView
} from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSelectors';
Andrey Azov's avatar
Andrey Azov committed
36

37 38 39 40 41
import { setDataFromUrl } from 'src/content/app/entity-viewer/state/general/entityViewerGeneralSlice';
import {
  toggleSidebar,
  initializeSidebar
} from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice';
Andrey Azov's avatar
Andrey Azov committed
42 43

import { StandardAppLayout } from 'src/shared/components/layout';
44
import EntityViewerAppBar from './shared/components/entity-viewer-app-bar/EntityViewerAppBar';
Jyothish's avatar
Jyothish committed
45 46
import EntityViewerSidebarToolstrip from './shared/components/entity-viewer-sidebar/entity-viewer-sidebar-toolstrip/EntityViewerSidebarToolstrip';
import EntityViewerSidebarModal from 'src/content/app/entity-viewer/shared/components/entity-viewer-sidebar/entity-viewer-sidebar-modal/EntityViewerSidebarModal';
47
import EntityViewerTopbar from './shared/components/entity-viewer-topbar/EntityViewerTopbar';
48
import EntityViewerInterstitial from './interstitial/EntityViewerInterstitial';
49
import GeneView from './gene-view/GeneView';
Imran Salam's avatar
Imran Salam committed
50
import GeneViewSidebar from './gene-view/components/gene-view-sidebar/GeneViewSideBar';
51
import GeneViewSidebarTabs from './gene-view/components/gene-view-sidebar-tabs/GeneViewSidebarTabs';
Andrey Azov's avatar
Andrey Azov committed
52

53
import styles from './EntityViewer.scss';
Andrey Azov's avatar
Andrey Azov committed
54 55 56 57 58 59

export type EntityViewerParams = {
  genomeId?: string;
  entityId?: string;
};

60 61 62 63 64 65
const EntityViewer = () => {
  const activeGenomeId = useSelector(getEntityViewerActiveGenomeId);
  const isSidebarOpen = useSelector(isEntityViewerSidebarOpen);
  const viewportWidth = useSelector(getBreakpointWidth);

  const dispatch = useDispatch();
Jyothish's avatar
Jyothish committed
66

67 68 69 70 71 72 73 74
  useEntityViewerRouting();

  useEffect(() => {
    if (activeGenomeId) {
      dispatch(initializeSidebar(activeGenomeId));
    }
  }, [activeGenomeId]);

Jyothish's avatar
Jyothish committed
75 76 77
  const isSidebarModalOpen = Boolean(
    useSelector(getEntityViewerSidebarModalView)
  );
78

79
  const params: EntityViewerParams = useParams();
80
  const { genomeId, entityId } = params;
Andrey Azov's avatar
Andrey Azov committed
81

Jyothish's avatar
Jyothish committed
82 83 84
  const SideBarContent = isSidebarModalOpen ? (
    <EntityViewerSidebarModal />
  ) : (
Imran Salam's avatar
Imran Salam committed
85
    <GeneViewSidebar />
Jyothish's avatar
Jyothish committed
86 87
  );

Andrey Azov's avatar
Andrey Azov committed
88
  return (
89 90 91
    <ApolloProvider client={client}>
      <div className={styles.entityViewer}>
        <EntityViewerAppBar />
92
        {genomeId && entityId ? (
93 94
          <StandardAppLayout
            mainContent={<GeneView />}
95 96 97
            topbarContent={
              <EntityViewerTopbar genomeId={genomeId} entityId={entityId} />
            }
Jyothish's avatar
Jyothish committed
98
            sidebarContent={SideBarContent}
99 100
            sidebarNavigation={<GeneViewSidebarTabs />}
            sidebarToolstripContent={<EntityViewerSidebarToolstrip />}
101
            isSidebarOpen={isSidebarOpen}
Jyothish's avatar
Jyothish committed
102
            onSidebarToggle={() => dispatch(toggleSidebar())}
103
            isDrawerOpen={false}
104
            viewportWidth={viewportWidth}
105 106
          />
        ) : (
107
          <EntityViewerInterstitial />
108 109 110
        )}
      </div>
    </ApolloProvider>
Andrey Azov's avatar
Andrey Azov committed
111 112 113
  );
};

114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
const useEntityViewerRouting = () => {
  const activeGenomeId = useSelector(getEntityViewerActiveGenomeId);
  const activeEntityId = useSelector(getEntityViewerActiveEntityId);

  const dispatch = useDispatch();

  const params: EntityViewerParams = useParams();
  const { genomeId, entityId } = params;

  useEffect(() => {
    if (!genomeId && activeGenomeId) {
      // the url is /entity-viewer; but the user has already viewed some species in EntityViewer
      const entityIdForUrl = activeEntityId
        ? buildFocusIdForUrl(activeEntityId)
        : undefined;
      const newUrl = urlFor.entityViewer({
        genomeId: activeGenomeId,
        entityId: entityIdForUrl
      });
      dispatch(replace(newUrl));
    } else if (
      activeGenomeId &&
      activeGenomeId === genomeId &&
      activeEntityId &&
      !entityId
    ) {
      // the url is /entity-viewer/:genome_id; but the user has already viewed a gene
      const entityIdForUrl = buildFocusIdForUrl(activeEntityId);
      const replacementUrl = urlFor.entityViewer({
        genomeId: activeGenomeId,
        entityId: entityIdForUrl
      });
      dispatch(replace(replacementUrl));
    }
    dispatch(setDataFromUrl(params));
  }, [params.genomeId, params.entityId, activeGenomeId, activeEntityId]);
};

152
export default EntityViewer;