feat: add Integrated alert layer

configs/layer-config.ts

@@ -8,6 +8,7 @@ export const supportedLayers = [
   'webtiled',
   'imagery',
   'glad',
+  'integrated-alert-layer',
   'primed',
   'tree-cover',
   'tree-cover-height',
@@ -21,6 +22,27 @@ export const rDataLayer = [
     type: 'remoteDataLayer',
     uuid: '9e0c1e1e-a0a3-457f-a373-4104820f7a50',
     groupId: 'GROUP_LC'
+  },
+  {
+    id: 'GFW_INTEGRATED_ALERTS',
+    order: 9,
+    type: 'remoteDataLayer',
+    uuid: 'bd58f25d-d3bb-4d59-9daa-cecddd27d9f4',
+    groupId: 'GROUP_LCD'
+  },
+  {
+    id: 'GLAD_S2_ALERTS',
+    order: 10,
+    type: 'remoteDataLayer',
+    uuid: '3b869953-48c4-48d0-8023-5c64a311f3dd',
+    groupId: 'GROUP_LCD'
+  },
+  {
+    id: 'RADD_ALERTS',
+    order: 11,
+    type: 'remoteDataLayer',
+    uuid: '440e53d0-36b3-47ad-993a-1c2018c3942c',
+    groupId: 'GROUP_LCD'
   }
 ];
 export const defaultAPIFlagshipLayers = [
@@ -272,3 +294,20 @@ export const drySpellMarks = {
     style: {}
   }
 };
+export const gfwMarks = {
+  '0': {
+    value: '0',
+    label: '2020-03-31',
+    style: {}
+  },
+  '365': {
+    value: '365',
+    label: '2021-03-31',
+    style: {}
+  },
+  '730': {
+    value: '730',
+    label: '2022-03-31',
+    style: {}
+  }
+};

package.json

@@ -40,6 +40,7 @@
     "esri-loader": "^3.0.0",
     "lodash-es": "^4.17.15",
     "moment": "^2.29.1",
+    "png-ts": "0.0.3",
     "rc-slider": "^9.7.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",

src/css/leftpanel.scss

@@ -7,7 +7,7 @@
   left: 20px;
   width: 300px;
   background: $white;
-  box-shadow: 0px 1px 2px rgba(85, 85, 85, 0.25);
+  box-shadow: 0 1px 2px rgba(85, 85, 85, 0.25);
   max-height: 50rem;
   // overflow-y: scroll;
 
@@ -373,7 +373,7 @@
   height: 560px;
   color: $dark-grey;
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: visible;
 }
 
 .tab-header-container {
@@ -473,7 +473,7 @@
   display: grid;
   grid-template-columns: 1fr;
   justify-items: left;
-  margin: 5px 0px 10px 10px;
+  margin: 5px 0 10px 10px;
   font-size: 11px;
   p {
     margin: 0;
@@ -502,7 +502,8 @@
   }
 }
 
-.glad-control-container {
+.glad-control-container,
+.gfw-control-container {
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
@@ -619,14 +620,12 @@
       border-radius: 35px;
       text-align: center;
       cursor: pointer;
-      padding: 0rem 0.5rem;
+      padding: 0 0.5rem;
       background-color: white;
     }
 
     .title-wrapper {
       .layer-label {
-        font-size: 0.8rem;
-        margin-left: 0.5rem;
         font-size: 0.8rem;
         margin-left: 0.5rem;
         max-width: 12rem;
@@ -652,7 +651,10 @@
     display: flex;
     padding: 0 1rem;
     align-items: center;
-    margin: 0rem 0rem 1rem 0rem;
+    margin: 0 0 1rem 0;
+    padding-bottom: 10px;
+    position: relative;
+    left: -10px;
 
     button {
       color: $base-yellow;
@@ -663,9 +665,18 @@
     }
 
     .rc-slider {
+      .rc-slider-tooltip {
+        position: absolute;
+        .rc-slider-tooltip-inner {
+          min-width: 79px;
+        }
+      }
       &.playing {
         background-color: #e9e9e9;
       }
+      .rc-slider-mark-text {
+        width: 63px;
+      }
     }
   }
 
@@ -918,7 +929,7 @@
         display: block;
         white-space: pre;
         min-height: 1.2em;
-        padding: 0px 2px 1px;
+        padding: 0 2px 1px;
       }
       option:after {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -1002,7 +1013,29 @@
     color: #fff;
   }
 }
-
+.gfw-alert-picker-wrapper {
+  text-align: center;
+  span {
+    font-size: 12px;
+  }
+  .toggle {
+    position: relative;
+    background: transparent;
+    width: 11rem;
+    padding: 5px;
+    font-size: 16px;
+    line-height: 1;
+    height: 1.5rem;
+    border-radius: 16px;
+    -webkit-appearance: none;
+    margin-top: auto;
+    margin-bottom: auto;
+    border: 1px solid $base-yellow;
+    background-color: $white;
+    color: $dark-grey;
+    font-size: 11px;
+  }
+}
 .recent-imagery-container {
   font-family: $fira-sans;
   color: #555;
@@ -1015,7 +1048,7 @@
   background-color: #fff;
   border-radius: 2px;
   border: 0.5px solid #80808033;
-  box-shadow: 1px 2px 1px 0px rgba(85, 85, 85, 0.18);
+  box-shadow: 1px 2px 1px 0 rgba(85, 85, 85, 0.18);
 
   p {
     margin: 0;
@@ -1050,7 +1083,7 @@
     border-radius: 35px;
     text-align: center;
     cursor: pointer;
-    padding: 0rem 0.5rem;
+    padding: 0 0.5rem;
   }
 
   .date-filters {