organize color references

frontend/src/lib/components/Detail.react.js

@@ -13,8 +13,8 @@ function DetailSymbolPill(props) {
     const colorPalette = useColorPalette();
     return <span className="detail_atom_view_content"
                  style={{
-                     backgroundColor: colorPalette.ten.bright,
-                     color: colorPalette.sixty.dark
+                     backgroundColor: colorPalette.fifty.dark,
+                     color: colorPalette.thirty.bright
                  }}>{make_atoms_string(symbol)}</span>
 
 }
@@ -97,13 +97,13 @@ export function Detail(props) {
     }
     if (data === null) {
         return <div id="detailSidebar"
-                    style={{backgroundColor: colorPalette.sixty.dark, color: colorPalette.thirty.bright}}
+                    style={{backgroundColor: colorPalette.fifty.dark, color: colorPalette.thirty.dark}}
                     className="detail">
             <h3><CloseButton onClick={clearDetail}/>{type}</h3>
             Loading..
         </div>
     }
-    return <div id="detailSidebar" style={{backgroundColor: colorPalette.sixty.dark, color: colorPalette.thirty.bright}}
+    return <div id="detailSidebar" style={{backgroundColor: colorPalette.sixty.dark, color: colorPalette.thirty.dark}}
                 className="detail">
         <h3><CloseButton onClick={clearDetail}/>{type}</h3>
         {data.map((resp) =>

frontend/src/lib/components/Edges.react.js

@@ -4,6 +4,7 @@ import PropTypes, { node } from "prop-types";
 import useResizeObserver from "@react-hook/resize-observer";
 import {useShownNodes} from "../contexts/ShownNodes";
 import {useSettings} from "../contexts/Settings";
+import {useColorPalette} from "../contexts/ColorPalette";
 import {useFilters} from "../contexts/Filters";
 import { useShownRecursion } from "../contexts/ShownRecursion";
 import { useAnimationUpdater } from "../contexts/AnimationUpdater";
@@ -41,6 +42,7 @@ const useResize = (target) => {
 
 export function Edges(props) {
     const { usingClingraph } = props;
+    const colorPalete = useColorPalette();
     const [edges, setEdges] = React.useState([]);
     const [clingraphEdges, setClingraphEdges] = React.useState([]);
     const target = React.useRef(null)
@@ -87,11 +89,11 @@ export function Edges(props) {
     return <div ref={target} className="edge_container" >
             {edges.map(link => <LineTo
                 key={link.src + "-" + link.tgt} from={link.src} fromAnchor={"bottom center"} toAnchor={"top center"}
-                to={link.tgt} zIndex={1} borderColor={"black"} borderStyle={"solid"} borderWidth={1} />)}
+                to={link.tgt} zIndex={1} borderColor={colorPalete.seventy.dark} borderStyle={"solid"} borderWidth={1} />)}
             {!usingClingraph ? null:
             clingraphEdges.map(link => <LineTo
                 key={link.src + "-" + link.tgt} from={link.src} fromAnchor={"bottom center"} toAnchor={"top center"}
-                to={link.tgt} zIndex={1} borderColor={"black"} borderStyle={"dashed"} borderWidth={2} />)}
+                to={link.tgt} zIndex={1} borderColor={colorPalete.seventy.bright} borderStyle={"dashed"} borderWidth={2} />)}
         </div>
 
 

frontend/src/lib/components/Facts.react.js

@@ -58,7 +58,7 @@ function FactBanner(props) {
     }, [])
     const clazzName = `${fact.uuid} facts_banner noselect`
     return <div className={clazzName}
-                style={{"color": colorPalette.sixty, "backgroundColor": colorPalette.ten}}>Facts</div>
+                style={{"color": colorPalette.sixty.dark, "backgroundColor": colorPalette.ten.dark}}>Facts</div>
 }
 
 FactBanner.propTypes = {

frontend/src/lib/components/Node.react.js

@@ -150,7 +150,7 @@ function NodeContent(props) {
             </div>
         })
 
-    return <div className={containerNames} style={{ "color": colorPalette.thirty.bright }}>
+    return <div className={containerNames} style={{ "color": colorPalette.thirty.dark }}>
         <span className={classNames2}>{renderedSymbols.length > 0 ? renderedSymbols : ""}</span>
     </div>
 }
@@ -301,7 +301,7 @@ export function RecursiveSuperNode(props) {
     })
 
     return <div className={classNames}
-        style={{ "backgroundColor": colorPalette.ten.dark, "color": colorPalette.ten.dark }}
+        style={{ "backgroundColor": colorPalette.fourty.dark, "color": colorPalette.fourty.bright }}
         id={node.uuid}
         onClick={(e) => { e.stopPropagation(); notifyClick(node) }} >
         <RecursionButton node={node} />

frontend/src/lib/components/SearchResult.react.js

@@ -30,7 +30,7 @@ function SuggestionContent(props) {
     }
     if (value._type === "Signature") {
         suggestionSymbol = "  /"
-        color = colorPalette.ten.bright;
+        color = colorPalette.ten.dark;
         display = `${value.name}/${value.args}`
     }
 

frontend/src/lib/contexts/ColorPalette.js

