Webgl upgrade 2

.gitignore

@@ -13,4 +13,4 @@
 
 3rdparty/
 Mambaforge-Linux-x86_64.sh
-dist/
+

tools/Python/mcdisplay/webgl/.gitignore

@@ -0,0 +1,2 @@
+instrument.json
+particles.json

tools/Python/mcdisplay/webgl/App.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ThreeCanvas from "./components/scene/ThreeCanvas";
+import ConfigureSceneMenu from "./components/configure-scene/ConfigureSceneMenu";
+import "./common.css";
+import LoadingIndicator from "./components/loading-indicator/LoadingIndicator";
+import { useAppContext } from "./Contexts/AppContext";
+
+export default function App() {
+  const { loading, setLoading } = useAppContext();
+  return (
+    <div id="app" className="column">
+      {loading ? <LoadingIndicator /> : null}
+      <ConfigureSceneMenu />
+      <ThreeCanvas />
+    </div>
+  );
+}

tools/Python/mcdisplay/webgl/Contexts/AppContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, ReactNode, useState } from "react";
+
+type AppContextType = {
+  loading: boolean;
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  backgroundColor: boolean;
+  toggleBackgroundColor: () => void;
+};
+
+const AppContext = createContext<AppContextType>({
+  loading: true,
+  setLoading: () => {},
+  backgroundColor: true,
+  toggleBackgroundColor: () => {},
+});
+
+interface AppProviderProps {
+  children: ReactNode;
+}
+
+export const AppProvider: React.FC<AppProviderProps> = ({ children }) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [backgroundColor, setBackgroundColor] = useState<boolean>(true);
+
+  const toggleBackgroundColor = () => {
+    setBackgroundColor((prevDarkBackground) => !prevDarkBackground);
+  };
+
+  return (
+    <AppContext.Provider
+      value={{ loading, setLoading, backgroundColor, toggleBackgroundColor }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const useAppContext = () => useContext(AppContext);

tools/Python/mcdisplay/webgl/Contexts/CameraContext.jsx

@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useState } from "react";
+import { Vector3 } from "three";
+
+const CameraContext = createContext({
+  camPos: new Vector3(10, 20, 30),
+  camPosHome: new Vector3(10, 20, 30),
+  camPosSide: new Vector3(0, 20, 0),
+  camPosTop: new Vector3(0, 0, 30),
+  setCamPos: () => {},
+  setCamPosHome: () => {},
+  setCamPosSide: () => {},
+  setCamPosTop: () => {},
+  logMessage: () => {},
+});
+
+export const CameraProvider = ({ children }) => {
+  const [camPos, setCamPos] = useState(new Vector3(10, 20, 30));
+  const [camPosHome, setCamPosHome] = useState(new Vector3(10, 20, 30));
+  const [camPosSide, setCamPosSide] = useState(new Vector3(0, 0, 30));
+  const [camPosTop, setCamPosTop] = useState(new Vector3(0, 30, 0));
+
+  const handleSetCamPos = (position) => {
+    setCamPos(position);
+  };
+
+  return (
+    <CameraContext.Provider
+      value={{
+        camPos,
+        setCamPos: handleSetCamPos,
+        camPosHome,
+        setCamPosHome,
+        camPosSide,
+        setCamPosSide,
+        camPosTop,
+        setCamPosTop,
+      }}
+    >
+      {children}
+    </CameraContext.Provider>
+  );
+};
+
+export const useCameraContext = () => useContext(CameraContext);

tools/Python/mcdisplay/webgl/Contexts/ComponentsContext.tsx

@@ -0,0 +1,53 @@
+import React, {
+  ReactNode,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+} from "react";
+import { Component } from "../model/Component";
+import { fetchJSON } from "../utils/fetch";
+import { initializeInstrument } from "../data-utils/initInstrument";
+
+type ComponentsContextType = {
+  components: Component[];
+  setComponents: React.Dispatch<React.SetStateAction<Component[]>>;
+};
+
+const ComponentsContext = createContext<ComponentsContextType>({
+  components: [],
+  setComponents: () => {},
+});
+
+interface ComponentsProviderProps {
+  children: ReactNode;
+}
+
+export const ComponentsProvider: React.FC<ComponentsProviderProps> = ({
+  children,
+}) => {
+  const [components, _setComponents] = useState<Component[]>([]);
+
+  useEffect(() => {
+    fetchJSON("../instrument.json").then((data) => {
+      if (data) {
+        const instrument = initializeInstrument(data);
+        _setComponents(instrument.components);
+      } else {
+        console.warn("Instrument data is missing");
+      }
+    });
+  }, []);
+
+  const setComponents = (newComponents: React.SetStateAction<Component[]>) => {
+    _setComponents(newComponents);
+  };
+
+  return (
+    <ComponentsContext.Provider value={{ components, setComponents }}>
+      {children}
+    </ComponentsContext.Provider>
+  );
+};
+
+export const useComponentsContext = () => useContext(ComponentsContext);

tools/Python/mcdisplay/webgl/Contexts/GridContext.jsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext, useState } from "react";
+
+const GridContext = createContext({
+  gridSize: 100,
+  gridDivisions: 100,
+  setGridSize: (size, divisions) => {},
+
+  showXY: false,
+  showXZ: true,
+  showYZ: false,
+  toggleXY: () => {},
+  toggleXZ: () => {},
+  toggleYZ: () => {},
+});
+
+export const GridProvider = ({ children }) => {
+  const [gridSize, setGridSize] = useState(100);
+  const [gridDivisions, setGridDivisions] = useState(100);
+  const updateGridSize = (size, divisions) => {
+    setGridSize(size);
+    setGridDivisions(divisions);
+  };
+
+  const [showXY, setShowXY] = useState(false);
+  const [showXZ, setShowXZ] = useState(true);
+  const [showYZ, setShowYZ] = useState(false);
+
+  const toggleXY = () => setShowXY(!showXY);
+  const toggleXZ = () => setShowXZ(!showXZ);
+  const toggleYZ = () => setShowYZ(!showYZ);
+
+  return (
+    <GridContext.Provider
+      value={{
+        gridSize,
+        gridDivisions,
+        setGridSize: updateGridSize,
+        showXY,
+        showXZ,
+        showYZ,
+        toggleXY,
+        toggleXZ,
+        toggleYZ,
+      }}
+    >
+      {children}
+    </GridContext.Provider>
+  );
+};
+
+export const useGridContext = () => useContext(GridContext);

