feat(hover-legend): add legend with hover values (#807)

* feat(hover-legend): add legend with hover values * refactor(legend): remove ternary operator * refactor(legend): rename to hoverLegendValues * refactor(layers): remove legendValues from interface * refactor(hoverLegend): add legend values to metadata, add legend component * refactor(styles): remove classnames
ubilabs · Jan 12, 2021 · f972072 · f972072
1 parent 124b76f
commit f972072
Show file tree

Hide file tree

Showing 9 changed files with 251 additions and 9 deletions.
diff --git a/data/layers-config.json b/data/layers-config.json
@@ -78,7 +78,109 @@
       "month": "long"
     },
     "filter": "nearest",
-    "legendValues": []
+    "legendValues": [
+      {"value": "No data", "color": " rgb(0, 0, 0)"},
+      {"value": "Cropland, rainfed", "color": "rgb(255, 255, 100)"},
+      {"value": "Herbaceous cover", "color": "rgb(255, 255, 100)"},
+      {"value": "Tree or shrub cover", "color": "rgb(255, 255, 0)"},
+      {
+        "value": "Cropland, irrigated or post-flooding",
+        "color": "rgb(170, 240, 240)"
+      },
+      {
+        "value": "Mosaic cropland (>50%) / natural vegetation (tree, shrub, herbaceous cover) (<50%)",
+        "color": "rgb(220, 240, 100)"
+      },
+      {
+        "value": "Mosaic natural vegetation (tree, shrub, herbaceous cover) (>50%) / cropland (<50%)",
+        "color": "rgb(200, 200, 100)"
+      },
+      {
+        "value": "Tree cover, broadleaved, evergreen, closed to open (>15%)",
+        "color": "rgb(0, 100, 0)"
+      },
+      {
+        "value": "Tree cover, broadleaved, deciduous, closed to open (>15%)",
+        "color": "rgb(0, 160, 0)"
+      },
+      {
+        "value": "Tree cover, broadleaved, deciduous, closed (>40%)",
+        "color": "rgb(0, 160, 0)"
+      },
+      {
+        "value": "Tree cover, broadleaved, deciduous, open (15-40%)",
+        "color": "rgb(170, 200, 0)"
+      },
+      {
+        "value": "Tree cover, needleleaved, evergreen, closed to open (>15%)",
+        "color": "rgb(0, 60, 0)"
+      },
+      {
+        "value": "Tree cover, needleleaved, evergreen, closed (>40%)",
+        "color": "rgb(0, 60, 0)"
+      },
+      {
+        "value": "Tree cover, needleleaved, evergreen, open (15-40%)",
+        "color": "rgb(0, 80, 0)"
+      },
+      {
+        "value": "Tree cover, needleleaved, deciduous, closed to open (>15%)",
+        "color": "rgb(40, 80, 0)"
+      },
+      {
+        "value": "Tree cover, needleleaved, deciduous, closed (>40%)",
+        "color": "rgb(40, 80, 0)"
+      },
+      {
+        "value": "Tree cover, needleleaved, deciduous, open (15-40%)",
+        "color": "rgb(40, 100, 0)"
+      },
+      {
+        "value": "Tree cover, mixed leaf type (broadleaved and needleleaved)",
+        "color": "rgb(120, 130, 0)"
+      },
+      {
+        "value": "Mosaic tree and shrub (>50%) / herbaceous cover (<50%)",
+        "color": "rgb(140, 160, 0)"
+      },
+      {
+        "value": "Mosaic herbaceous cover (>50%) / tree and shrub (<50%)",
+        "color": "rgb(190, 150, 0)"
+      },
+      {"value": "Shrubland", "color": "rgb(150, 100, 0)"},
+      {"value": "Shrubland evergreen", "color": "rgb(120, 75, 0)"},
+      {"value": "Shrubland deciduous", "color": "rgb(150, 100, 0)"},
+      {"value": "Grassland", "color": "rgb(255, 180, 50)"},
+      {"value": "Lichens and mosses", "color": "rgb(255, 220, 210)"},
+      {
+        "value": "Sparse vegetation (tree, shrub, herbaceous cover) (<15%)",
+        "color": "rgb(255, 235, 175)"
+      },
+      {"value": "Sparse tree (<15%)", "color": "rgb(255, 200, 100)"},
+      {"value": "Sparse shrub (<15%)", "color": "rgb(255, 210, 120)"},
+      {
+        "value": "Sparse herbaceous cover (<15%)",
+        "color": "rgb(255, 235, 175)"
+      },
+      {
+        "value": "Tree cover, flooded, fresh or brakish water",
+        "color": "rgb(0, 120, 90)"
+      },
+      {
+        "value": "Tree cover, flooded, saline water",
+        "color": "gb(0, 150, 120)"
+      },
+      {
+        "value": "Shrub or herbaceous cover, flooded, fresh/saline/brakish water",
+        "color": "rgb(0, 220, 130)"
+      },
+      {"value": "Urban areas", "color": "rgb(195, 20, 0)"},
+      {"value": "Bare areas", "color": "rgb(255, 245, 215)"},
+      {"value": "Consolidated bare areas", "color": "rgb(220, 220, 220)"},
+      {"value": "Unconsolidated bare areas", "color": "rgb(255, 245, 215)"},
+      {"value": "Water bodies", "color": "rgb(0, 70, 200)"},
+      {"value": "Permanent snow and ice", "color": "rgb(255, 255, 255)"}
+    ]
   },
   "sea_state.swh_mean": {
     "colorMap": "viridis",
@@ -154,7 +256,16 @@
       "year": "numeric",
       "month": "long"
     },
