colors

CamDavidsonPilon · CamDavidsonPilon · commit 54a05116b493 · 2026-01-27T14:23:55.000-05:00
diff --git a/core/pioreactor/web/static/asset-manifest.json b/core/pioreactor/web/static/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/static/static/css/main.9c7a48b7.css",
-    "main.js": "/static/static/js/main.f37e55ff.js",
+    "main.js": "/static/static/js/main.57b32fee.js",
     "static/media/pioreactor_cloud.webp": "/static/static/media/pioreactor_cloud.b15b29e435797dc69d76.webp",
     "static/media/roboto-all-500-normal.woff": "/static/static/media/roboto-all-500-normal.0ab669b7a0d19b178f57.woff",
     "static/media/roboto-all-700-normal.woff": "/static/static/media/roboto-all-700-normal.a457fde362a540fcadff.woff",
@@ -30,10 +30,10 @@
     "static/media/roboto-greek-ext-700-normal.woff2": "/static/static/media/roboto-greek-ext-700-normal.bd9854c751441ccc1a70.woff2",
     "index.html": "/static/index.html",
     "main.9c7a48b7.css.map": "/static/static/css/main.9c7a48b7.css.map",
-    "main.f37e55ff.js.map": "/static/static/js/main.f37e55ff.js.map"
+    "main.57b32fee.js.map": "/static/static/js/main.57b32fee.js.map"
   },
   "entrypoints": [
     "static/css/main.9c7a48b7.css",
-    "static/js/main.f37e55ff.js"
+    "static/js/main.57b32fee.js"
   ]
 }
diff --git a/core/pioreactor/web/static/index.html b/core/pioreactor/web/static/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/static/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Pioreactor"/><link rel="apple-touch-icon" href="/static/logo192.png"/><link rel="manifest" href="/static/manifest.json"/><script defer="defer" src="/static/static/js/main.f37e55ff.js"></script><link href="/static/static/css/main.9c7a48b7.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/static/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Pioreactor"/><link rel="apple-touch-icon" href="/static/logo192.png"/><link rel="manifest" href="/static/manifest.json"/><script defer="defer" src="/static/static/js/main.57b32fee.js"></script><link href="/static/static/css/main.9c7a48b7.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
diff --git a/core/pioreactor/web/static/static/js/main.57b32fee.js b/core/pioreactor/web/static/static/js/main.57b32fee.js
diff --git a/core/pioreactor/web/static/static/js/main.57b32fee.js.LICENSE.txt b/core/pioreactor/web/static/static/js/main.57b32fee.js.LICENSE.txt
diff --git a/core/pioreactor/web/static/static/js/main.57b32fee.js.map b/core/pioreactor/web/static/static/js/main.57b32fee.js.map
diff --git a/core/pioreactor/web/static/static/js/main.f37e55ff.js b/core/pioreactor/web/static/static/js/main.f37e55ff.js
diff --git a/frontend/src/Calibrations.jsx b/frontend/src/Calibrations.jsx
@@ -21,7 +21,8 @@ import Grid from "@mui/material/Grid";
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import {fetchTaskResult, colors, ColorCycler} from "./utilities"
+import { fetchTaskResult } from "./utilities";
+import { colors, ColorCycler, readyGreen } from "./color";
 import CalibrationChart from "./components/CalibrationChart"
 import FormLabel from '@mui/material/FormLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -35,7 +36,6 @@ import PioreactorIcon from "./components/PioreactorIcon"
 import PioreactorsIcon from './components/PioreactorsIcon';
 import TuneIcon from '@mui/icons-material/Tune';
 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
-import {readyGreen} from "./utilities"
 
 import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs';
diff --git a/frontend/src/ExperimentOverview.jsx b/frontend/src/ExperimentOverview.jsx
@@ -7,7 +7,8 @@ import Chart from "./components/Chart";
 import MediaCard from "./components/MediaCard";
 import {RunningProfilesContainer} from "./Profiles";
 import { RunningProfilesProvider} from './providers/RunningProfilesContext';
-import {getConfig, getRelabelMap, colors, ColorCycler} from "./utilities"
+import { getConfig, getRelabelMap } from "./utilities";
+import { colors, ColorCycler } from "./color";
 import Card from "@mui/material/Card";
 import Stack from "@mui/material/Stack";
 import { useMQTT } from './providers/MQTTContext';
diff --git a/frontend/src/Experiments.jsx b/frontend/src/Experiments.jsx
@@ -15,7 +15,8 @@ import MenuItem from '@mui/material/MenuItem';
 import Checkbox from '@mui/material/Checkbox';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import {getConfig, getRelabelMap, colors, ColorCycler} from "./utilities"
