Commit 86eaa4ae authored by Imran Salam's avatar Imran Salam
Browse files

generate previously viewed items in bookmarks modal using API data

parent 6c62eda6
......@@ -29,7 +29,8 @@ import {
getTrackPanelModalView,
getSelectedBrowserTab,
getTrackCategories,
getObjectInfo
getObjectInfo,
getExampleObjects
} from '../browserSelectors';
import { getLaunchbarExpanded } from 'src/header/headerSelectors';
......@@ -40,10 +41,11 @@ import { TrackType } from './trackPanelConfig';
import styles from './TrackPanel.scss';
type StateProps = {
breakpointWidth: BreakpointWidth;
browserActivated: boolean;
drawerOpened: boolean;
drawerView: string;
breakpointWidth: BreakpointWidth;
exampleObjects: any;
launchbarExpanded: boolean;
objectInfo: any;
selectedBrowserTab: TrackType;
......@@ -107,6 +109,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
{props.trackPanelModalOpened ? (
<TrackPanelModal
closeTrackPanelModal={props.closeTrackPanelModal}
exampleObjects={props.exampleObjects}
launchbarExpanded={props.launchbarExpanded}
trackPanelModalView={props.trackPanelModalView}
/>
......@@ -124,6 +127,7 @@ const mapStateToProps = (state: RootState): StateProps => ({
browserActivated: getBrowserActivated(state),
drawerOpened: getDrawerOpened(state),
drawerView: getDrawerView(state),
exampleObjects: getExampleObjects(state),
launchbarExpanded: getLaunchbarExpanded(state),
objectInfo: getObjectInfo(state),
selectedBrowserTab: getSelectedBrowserTab(state),
......
......@@ -13,6 +13,7 @@ import styles from './TrackPanelModal.scss';
type TrackPanelModalProps = {
closeTrackPanelModal: () => void;
exampleObjects: any;
launchbarExpanded: boolean;
trackPanelModalView: string;
};
......@@ -35,7 +36,7 @@ const TrackPanelModal: FunctionComponent<TrackPanelModalProps> = (
case 'tracks-manager':
return <TracksManager />;
case 'bookmarks':
return <TrackPanelBookmarks />;
return <TrackPanelBookmarks exampleObjects={props.exampleObjects} />;
case 'personal-data':
return <PersonalData />;
case 'share':
......
......@@ -3,25 +3,51 @@ import { Link } from 'react-router-dom';
import styles from '../TrackPanelModal.scss';
const TrackPanelBookmarks: FunctionComponent = () => {
type TrackPanelBookmarksProps = {
exampleObjects: any;
};
const TrackPanelBookmarks: FunctionComponent<TrackPanelBookmarksProps> = (
props: TrackPanelBookmarksProps
) => {
const exampleObjectsTotal = Object.keys(props.exampleObjects).length;
const getExampleObjectNode = (exampleObject: any) => {
const {
assembly,
chromosome,
display_name,
location,
object_type,
species,
stable_id
} = exampleObject;
const assemblyStr = `${assembly.name}_demo`;
const regionStr = `${chromosome}:${location.start}-${location.end}`;
const path = `/app/browser/${assemblyStr}/${display_name}/${regionStr}`;
return (
<dd key={stable_id}>
<Link to={path}>
{species} {object_type} {display_name}
</Link>
</dd>
);
};
return (
<section className="trackPanelBookmarks">
<h3>Bookmarks</h3>
<p>Save multiple browser configurations</p>
<p>Not ready yet &hellip;</p>
<dl className={styles.previouslyViewed}>
<dt>Previously viewed</dt>
<dd>
<Link to="/app/browser/human/BRCA2/13:32315474-32400266">
Human gene BRCA2
</Link>
</dd>
<dd>
<Link to="/app/browser/human/TTN/2:178525989-178830802">
Human transcript TTN
</Link>
</dd>
</dl>
{exampleObjectsTotal ? (
<dl className={styles.previouslyViewed}>
<dt>Previously viewed</dt>
{Object.values(props.exampleObjects).map((exampleObject) =>
getExampleObjectNode(exampleObject)
)}
</dl>
) : null}
</section>
);
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment