Merge branch 'main' into EDSC-3904

serverless-configs/aws-infrastructure-resources.yml

@@ -138,6 +138,53 @@ Resources:
                   - states:*
                 Resource: '*'
 
+  # Redis Cache for browse-scaler
+  RedisSecurityGroup:
+    Type: AWS::EC2::SecurityGroup
+    Properties:
+      GroupDescription: Ingress for Redis Cluster
+      VpcId: ${env:VPC_ID}
+      SecurityGroupIngress:
+      - IpProtocol: tcp
+        FromPort: 1521
+        ToPort: 1521
+
+  RedisCacheSubnetGroup:
+    Type: AWS::ElastiCache::SubnetGroup
+    Properties:
+      CacheSubnetGroupName: browse-scaler-${self:provider.stage}
+      Description: 'Redis Cache Subnet Group'
+      SubnetIds:
+        - ${env:SUBNET_ID_A}
+        - ${env:SUBNET_ID_B}
+
+  RedisParameterGroup:
+    Type: AWS::ElastiCache::ParameterGroup
+    Properties:
+      CacheParameterGroupFamily: redis7
+      Description: 'Redis ElasticCache Parameter Group'
+      Properties:
+        maxmemory-policy: allkeys-lru
+
+  RedisElasticCacheCluster:
+    DependsOn: RedisSecurityGroup
+    Type: AWS::ElastiCache::CacheCluster
+    Properties:
+      Engine: redis
+      EngineVersion: '7.0'
+      Port: 1521
+      ClusterName: browse-scaler-${self:provider.stage}
+      CacheNodeType: cache.t2.medium
+      NumCacheNodes: 1
+      # In transit encryption is not currenlty supported with the REDIS engine.
+      # TransitEncryptionEnabled: true
+      CacheParameterGroupName:
+        Ref: RedisParameterGroup
+      VpcSecurityGroupIds:
+      - "Fn::GetAtt": RedisSecurityGroup.GroupId
+      CacheSubnetGroupName:
+        Ref: RedisCacheSubnetGroup
+
 # Output the following resources so that other stacks can access the values
 Outputs:
   DbPasswordSecret:

static/src/js/components/Legend/Legend.js

@@ -54,9 +54,12 @@ export const Legend = ({
   const [colormapIsRendered, setColormapIsRendered] = useState(false)
 
   useEffect(() => {
-    if (barRef.current && colorMap.scale) {
-      const { scale = {} } = colorMap
-      const { colors = [], labels = [] } = scale
+    if (barRef.current && (colorMap.scale || colorMap.classes)) {
+      const { scale = {}, classes = {} } = colorMap
+      let { colors = [], labels = [] } = scale
+      if (Object.keys(classes).length > 0) {
+        ({ colors = [], labels = [] } = classes)
+      }
 
       // Create a canvas element to display the colormap.
       const canvas = barRef.current.getContext('2d')
@@ -75,12 +78,23 @@ export const Legend = ({
   }, [barRef.current, colorMap])
 
   // If no colormap is available, hide the legend.
-  if (!colorMap || !colorMap.scale) return null
-
-  const { scale = {} } = colorMap
-  const { labels = [], colors = [] } = scale
-  const minLabel = labels[0]
-  const maxLabel = labels[labels.length - 1]
+  if (!colorMap || (!colorMap.scale && !colorMap.classes)) return null
+
+  const { scale = {}, classes = {} } = colorMap
+  let { colors = [], labels = [] } = scale
+  let minLabel
+  let maxLabel
+
+  const qualitative = Object.keys(classes).length > 0
+  const hoverPrompt = 'Hover for class names'
+  if (qualitative) {
+    ({ colors = [], labels = [] } = classes)
+    minLabel = hoverPrompt
+    maxLabel = null
+  } else {
+    [minLabel] = labels
+    maxLabel = labels[labels.length - 1]
+  }
 
   /**
    * Resets the focus state when a users mouse leaves the colormap.
@@ -153,7 +167,7 @@ export const Legend = ({
                 {
                   minLabel && (
                     <span
-                      className="legend__label legend__label--min"
+                      className={`legend__label legend__label--min ${qualitative ? 'legend__hover-prompt' : ''}`}
                       data-testid="legend-label-min"
                     >
                       {replaceSupportedHtmlEntities(minLabel)}

static/src/js/components/Legend/Legend.scss

@@ -59,6 +59,10 @@
     letter-spacing: 0.01rem;
   }
 
+  &__hover-prompt {
+    font-style: italic;
+  }
+
   &__meta {
     position: relative;
     display: flex;

static/src/js/components/Legend/__tests__/Legend.test.js

@@ -5,7 +5,7 @@ import 'jest-canvas-mock'
 
 import Legend from '../Legend'
 
-const validColorMap = {
+const quantitativeColorMap = {
   scale: {
     colors: [
       '#080008',
@@ -24,6 +24,25 @@ const validColorMap = {
   }
 }
 
+const qualitativeColorMap = {
+  classes: {
+    colors: [
+      '#080008',
+      '#100010',
+      '#180018',
+      '#200020',
+      '#280028'
+    ],
+    labels: [
+      'Not Water',
+      'Open Water',
+      'Partial Surface Water',
+      'Snow/Ice',
+      'Cloud'
+    ]
+  }
+}
+
 describe('Legend', () => {
   describe('when no colormap is provided', () => {
     test('does not render the component', () => {
@@ -34,7 +53,7 @@ describe('Legend', () => {
   })
 
   describe('when a colormap is provided', () => {
-    describe('if the scale property does not exist', () => {
+    describe('if neither the scale or class property exist', () => {
       test('does not render the component', () => {
         const { container } = render(<Legend colorMap={{ test: {} }} />)
 
@@ -44,25 +63,49 @@ describe('Legend', () => {
 
     describe('if the scale property exists', () => {
       test('renders the component', () => {
-        const { container } = render(<Legend colorMap={validColorMap} />)
+        const { container } = render(<Legend colorMap={quantitativeColorMap} />)
 
         expect(container).not.toBeEmptyDOMElement()
       })
 
       test('renders the min label', () => {
-        render(<Legend colorMap={validColorMap} />)
+        render(<Legend colorMap={quantitativeColorMap} />)
 
         const minLabel = screen.queryByText('0.004 – 0.008 mm')
 
         expect(minLabel).toBeInTheDocument()
       })
 
       test('renders and encodes the max label', () => {
-        render(<Legend colorMap={validColorMap} />)
+        render(<Legend colorMap={quantitativeColorMap} />)
 
-        const minLabel = screen.queryByText('≥ 0.025 mm')
+        const maxLabel = screen.queryByText('≥ 0.025 mm')
 
-        expect(minLabel).toBeInTheDocument()
+        expect(maxLabel).toBeInTheDocument()
+      })
+    })
+
+    describe('if the class property exists', () => {
+      test('renders the component', () => {
+        const { container } = render(<Legend colorMap={qualitativeColorMap} />)
+
+        expect(container).not.toBeEmptyDOMElement()
+      })
+
+      test('renders the hover prompt', () => {
+        render(<Legend colorMap={qualitativeColorMap} />)
+
+        const hoverPrompt = screen.queryByText('Hover for class names')
+
+        expect(hoverPrompt).toBeInTheDocument()
+      })
+
+      test('does not render the max label', () => {
+        render(<Legend colorMap={qualitativeColorMap} />)
+
+        const maxLabel = screen.queryByText('Cloud')
+
+        expect(maxLabel).not.toBeInTheDocument()
       })
     })
   })