Improves frontend propTypes, Changes colorPalette types

Resolves: #59
potassco · Jan 30, 2024 · a183d3d · a183d3d
1 parent 3f3d944
commit a183d3d
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 24 deletions.
diff --git a/backend/src/viasp/server/static/colorPalette.json b/backend/src/viasp/server/static/colorPalette.json
@@ -3,16 +3,16 @@
     "light": "#F4F5FA",
     "dark": "#444",
     "infoBackground": "#B3BAC5",
-    "rowShading": {
-        "0": "#a9a9a92f",
-        "1": "#ffffff"
-    },
+    "rowShading": [
+        "#a9a9a92f",
+        "#ffffff"
+    ],
     "explanationSuccess": "#e2b38a", 
-    "explanationHighlights": {
-        "0": "#98f4e2",
-        "1": "#9a8298",
-        "2": "#bbf9a9",
-        "3": "#14ceaf",
-        "4": "#e1ed5c"
-    }
+    "explanationHighlights": [
+        "#98f4e2",
+        "#9a8298",
+        "#bbf9a9",
+        "#14ceaf",
+        "#e1ed5c"
+    ]
 }
diff --git a/frontend/src/lib/contexts/ColorPalette.js b/frontend/src/lib/contexts/ColorPalette.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { COLORPALETTE } from "../types/propTypes";
 
 const ColorPaletteContext = React.createContext([]);
 
@@ -20,13 +21,5 @@ ColorPaletteProvider.propTypes = {
     /**
      * The color palette to update the color palette with
      */
-    colorPalette: PropTypes.exact({
-        primary: PropTypes.string,
-        light: PropTypes.string,
-        dark: PropTypes.string,
-        infoBackground: PropTypes.string,
-        rowShading: PropTypes.objectOf(PropTypes.string),
-        explanationSuccess: PropTypes.string,
-        explanationHighlights: PropTypes.objectOf(PropTypes.string),
-    }),
+    colorPalette: COLORPALETTE
 };
diff --git a/frontend/src/lib/contexts/HighlightedSymbol.js b/frontend/src/lib/contexts/HighlightedSymbol.js
@@ -10,7 +10,7 @@ export const useHighlightedSymbol = () => React.useContext(HighlightedSymbolCont
 export const HighlightedSymbolProvider = ({ children }) => {
     const [highlightedSymbol, setHighlightedSymbol] = React.useState(defaultHighlightedSymbol);
     const colorPalette = useColorPalette();
-    const colorArray = Object.values(colorPalette.explanationHighlights);
+    const colorArray = colorPalette.explanationHighlights;
 
     function getNextColor(l, arrowsColors){
         var c = JSON.stringify(colorArray[l % colorArray.length])

diff --git a/frontend/src/lib/main/ViaspDash.react.js b/frontend/src/lib/main/ViaspDash.react.js
@@ -37,7 +37,7 @@ function GraphContainer(props) {
     const {state: {transformations}} = useTransformations()
     const lastNodeInGraph = transformations.length - 1;
     const colorPalette = useColorPalette();
-    const background = Object.values(colorPalette.rowShading);
+    const background = colorPalette.rowShading;
 
 
     return <div className="graph_container" >

diff --git a/frontend/src/lib/types/propTypes.js b/frontend/src/lib/types/propTypes.js
@@ -41,3 +41,12 @@ export const BOX = PropTypes.exact({
     _type: PropTypes.oneOf(['Box']),
     uuid: PropTypes.string
 })
+export const COLORPALETTE = PropTypes.exact({
+    primary: PropTypes.string,
+    light: PropTypes.string,
+    dark: PropTypes.string,
+    infoBackground: PropTypes.string,
+    rowShading: PropTypes.arrayOf(PropTypes.string),
+    explanationSuccess: PropTypes.string,
+    explanationHighlights: PropTypes.arrayOf(PropTypes.string),
+})
diff --git a/frontend/viasp_dash/viasp_dash.min.js b/frontend/viasp_dash/viasp_dash.min.js
diff --git a/frontend/viasp_dash/viasp_dash.min.js.map b/frontend/viasp_dash/viasp_dash.min.js.map