-    "legendValues": ["1825 ppm", "1800", "1775", "1750", "1725", "1700", "1675", "1650"]
+    "legendValues": [
+      "1825 ppm",
+      "1800",
+      "1775",
+      "1750",
+      "1725",
+      "1700",
+      "1675",
+      "1650"
+    ]
   },
   "lakes.lake_surface_water_temperature": {
     "colorMap": "custom",

diff --git a/scripts/update-metadata.sh b/scripts/update-metadata.sh
@@ -4,9 +4,9 @@
 # Usage: ./scripts/update-metadata.sh <layerId (optional)>
 
 
-version=0.9.1
+version=0.11.1
 workingDir="./download"
-layersConfigFile="../data/layers-config.json"
+layersConfigFile="./data/layers-config.json"
 
 # take optional layer ID from command line argument
 layerID=$1

diff --git a/src/scripts/components/layers/hover-legend/hover-legend.styl b/src/scripts/components/layers/hover-legend/hover-legend.styl
@@ -0,0 +1,73 @@
+@require '../../../../variables.styl'
+
+.hoverLegend
+  position: absolute
+  top: 50%
+  left: emCalc(22px)
+  z-index: 1
+  display: flex
+  flex-direction: row
+  height: 40%
+  color: white
+  transform: translateY(-50%)
+  user-select: none
+
+.rightSided
+  right: emCalc(22px)
+  left: auto
+  flex-direction: row-reverse
+
+  .values
+    padding-right: emCalc(8px, 14)
+    padding-left: 0
+    text-align: right
+
+.color
+  width: 8px
+  height: 100%
+
+.values
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  padding-left: emCalc(8px, 14)
+  text-shadow: 0px 0px 2px $plainBlack
+  font-size: 14px
+  font-family: 'NotesESA', 'Arial', sans-serif
+
+.hoverLegend
+  display: flex
+  flex-direction: column
+
+  > :first-child
+    .color
+      border-top-left-radius: 5px
+      border-top-right-radius: 5px
+
+  > :last-child
+    .color
+      border-bottom-right-radius: 5px
+      border-bottom-left-radius: 5px
+
+  > :hover
+    .color
+      box-shadow: inset 0 0 0.1em $plainBlack
+
+.legendItem
+  display: flex
+  width: 100%
+  height: 100%
+
+.hoverValue
+  position: absolute
+  display: block
+  margin: 0 emCalc(15px)
+  width: max-content
+  text-shadow: 0px 0px 2px $plainBlack
+  font-size: 14px
+  font-family: 'NotesESA', 'Arial', sans-serif
+  line-height: 50%
+
+.rightSided
+  .legendItem
+    flex-direction: row-reverse
diff --git a/src/scripts/components/layers/hover-legend/hover-legend.tsx b/src/scripts/components/layers/hover-legend/hover-legend.tsx
@@ -0,0 +1,34 @@
+import React, {FunctionComponent, useState} from 'react';
+import cx from 'classnames';
+
+import {LegendValueColor} from '../../../types/legend-value-color';
+
+import styles from './hover-legend.styl';
+
+interface Props {
+  values: LegendValueColor[];
+  isCompare?: boolean;
+}
+
+const HoverLegend: FunctionComponent<Props> = ({values, isCompare}) => {
+  const [legendValue, setLegendValue] = useState('');
+
+  return (
+    <div className={cx(styles.hoverLegend, isCompare && styles.rightSided)}>
+      {values.map((legendItem, index) => (
+        <div className={styles.legendItem} key={index}>
+          <div
+            className={styles.color}
+            style={{backgroundColor: legendItem.color}}
+            onMouseOver={() => setLegendValue(legendItem.value)}
+            onMouseLeave={() => setLegendValue('')}></div>
+          {legendValue === legendItem.value && (
+            <span className={styles.hoverValue}>{legendValue}</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default HoverLegend;
diff --git a/src/scripts/components/layers/layer-legend/layer-legend.styl b/src/scripts/components/layers/layer-legend/layer-legend.styl
@@ -35,3 +35,12 @@
   text-shadow: 0px 0px 2px $plainBlack
   font-size: 14px
   font-family: 'NotesESA', 'Arial', sans-serif
+
+.legendItem
+  display: flex
+  width: 100%
+  height: 100%
+
+.rightSided
+  .legendItem
+    flex-direction: row-reverse
diff --git a/src/scripts/components/layers/layer-legend/layer-legend.tsx b/src/scripts/components/layers/layer-legend/layer-legend.tsx
@@ -56,6 +56,7 @@ const LayerLegend: FunctionComponent<Props> = ({
         style={{backgroundColor: getBackgroundColor(basemap)}}
         src={imageUrl}
       />
+
       <div className={styles.values}>
         {values.map((value, index) => (
           <div className={styles.value} key={value}>

diff --git a/src/scripts/components/main/data-viewer/data-viewer.tsx b/src/scripts/components/main/data-viewer/data-viewer.tsx
@@ -22,12 +22,14 @@ import Gallery from '../gallery/gallery';
 import GlobeNavigation from '../globe-navigation/globe-navigation';
 import LayerLegend from '../../layers/layer-legend/layer-legend';
 import {useImageLayerData} from '../../../hooks/use-image-layer-data';
+import HoverLegend from '../../layers/hover-legend/hover-legend';
 
 import {GlobeView} from '../../../types/globe-view';
 import {Marker} from '../../../types/marker-type';
 import {LayerType} from '../../../types/globe-layer-type';
 import {GlobeImageLayerData} from '../../../types/globe-image-layer-data';
 import {Layer} from '../../../types/layer';
+import {LegendValueColor} from '../../../types/legend-value-color';
 
 import styles from './data-viewer.styl';
 
@@ -146,12 +148,20 @@ const DataViewer: FunctionComponent<Props> = ({
     <div className={styles.dataViewer}>
       {[mainLayerDetails, compareLayerDetails]
         .filter((layer): layer is Layer => Boolean(layer))
-        .map(
-          ({id, maxValue, minValue, units, basemap, legendValues}, index) => (
+        .map(({id, maxValue, minValue, units, basemap, legendValues}, index) =>
+          id === 'land_cover.lccs_class' ? (
+            <HoverLegend
+              key={id}
+              values={legendValues as LegendValueColor[]}
+              isCompare={index > 0}
+            />
+          ) : (
             <LayerLegend
               key={id}
               id={id}
-              values={legendValues || [maxValue || 0, minValue || 0]}
+              values={
+                (legendValues as string[]) || [maxValue || 0, minValue || 0]
+              }
               unit={units}
               basemap={basemap}
               isCompare={index > 0}

diff --git a/src/scripts/types/layer.d.ts b/src/scripts/types/layer.d.ts
@@ -1,6 +1,6 @@
 import {BasemapId} from '../types/basemap';
-import {GlobeView} from './globe-view';
 import {LayerType} from './globe-layer-type';
+import {LegendValueColor} from './legend-value-color';
 
 export interface Layer {
   id: string;
@@ -20,6 +20,6 @@ export interface Layer {
   minValue: number;
   maxValue: number;
   units: string;
-  legendValues: string[];
+  legendValues: string[] | LegendValueColor[];
   legendBackgroundColor: string;
 }
diff --git a/src/scripts/types/legend-value-color.ts b/src/scripts/types/legend-value-color.ts
@@ -0,0 +1,4 @@
+export interface LegendValueColor {
+  value: string;
+  color: string;
+}