EntityViewer.tsx 3.98 KB
Newer Older
1
import React, { useEffect } from 'react';
Andrey Azov's avatar
Andrey Azov committed
2 3 4 5 6 7 8 9
import { connect } from 'react-redux';
import { Link, useParams } from 'react-router-dom';

import { BreakpointWidth } from 'src/global/globalConfig';
import * as urlHelper from 'src/shared/helpers/urlHelper';

import { getBreakpointWidth } from 'src/global/globalSelectors';
import { getExampleGenes } from 'src/shared/state/ens-object/ensObjectSelectors';
10 11
import { getEntityViewerActiveGenomeId } from 'src/content/app/entity-viewer/state/general/entityViewerGeneralSelectors';
import { isEntityViewerSidebarOpen } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSelectors';
Andrey Azov's avatar
Andrey Azov committed
12 13

import { fetchGenomeData } from 'src/shared/state/genome/genomeActions';
14 15
import { setDataFromUrl } from 'src/content/app/entity-viewer/state/general/entityViewerGeneralActions';
import { toggleSidebar } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarActions';
Andrey Azov's avatar
Andrey Azov committed
16 17 18

import { StandardAppLayout } from 'src/shared/components/layout';
import EntityViewerAppBar from 'src/content/app/entity-viewer/components/entity-viewer-app-bar/EntityViewerAppBar';
19 20 21
import EntityViewerSidebar from './components/entity-viewer-sidebar/EntityViewerSideBar';
import EntityViewerSidebarTabs from './components/entity-viewer-sidebar-tabs/EntityViewerSidebarTabs';
import EntityViewerSidebarToolstrip from './components/entity-viewer-sidebar-toolstrip/EntityViewerSidebarToolstrip';
Andrey Azov's avatar
Andrey Azov committed
22 23 24

import { RootState } from 'src/store';
import { EnsObject } from 'src/shared/state/ens-object/ensObjectTypes';
25 26 27
import { SidebarStatus } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarState';

import styles from './EntityViewer.scss';
Andrey Azov's avatar
Andrey Azov committed
28 29 30

type Props = {
  activeGenomeId: string | null;
31
  isSidebarOpen: boolean;
Andrey Azov's avatar
Andrey Azov committed
32 33 34 35
  exampleGenes: EnsObject[];
  viewportWidth: BreakpointWidth;
  setDataFromUrl: (params: EntityViewerParams) => void;
  fetchGenomeData: (genomeId: string) => void;
36
  toggleSidebar: (status?: SidebarStatus) => void;
Andrey Azov's avatar
Andrey Azov committed
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
};

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

const EntityViewer = (props: Props) => {
  const params: EntityViewerParams = useParams(); // NOTE: will likely cause a problem when server-side rendering

  useEffect(() => {
    props.setDataFromUrl(params);
  }, [params.genomeId, params.entityId]);

  return (
    <div className={styles.entityViewer}>
      <EntityViewerAppBar />
      {params.entityId ? (
        <StandardAppLayout
          mainContent={<div>Main content is coming...</div>}
57
          sidebarContent={<EntityViewerSidebar />}
58
          sidebarNavigation={<EntityViewerSidebarTabs />}
59
          sidebarToolstripContent={<EntityViewerSidebarToolstrip />}
Andrey Azov's avatar
Andrey Azov committed
60
          topbarContent={<div>Entity info summary goes here</div>}
61 62
          isSidebarOpen={props.isSidebarOpen}
          onSidebarToggle={props.toggleSidebar}
Andrey Azov's avatar
Andrey Azov committed
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
          isDrawerOpen={false}
          viewportWidth={props.viewportWidth}
        />
      ) : (
        <ExampleLinks {...props} />
      )}
    </div>
  );
};

const ExampleLinks = (props: Props) => {
  const links = props.exampleGenes.map((gene) => {
    const path = urlHelper.entityViewer({
      genomeId: props.activeGenomeId,
      entityId: gene.object_id
    });

    return (
      <Link key={gene.object_id} to={path}>
        <span className={styles.exampleLinks__label}>Gene</span>
        <span>{gene.label}</span>
      </Link>
    );
  });

  return (
    <div>
90
      <div className={styles.exampleLinks__emptyTopbar} />
Andrey Azov's avatar
Andrey Azov committed
91 92 93 94 95 96 97 98 99 100 101 102 103 104
      <div className={styles.exampleLinks}>{links}</div>
    </div>
  );
};

const mapStateToProps = (state: RootState) => {
  const activeGenomeId = getEntityViewerActiveGenomeId(state);
  const exampleGenes = activeGenomeId
    ? getExampleGenes(activeGenomeId, state)
    : [];

  return {
    activeGenomeId,
    exampleGenes,
105
    isSidebarOpen: isEntityViewerSidebarOpen(state),
Andrey Azov's avatar
Andrey Azov committed
106 107 108 109 110 111
    viewportWidth: getBreakpointWidth(state)
  };
};

const mapDispatchToProps = {
  setDataFromUrl,
112 113
  fetchGenomeData,
  toggleSidebar
Andrey Azov's avatar
Andrey Azov committed
114 115 116
};

export default connect(mapStateToProps, mapDispatchToProps)(EntityViewer);