Heatmap Reduced List

frontend/.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
   rules: {
     'jest/expect-expect': [
       'warn',
+
       {
         // ensure, that react tests are recognized as assertions
         assertFunctionNames: [

frontend/Dockerfile

@@ -11,7 +11,7 @@ COPY . .
 COPY ./.env ./.env
 
 #Run command npm install to install packages
-RUN npm ci
+RUN npm install
 
 #create a react production build
 RUN npm run build

frontend/package.json

@@ -91,9 +91,8 @@
     "react-markdown": "^6.0.3",
     "react-redux": "^7.2.3",
     "react-scroll-sync": "^0.11.0",
-    "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
-    "rooks": "^5.7.3"
+    "rooks": "^7.14.1"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.12.13",

frontend/public/locales/de/global.json5

@@ -42,13 +42,6 @@
     'nothing-selected': 'Wählen Sie eine Gruppe aus um diese zu bearbeiten oder erstellen Sie eine neue Gruppe.',
     'add-group': 'Neue Gruppe Erstellen',
     name: 'Name',
-    close: 'Abbrechen',
-    apply: 'Anwenden',
-    'confirm-deletion-title': 'Gruppe Löschen',
-    'confirm-deletion-text': 'Sind Sie sicher, dass Sie die Gruppe "{{groupName}}" wirklich löschen wollen?',
-    'confirm-discard-title': 'Änderungen Verwerfen',
-    'confirm-discard-text': 'Sie haben ungespeicherte Änderungen. Wollen sie diese verwerfen?',
-    discard: 'Verwerfen',
   },
   chart: {
     caseData: 'Falldaten',
@@ -61,6 +54,10 @@
     lock: 'Maximalwert feststellen',
     select: 'Farblegende auswählen',
   },
+
+  heattmapchart: {
+    textshow: 'Mehr anzeigen',
+  },
   today: 'Heute',
   more: 'Mehr',
   less: 'Weniger',

frontend/public/locales/en/global.json5

@@ -70,9 +70,9 @@
     lock: 'Lock maximum value',
     select: 'Select heatmap preset',
   },
-  today: 'Today',
-  more: 'More',
-  less: 'Less',
+  heatmapchart: {
+    textshow: 'Show more',
+  },
   search: 'Search',
   germany: 'Germany',
   'no-data': 'No Data',

frontend/src/__tests__/store/UserPreferenceSlice.test.ts

@@ -1,4 +1,10 @@
-import reducer, {selectHeatmapLegend, UserPreference} from '../../store/UserPreferenceSlice';
+import reducer, {
+  selectDefaultLegend,
+  selectHeatmapLegend,
+  setDefaultLegends,
+  setHeatmapLegends,
+  UserPreference,
+} from '../../store/UserPreferenceSlice';
 import {HeatmapLegend} from '../../types/heatmapLegend';
 
 describe('DataSelectionSlice', () => {
@@ -11,7 +17,35 @@ describe('DataSelectionSlice', () => {
         {color: 'rgb(255,255,255)', value: 1},
       ],
     },
+    heatmaps: [],
+    defaultHeatmaps: [],
   };
+  const defaultHeatmaps: HeatmapLegend[] = [
+    {
+      name: 'Default',
+      isNormalized: true,
+      steps: [
+        {color: 'rgb(255,255,255)', value: 0},
+        {color: 'rgb(255,0,0)', value: 1},
+      ],
+    },
+    {
+      name: 'Default',
+      isNormalized: true,
+      steps: [
+        {color: 'rgb(255,255,255)', value: 0},
+        {color: 'rgb(0,255,0)', value: 1},
+      ],
+    },
+    {
+      name: 'Default',
+      isNormalized: true,
+      steps: [
+        {color: 'rgb(255,255,255)', value: 0},
+        {color: 'rgb(0,0,255)', value: 1},
+      ],
+    },
+  ];
 
   test('Initial State', () => {
     expect(reducer(undefined, {type: null})).toEqual(initialState);
@@ -28,6 +62,82 @@ describe('DataSelectionSlice', () => {
     };
     expect(reducer(initialState, selectHeatmapLegend({legend: legend}))).toEqual({
       selectedHeatmap: legend,
+      heatmaps: [],
+      defaultHeatmaps: [],
+    });
+  });
+
+  test('Set Heatmap Legends', () => {
+    const legends: HeatmapLegend[] = [
+      {
+        name: 'test 1',
+        isNormalized: true,
+        steps: [
+          {color: 'rgb(255,255,255)', value: 0},
+          {color: 'rgb(204,11,234)', value: 1},
+        ],
+      },
+      {
+        name: 'test 2',
+        isNormalized: false,
+        steps: [
+          {color: 'rgb(94,254,76)', value: 0},
+          {color: 'rgb(225,199,18)', value: 150},
+          {color: 'rgb(194,96,14)', value: 500},
+          {color: 'rgb(164,25,42)', value: 2000},
+        ],
+      },
+    ];
+
+    expect(reducer(initialState, setHeatmapLegends({legends: legends}))).toEqual({
+      selectedHeatmap: {
+        name: 'uninitialized',
+        isNormalized: true,
+        steps: [
+          {color: 'rgb(255,255,255)', value: 0},
+          {color: 'rgb(255,255,255)', value: 1},
+        ],
+      },
+      heatmaps: legends,
+      defaultHeatmaps: [],
+    });
+  });
+  test('Set Default Legends', () => {
+    expect(reducer(initialState, setDefaultLegends({legends: defaultHeatmaps}))).toEqual({
+      selectedHeatmap: {
+        name: 'uninitialized',
+        isNormalized: true,
+        steps: [
+          {color: 'rgb(255,255,255)', value: 0},
+          {color: 'rgb(255,255,255)', value: 1},
+        ],
+      },
+      heatmaps: [],
+      defaultHeatmaps: defaultHeatmaps,
+    });
+  });
+  test('Change Scenario while Default Legend is selected', () => {
+    const state: UserPreference = {
+      selectedHeatmap: defaultHeatmaps[0],
+      heatmaps: [defaultHeatmaps[0]],
+      defaultHeatmaps: defaultHeatmaps,
+    };
+    expect(reducer(state, selectDefaultLegend({selectedScenario: 1}))).toEqual({
+      selectedHeatmap: defaultHeatmaps[1],
+      heatmaps: [defaultHeatmaps[1]],
+      defaultHeatmaps: defaultHeatmaps,
+    });
+  });
+  test('Change Scenario while Default Legend is not Selected', () => {
+    const state: UserPreference = {
+      selectedHeatmap: initialState.selectedHeatmap,
+      heatmaps: [defaultHeatmaps[0]],
+      defaultHeatmaps: defaultHeatmaps,
+    };
+    expect(reducer(state, selectDefaultLegend({selectedScenario: 1}))).toEqual({
+      selectedHeatmap: initialState.selectedHeatmap,
+      heatmaps: [defaultHeatmaps[1]],
+      defaultHeatmaps: defaultHeatmaps,
     });
   });
 });