tools/Python/mcdisplay/webgl/Contexts/RaysContext.tsx

@@ -0,0 +1,133 @@
+import React, { ReactNode, createContext, useContext, useState } from "react";
+import { RayData } from "../model/Rays";
+
+type RaysContextType = {
+  showAllRays: boolean;
+  toggleShowAllRays: () => void;
+  play: boolean;
+  setPlay: React.Dispatch<React.SetStateAction<boolean>>;
+  prevRayIndex: number;
+  currentRayIndex: number;
+  setCurrentRayIndex: (index: number) => void;
+  showScatterPoints: boolean;
+  toggleScatterPoints: () => void;
+  showRays: boolean;
+  toggleRays: () => void;
+  rays: RayData;
+  setRays: React.Dispatch<React.SetStateAction<RayData>>;
+  handleNextClick: () => void;
+  handlePreviousClick: () => void;
+};
+
+const RaysContext = createContext<RaysContextType>({
+  showAllRays: false,
+  toggleShowAllRays: () => {},
+  play: false,
+  setPlay: () => {},
+  prevRayIndex: 0,
+  currentRayIndex: 0,
+  setCurrentRayIndex: () => {},
+  showScatterPoints: true,
+  toggleScatterPoints: () => {},
+  showRays: false,
+  toggleRays: () => {},
+  rays: { rays: [], numrays: 0, vmin: 0, vmax: 0 },
+  setRays: () => {},
+  handleNextClick: () => {},
+  handlePreviousClick: () => {},
+});
+
+interface RaysProviderProps {
+  children: ReactNode;
+}
+
+export const RaysProvider: React.FC<RaysProviderProps> = ({ children }) => {
+  const [showScatterPoints, setShowScatterPoints] = useState(true);
+  const [rays, setRays] = useState<RayData>({
+    rays: [],
+    numrays: 0,
+    vmin: 0,
+    vmax: 0,
+  });
+  const [showRays, setShowRays] = useState(false);
+  const [currentRayIndex, _setCurrentRayIndex] = useState(0);
+  const [prevRayIndex, setPrevRayIndex] = useState(0);
+  const [play, setPlay] = useState(false);
+  const [showAllRays, setShowAllRays] = useState(false);
+
+  const toggleShowAllRays = () => {
+    setShowAllRays((prevShowAllRays) => !prevShowAllRays);
+  };
+
+  const setCurrentRayIndex = (
+    indexOrUpdater: number | ((prevIndex: number) => number)
+  ) => {
+    if (typeof indexOrUpdater === "function") {
+      _setCurrentRayIndex((prevIndex) => {
+        const newIndex = indexOrUpdater(prevIndex);
+        setPrevRayIndex(prevIndex);
+        return newIndex;
+      });
+    } else {
+      setPrevRayIndex(currentRayIndex);
+      _setCurrentRayIndex(indexOrUpdater);
+    }
+  };
+
+  const toggleScatterPoints = () => {
+    setShowScatterPoints((prevShowScatterPoints) => !prevShowScatterPoints);
+  };
+
+  const toggleRays = () => {
+    setPlay(false);
+    setShowRays((prevShowRays) => !prevShowRays);
+  };
+
+  const handleNextClick = () => {
+    setCurrentRayIndex((prevIndex) => {
+      const numRays = rays.rays.length - 1;
+      if (prevIndex >= numRays) {
+        return 0; // Start from the beginning
+      } else {
+        return prevIndex + 1;
+      }
+    });
+  };
+
+  const handlePreviousClick = () => {
+    setCurrentRayIndex((prevIndex) => {
+      const numRays = rays.rays.length - 1;
+      if (prevIndex <= 0) {
+        return numRays; // Go to the last ray
+      } else {
+        return prevIndex - 1;
+      }
+    });
+  };
+
+  return (
+    <RaysContext.Provider
+      value={{
+        showAllRays,
+        toggleShowAllRays,
+        play,
+        setPlay,
+        prevRayIndex,
+        currentRayIndex,
+        setCurrentRayIndex,
+        showScatterPoints,
+        toggleScatterPoints,
+        showRays,
+        toggleRays,
+        rays,
+        setRays,
+        handleNextClick,
+        handlePreviousClick,
+      }}
+    >
+      {children}
+    </RaysContext.Provider>
+  );
+};
+
+export const useRaysContext = () => useContext(RaysContext);