+import { getConfig, getRelabelMap } from "./utilities";
+import { colors, ColorCycler } from "./color";
 import DownloadIcon from '@mui/icons-material/Download';
 import { Link } from 'react-router';
 
diff --git a/frontend/src/Inventory.jsx b/frontend/src/Inventory.jsx
@@ -37,7 +37,8 @@ import { useNavigate, Link } from 'react-router';
 import UnderlineSpan from "./components/UnderlineSpan";
 import PioreactorIcon from "./components/PioreactorIcon";
 import PioreactorIconWithModel from "./components/PioreactorIconWithModel";
-import {getConfig, disconnectedGrey, lostRed, inactiveGrey, readyGreen} from "./utilities"
+import { getConfig } from "./utilities";
+import { disconnectedGrey, lostRed, inactiveGrey, readyGreen } from "./color";
 import PlayCircleOutlinedIcon from '@mui/icons-material/PlayCircleOutlined';
 import Snackbar from '@mui/material/Snackbar';
 import Menu from "@mui/material/Menu";
diff --git a/frontend/src/Leader.jsx b/frontend/src/Leader.jsx
@@ -22,7 +22,8 @@ import LoadingButton from "@mui/lab/LoadingButton";
 import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, IconButton } from '@mui/material';
 import ManageInventoryMenu from './components/ManageInventoryMenu';
 import LogTableByUnit from './components/LogTableByUnit';
-import {disconnectedGrey, lostRed, disabledColor, readyGreen, checkTaskCallback, getConfig, runPioreactorJobViaUnitAPI} from "./utilities"
+import { checkTaskCallback, getConfig, runPioreactorJobViaUnitAPI } from "./utilities";
+import { disconnectedGrey, lostRed, disabledColor, readyGreen } from "./color";
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import { Link } from 'react-router';
 
diff --git a/frontend/src/Pioreactor.jsx b/frontend/src/Pioreactor.jsx
@@ -58,7 +58,19 @@ import LogTableByUnit from "./components/LogTableByUnit";
 import { MQTTProvider, useMQTT } from './providers/MQTTContext';
 import { useExperiment } from './providers/ExperimentContext';
 import PatientButton from './components/PatientButton';
-import {getConfig, getRelabelMap, runPioreactorJob, colors, disconnectedGrey, lostRed, disabledColor, stateDisplay, fetchTaskResult} from "./utilities"
+import {
+  getConfig,
+  getRelabelMap,
+  runPioreactorJob,
+  fetchTaskResult,
+} from "./utilities";
+import {
+  colors,
+  disconnectedGrey,
+  lostRed,
+  disabledColor,
+  stateDisplay,
+} from "./color";
 import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
 import { TimeFormatSwitch, TimeWindowSwitch } from "./components/TimeControls";
 
diff --git a/frontend/src/Pioreactors.jsx b/frontend/src/Pioreactors.jsx
@@ -65,7 +65,18 @@ import ManageExperimentMenu from "./components/ManageExperimentMenu";
 import { MQTTProvider, useMQTT } from './providers/MQTTContext';
 import { useExperiment } from './providers/ExperimentContext';
 import PatientButton from './components/PatientButton';
-import {getConfig, getRelabelMap, runPioreactorJob, disconnectedGrey, lostRed, disabledColor, stateDisplay, fetchTaskResult} from "./utilities"
+import {
+  getConfig,
+  getRelabelMap,
+  runPioreactorJob,
+  fetchTaskResult,
+} from "./utilities";
+import {
+  disconnectedGrey,
+  lostRed,
+  disabledColor,
+  stateDisplay,
+} from "./color";
 import cloudImage from './assets/pioreactor_cloud.webp'
 import MissingWorkerModelModal from "./components/MissingWorkerModelModal";
 
diff --git a/frontend/src/SingleCalibrationPage.jsx b/frontend/src/SingleCalibrationPage.jsx
@@ -7,7 +7,8 @@ import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import IconButton from '@mui/material/IconButton';
-import {fetchTaskResult, colors, ColorCycler, readyGreen} from "./utilities"
+import { fetchTaskResult } from "./utilities";
+import { colors, ColorCycler, readyGreen } from "./color";
 import MuiLink from '@mui/material/Link';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
diff --git a/frontend/src/Updates.jsx b/frontend/src/Updates.jsx
@@ -33,6 +33,7 @@ import Select from '@mui/material/Select';
 import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import CloseIcon from '@mui/icons-material/Close';