@@ -2,35 +2,66 @@ import React from "react";
 import PropTypes from "prop-types";
 
 export const defaultPalette = {
-    ten: {dark: "#3FA7D1", bright: "#3FA7E1"},
-    twenty: { dark: "#b7a4b0" },
-    thirty: {dark: "#444", bright: "#454545"},
-    fourty: { dark: "#ff7e7e" },
-    fifty: { dark: "#c27860"},
-    sixty: {dark: "#F6F4F3", bright: "#FEFEFE"},
+    // node border colors
+    ten: {dark: "#3FA7D1", bright: "#3FA7E1"}, 
+    // row background (arbitrary number and names)
+    twenty: { dark: "#a9a9a94a", bright: "#ffffff" },
+    // text color of node, detail sidebar, row header (dark) and detail sidebar atoms (bright)
+    thirty: { dark: "#444", bright: "#F6F4F3"},
+    // recursive node supernode background (dark) and border (bright)
+    fourty: { dark: "#3FA7D1", bright: "#3FA7D1" },
+    // detail sidebar atom background (dark) and border (bright)
+    fifty:  { dark: "#3FA7D1" },
+    // background color of node, detail sidebar, row header
+    sixty: { dark: "#F6F4F3" },
+    // edge color (dark) and edge to clingraph color (bright)
+    seventy: { dark: "#000000", bright: "#000000" },
+    // arbitrary number of colors to highlight explanations
     highlight: { 0: "#d48521", 1: "#9a8298", 2: "#e0e4ac", 3: "#98f4e2", 4: "#21d485" },
-    error: {ten: "#EB4A4E", thirty: "#4C191A", sixty: "#FCE8E8"},
-    warn: {ten: "#FF9800", thirty: "#653300", sixty: "#FFF1DF"}
+    // currently not used
+    error:     {ten: "#EB4A4E", thirty: "#4C191A", sixty: "#FCE8E8"},
+    warn:      {ten: "#FF9800", thirty: "#653300", sixty: "#FFF1DF"}
 };
 
 const ColorPaletteContext = React.createContext([]);
 export const updateColorPalette = (custom_colors) => {
     if ("ten" in custom_colors) {
         defaultPalette.ten = custom_colors.ten;
     }
+    if ("twenty" in custom_colors) {
+        defaultPalette.twenty = custom_colors.twenty;
+    }
     if ("thirty" in custom_colors) {
         defaultPalette.thirty = custom_colors.thirty;
     }
+    if ("fourty" in custom_colors) {
+        defaultPalette.fourty = custom_colors.fourty;
+    }
+    if ("fifty" in custom_colors) {
+        defaultPalette.fifty = custom_colors.fifty;
+    }
     if ("sixty" in custom_colors) {
         defaultPalette.sixty = custom_colors.sixty;
     }
+    if ("seventy" in custom_colors) {
+        defaultPalette.seventy = custom_colors.seventy;
+    }
+    if ("highlight" in custom_colors) {
+        defaultPalette.highlight = custom_colors.highlight;
+    }
+    if ("error" in custom_colors) {
+        defaultPalette.error = custom_colors.error;
+    }
+    if ("warn" in custom_colors) {
+        defaultPalette.warn = custom_colors.warn;
+    }
     React.useContext(ColorPaletteContext)
     return defaultPalette;
 };
 
 export const useColorPalette = () => React.useContext(ColorPaletteContext);
 export const ColorPaletteProvider = ({children, colorPalette}) => {
-    const updatedColorPalette = updateColorPalette(colorPalette)
+    const updatedColorPalette = !colorPalette ? defaultPalette : updateColorPalette(colorPalette)
     return <ColorPaletteContext.Provider value={updatedColorPalette}>{children}</ColorPaletteContext.Provider>
 }
 
@@ -43,9 +74,15 @@ ColorPaletteProvider.propTypes = {
      * The color palette to update the color palette with
      */
     colorPalette: PropTypes.exact({
-        ten: PropTypes.string,
-        thirty: PropTypes.string,
-        sixty: PropTypes.string,
-        background: PropTypes.string
+        ten: PropTypes.object,
+        twenty: PropTypes.object,
+        thirty: PropTypes.object,
+        fourty: PropTypes.object,
+        fifty: PropTypes.object,
+        sixty: PropTypes.object,
+        seventy: PropTypes.object,
+        highlight: PropTypes.object,
+        error: PropTypes.object,
+        warn: PropTypes.object
     })
 }

frontend/src/lib/main/ViaspDash.react.js

@@ -9,7 +9,7 @@ import { Edges } from "../components/Edges.react";
 import { Arrows } from "../components/Arrows.react";
 import {initialState, nodeReducer, ShownNodesProvider} from "../contexts/ShownNodes";
 import {TransformationProvider, useTransformations} from "../contexts/transformations";
-import { ColorPaletteProvider } from "../contexts/ColorPalette";
+import { ColorPaletteProvider, useColorPalette } from "../contexts/ColorPalette"; 
 import {HighlightedNodeProvider} from "../contexts/HighlightedNode";
 import {showError, useMessages, UserMessagesProvider} from "../contexts/UserMessages";
 import {Settings} from "../components/settings";
@@ -36,7 +36,8 @@ function GraphContainer(props) {
     const {setDetail, notifyDash, usingClingraph} = props;
     const {state: {transformations}} = useTransformations()
     const lastNodeInGraph = transformations.length - 1;
-    const background = ["#a9a9a94a", "#ffffff"]
+    const colorPalette = useColorPalette();
+    const background = Object.values(colorPalette.twenty);
 
 
     return <div className="graph_container">
@@ -55,7 +56,7 @@ function GraphContainer(props) {
                                 notifyDash(clickedOn)
                                 setDetail(clickedOn.uuid)
                             }}
-                            color={background[i%2]}
+                            color={background[i % background.length]}
                         />
                         <Boxrow
                             key={transformation.id}
@@ -70,7 +71,7 @@ function GraphContainer(props) {
                         notifyDash(clickedOn)
                         setDetail(clickedOn.uuid)
                     }}
-                    color={background[i%2]}
+                    color={background[i % background.length]}
                     />
             }
         })}