refactor(data-set-info): disable data set info in story mode

src/scripts/components/app/app.tsx

@@ -20,6 +20,7 @@ import Story from '../story/story';
 import UrlSync from '../url-sync/url-sync';
 import LayerLoader from '../layer-loader/layer-loader';
 import TimeSlider from '../time-slider/time-slider';
+import DataSetInfo from '../data-set-info/data-set-info';
 import Init from '../init/init';
 
 import translations from '../../i18n';
@@ -51,6 +52,7 @@ const TranslatedApp: FunctionComponent = () => {
               <Route
                 path={['/layers/:mainLayerId?/:compareLayerId?', '/']}
                 exact>
+                <DataSetInfo />
                 <TimeSlider />
                 <StoriesButton />
                 <div className={styles.nav}>

src/scripts/components/data-set-info/data-set-info.styl

@@ -1,9 +1,11 @@
 .dataSetInfo
   position: absolute
-  top: 5px
-  z-index: 1
   display: flex
-  flex-direction: column
+  flex-direction: row
+  width: 100%
+
+.dataSetContent
+  top: 5px
   width: 100%
   text-align: center
 
@@ -18,5 +20,4 @@
 
 .buttons
   display: flex
-  flex-direction: row
-  align-self: center
+  justify-content: center

src/scripts/components/data-set-info/data-set-info.tsx

@@ -1,24 +1,47 @@
 import React, {FunctionComponent} from 'react';
-import RemoveCompare from '../remove-compare/remove-compare';
+import {useParams} from 'react-router-dom';
+import {useSelector} from 'react-redux';
+
 import InfoButton from '../info-button/info-button';
+import {State} from '../../reducers';
+import {layerListItemSelector} from '../../selectors/layers/list-item';
+import RemoveCompare from '../remove-compare/remove-compare';
 
-import styles from './data-set-info.styl';
 import {LayerListItem} from '../../types/layer-list';
 
+import styles from './data-set-info.styl';
+
 interface Props {
-  isMain?: boolean;
   layer: LayerListItem | null;
+  isCompare?: boolean;
 }
 
-const DataSetInfo: FunctionComponent<Props> = ({layer, isMain}) => (
-  <div className={styles.dataSetInfo}>
+const DataSetContent: FunctionComponent<Props> = ({layer, isCompare}) => (
+  <div className={styles.dataSetContent}>
     <h1 className={styles.title}>{layer?.name}</h1>
     <h2 className={styles.description}>{layer?.description}</h2>
     <div className={styles.buttons}>
       <InfoButton layer={layer} />
-      {!isMain && <RemoveCompare />}
+      {isCompare && <RemoveCompare />}
     </div>
   </div>
 );
 
+const DataSetInfo: FunctionComponent = () => {
+  const {mainLayerId, compareLayerId} = useParams();
+  const mainLayer = useSelector((state: State) =>
+    layerListItemSelector(state, mainLayerId)
+  );
+  const compareLayer = useSelector((state: State) =>
+    layerListItemSelector(state, compareLayerId)
+  );
+
+  return (
+    <div className={styles.dataSetInfo}>
+      <DataSetContent layer={mainLayer} />
+      {compareLayer && <DataSetContent layer={compareLayer} isCompare />}
+    </div>
+  );
+};
+
 export default DataSetInfo;

src/scripts/components/globe/globe.tsx

@@ -6,16 +6,12 @@ import {
   flyToGlobeView
 } from '../../libs/get-globe-view';
 
-import DataSetInfo from '../data-set-info/data-set-info';
-
 import {GlobeView} from '../../types/globe-view';
 import {GlobeProjection} from '../../types/globe-projection';
 
 import 'cesium/Source/Widgets/widgets.css';
 import 'cesium/Build/Cesium/Cesium';
 
-import {LayerListItem} from '../../types/layer-list';
-
 import styles from './globe.styl';
 
 const Cesium = window.Cesium;
@@ -46,8 +42,6 @@ const cesiumOptions = {
 
 interface Props {
   active: boolean;
-  layer: LayerListItem | null;
-  isMain?: boolean;
   layerType?: string;
   view: GlobeView;
   projection: GlobeProjection;
@@ -63,9 +57,7 @@ const Globe: FunctionComponent<Props> = ({
   projection,
   imageUrl,
   active,
-  layer,
   layerType,
-  isMain,
   flyTo,
   onMouseEnter,
   onChange,
@@ -227,9 +219,11 @@ const Globe: FunctionComponent<Props> = ({
   }, [viewer, flyTo]);
 
   return (
-    <div className={styles.globe} onMouseEnter={() => onMouseEnter()} ref={ref}>
-      <DataSetInfo layer={layer} isMain={isMain} />
-    </div>
+    <div
+      className={styles.globe}
+      onMouseEnter={() => onMouseEnter()}
+      ref={ref}
+    />
   );
 };
 

src/scripts/components/globes/globes.tsx

@@ -37,9 +37,6 @@ const Globes: FunctionComponent = () => {
   const globalGlobeView = useSelector(globeViewSelector);
   const storyLayerId = useSelector(storyLayerSelector);
   const mainLayerId = match?.params.mainLayerId || storyLayerId;
-  const main = useSelector((state: State) =>
-    layerListItemSelector(state, mainLayerId)
-  );
   const mainLayerDetails = useSelector((state: State) =>
     layerDetailsSelector(state, mainLayerId)
   );
@@ -76,9 +73,7 @@ const Globes: FunctionComponent = () => {
   return (
     <div className={styles.globes}>
       <Globe
-        layer={main}
         active={isMainActive}
-        isMain
         layerType={mainLayerDetails?.type}
         view={currentView}
         projection={projection}
@@ -91,7 +86,6 @@ const Globes: FunctionComponent = () => {
 
       {compare && (
         <Globe
-          layer={compare}
           active={!isMainActive}
           layerType={compareLayerDetails?.type}
           view={currentView}