+import { lostRed } from "./color";
 
 const VisuallyHiddenInput = styled('input')({
   clip: 'rect(0 0 0 0)',
@@ -46,8 +47,6 @@ const VisuallyHiddenInput = styled('input')({
   width: 1,
 });
 
-const lostRed = "#DE3618"
-
 
 function UploadArchiveAndConfirm(props) {
   const [selectedFile, setSelectedFile] = React.useState(null);
diff --git a/frontend/src/color.js b/frontend/src/color.js
@@ -111,4 +111,83 @@ const shiftHue = (color, degrees) => {
   return color;
 };
 
-export { shiftHue };
+class ColorCycler {
+  constructor(colors) {
+    this.colors = colors;
+    this.index = 0;
+    this.data = {};
+    return new Proxy(this, {
+      get: (target, property) => {
+        if (property in target.data) {
+          return target.data[property];
+        }
+        const color = target.colors[target.index];
+        target.index = (target.index + 1) % target.colors.length;
+        target.data[property] = color;
+        return color;
+      },
+    });
+  }
+}
+
+const colors = [
+  "#0077BB",
+  "#009988",
+  "#CC3311",
+  "#33BBEE",
+  "#BE5F29",
+  "#EE3377",
+  "#8E958F",
+  "#A6CEE3",
+  "#33A02C",
+  "#C97B7A",
+  "#FDBF6F",
+  "#CAB2D6",
+  "#6A3D9A",
+  "#9ACD32",
+  "#40E0D0",
+  "#737B94",
+  "#AA5CAA",
+  "#15742A",
+  "#236AD3",
+  "#445210",
+  "#62F384",
+  "#311535",
+  "#803958",
+  "#B4F2AA",
+  "#1734B8",
+];
+
+const ERROR_COLOR = "#FF8F7B";
+const WARNING_COLOR = "#ffefa4";
+const NOTICE_COLOR = "#addcaf";
+
+const readyGreen = "#176114";
+const disconnectedGrey = "#585858";
+const lostRed = "#DE3618";
+const disabledColor = "rgba(0, 0, 0, 0.38)";
+const inactiveGrey = "#99999b";
+
+const stateDisplay = {
+  init: { display: "Starting", color: readyGreen, backgroundColor: "#DDFFDC" },
+  ready: { display: "On", color: readyGreen, backgroundColor: "#DDFFDC" },
+  sleeping: { display: "Paused", color: disconnectedGrey, backgroundColor: null },
+  disconnected: { display: "Off", color: disconnectedGrey, backgroundColor: null },
+  lost: { display: "Lost", color: lostRed, backgroundColor: null },
+  NA: { display: "Not available", color: disconnectedGrey, backgroundColor: null },
+};
+
+export {
+  shiftHue,
+  ColorCycler,
+  colors,
+  ERROR_COLOR,
+  WARNING_COLOR,
+  NOTICE_COLOR,
+  readyGreen,
+  disconnectedGrey,
+  lostRed,
+  disabledColor,
+  inactiveGrey,
+  stateDisplay,
+};
diff --git a/frontend/src/components/Chart.jsx b/frontend/src/components/Chart.jsx
@@ -133,10 +133,10 @@ function Chart(props) {
         return color;
       }
       if (suffix === "45") {
-        return shiftHue(color, 10);
+        return shiftHue(color, 6);
       }
       if (suffix === "135") {
-        return shiftHue(color, -10);
+        return shiftHue(color, -6);
       }
       return color;
     },
diff --git a/frontend/src/components/LogTable.jsx b/frontend/src/components/LogTable.jsx
@@ -22,7 +22,7 @@ import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import RecordEventLogDialog from './RecordEventLogDialog';
 import Chip from '@mui/material/Chip';
 import PioreactorIcon from "./PioreactorIcon"
-import { ERROR_COLOR, WARNING_COLOR, NOTICE_COLOR } from "../utilities";
+import { ERROR_COLOR, WARNING_COLOR, NOTICE_COLOR } from "../color";
 
 // Activate the UTC plugin
 dayjs.extend(utc);
diff --git a/frontend/src/components/LogTableByUnit.jsx b/frontend/src/components/LogTableByUnit.jsx
@@ -21,7 +21,7 @@ import { Link } from 'react-router';
 import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import RecordEventLogDialog from './RecordEventLogDialog';
 
-import {ERROR_COLOR, WARNING_COLOR, NOTICE_COLOR} from "../utilities"
+import { ERROR_COLOR, WARNING_COLOR, NOTICE_COLOR } from "../color";
 
 // Activate the UTC plugin
 dayjs.extend(utc);
diff --git a/frontend/src/components/PaginatedLogsTable.jsx b/frontend/src/components/PaginatedLogsTable.jsx
@@ -15,7 +15,7 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { styled } from '@mui/material/styles';
-import {ERROR_COLOR, WARNING_COLOR, NOTICE_COLOR} from "../utilities"
+import { ERROR_COLOR, WARNING_COLOR, NOTICE_COLOR } from "../color";
 import Chip from '@mui/material/Chip';
 import PioreactorIcon from "./PioreactorIcon"
 import { Link } from 'react-router';
diff --git a/frontend/src/components/PatientButton.jsx b/frontend/src/components/PatientButton.jsx
@@ -1,8 +1,7 @@
 import React from "react";
 import CircularProgress from '@mui/material/CircularProgress';
 import Button from "@mui/material/Button";
-
-const lostRed = "#DE3618"
+import { lostRed } from "../color";
 
 export default function PatientButton({buttonText, onClick, color, variant, disabled}) {
   const [text, setText] = React.useState(buttonText)
diff --git a/frontend/src/components/SelfTestDialog.jsx b/frontend/src/components/SelfTestDialog.jsx
@@ -26,7 +26,8 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 
 import PioreactorIcon from "./PioreactorIcon"
 import RequirementsAlert from "./RequirementsAlert"
-import {runPioreactorJob, readyGreen, lostRed} from "../utilities"
+import { runPioreactorJob } from "../utilities";
+import { readyGreen, lostRed } from "../color";
 
 
 const ManageDivider = styled(Divider)(({ theme }) => ({
diff --git a/frontend/src/utilities.js b/frontend/src/utilities.js
@@ -1,4 +1,3 @@
-
 function parseINIString(data){
     var regex = {
         section: /^\s*\[\s*([^\]]*)\s*\]\s*$/,
@@ -105,61 +104,6 @@ export function runPioreactorJobViaUnitAPI(job, args = [], options = {}) {
 }
 
 
-export class ColorCycler {
-  constructor(colors) {
-    this.colors = colors;
-    this.index = 0;
-    this.data = {};
-    return new Proxy(this, {
-      get: (target, property) => {
-        if (property in target.data) {
-          return target.data[property];
-        } else {
-          const color = target.colors[target.index];
-          target.index = (target.index + 1) % target.colors.length;
-          target.data[property] = color;
-          return color;
-        }
-      }
-    });
-  }
-}
-
-
-export const colors = [
-  "#0077BB",
-  "#009988",
-  "#CC3311",
-  "#33BBEE",
-  "#BE5F29",
-  "#EE3377",
-  "#8E958F",
-  "#A6CEE3",
-  "#33A02C",
-  "#C97B7A",
-  "#FDBF6F",
-  "#CAB2D6",
-  "#6A3D9A",
-  "#9ACD32",
-  "#40E0D0",
-  "#737B94",
-  "#AA5CAA",
-  "#15742A",
-  "#236AD3",
-  "#445210",
-  "#62F384",
-  "#311535",
-  "#803958",
-  "#B4F2AA",
-  "#1734B8",
-
-];
-
-export const ERROR_COLOR = "#FF8F7B"
-export const WARNING_COLOR = "#ffefa4"
-export const NOTICE_COLOR = "#addcaf"
-
-
 // Use when you already have a result_url_path from a task response.
 export async function checkTaskCallback(callbackURL, {maxRetries = 100, delayMs = 200} = {}) {
   if (maxRetries <= 0) {
@@ -196,23 +140,6 @@ export async function fetchTaskResult(endpoint, {fetchOptions = {}, maxRetries =
   return checkTaskCallback(payload.result_url_path, {maxRetries, delayMs});
 }
 
-
-export const readyGreen = "#176114"
-export const disconnectedGrey = "#585858"
-export const lostRed = "#DE3618"
-export const disabledColor = "rgba(0, 0, 0, 0.38)"
-export const inactiveGrey = "#99999b"
-
-
-export const stateDisplay = {
-  "init":          {display: "Starting", color: readyGreen, backgroundColor: "#DDFFDC"},
-  "ready":         {display: "On", color: readyGreen, backgroundColor: "#DDFFDC"},
-  "sleeping":      {display: "Paused", color: disconnectedGrey, backgroundColor: null},
-  "disconnected":  {display: "Off", color: disconnectedGrey, backgroundColor: null},
-  "lost":          {display: "Lost", color: lostRed, backgroundColor: null},
-  "NA":            {display: "Not available", color: disconnectedGrey, backgroundColor: null},
-}
-
 export function objectWithDefaultEmpty(obj) {
   /**
    * Wraps an object in a Proxy that returns an empty object `{}`

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/static/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Pioreactor"/><link rel="apple-touch-icon" href="/static/logo192.png"/><link rel="manifest" href="/static/manifest.json"/><script defer="defer" src="/static/static/js/main.f37e55ff.js"></script><link href="/static/static/css/main.9c7a48b7.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
	`1`	+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/static/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Pioreactor"/><link rel="apple-touch-icon" href="/static/logo192.png"/><link rel="manifest" href="/static/manifest.json"/><script defer="defer" src="/static/static/js/main.57b32fee.js"></script><link href="/static/static/css/main.9c7a48b7.css" rel="stylesheet"></head><body><div id="root"></div></body></html>