Improved Plotting

app/src/App.css

@@ -81,3 +81,62 @@
   height: 100%;
   border: none;
 }
+:root {
+  --handle-size: 12px; /* Base size for the handle */
+  --handle-color: rgb(48, 75, 183); /* Color of the handle */
+}
+
+.square {
+  width: var(--handle-size);
+  height: var(--handle-size);
+  background-color: var(--handle-color); /* Color of the square */
+  border-left: calc(var(--handle-size) / 2) solid transparent;
+  border-right: calc(var(--handle-size) / 2) solid transparent;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-left: calc(var(--handle-size) / 2) solid transparent;
+  border-right: calc(var(--handle-size) / 2) solid transparent;
+  border-top: calc(var(--handle-size) / 2) solid var(--handle-color); /* Color of the triangle */
+}
+
+.handle {
+  position: absolute;
+  top: -15px; /* Adjust this value based on your design */
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  /* z-index: 2; */
+}
+
+.progress-bar-v-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateX(-50%);
+  width: 2px; /* Thickness of the line */
+  height: 100%; /* Full height of the column */
+  background-color: var(--handle-color); /* Color of the line */
+  /* z-index: 1; */
+}
+
+.progress-bar-tick-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateX(-50%) translateY(-100%);
+  width: 1px; /* Thickness of the line */
+  height: 14%; /* Size of the tick */
+  /* z-index: 1; */
+}
+
+.progress-bar-bookmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* z-index: 1; */
+  transform: translateX(-50%) translateY(100%);
+}

app/src/App.tsx

@@ -20,13 +20,15 @@ import {
 import { Frames, Frame, Player } from "./components/particles";
 import { Geometries } from "./components/geometries";
 import "./App.css";
+import { Plotting } from "./components/plotting";
 
-import { Canvas, useThree } from "@react-three/fiber";
+import { Canvas, useThree, useFrame } from "@react-three/fiber";
 import {
   OrbitControls,
   PerspectiveCamera,
   TrackballControls,
   TransformControls,
+  Box,
 } from "@react-three/drei";
 import { Button, InputGroup, Form } from "react-bootstrap";
 import * as THREE from "three";
@@ -36,6 +38,52 @@ import { ParticleInfoOverlay, SceneInfoOverlay } from "./components/overlays";
 import VectorField from "./components/vectorfield";
 import { useColorMode } from "./components/utils";
 
+const MoveCameraTarget = ({
+  controlsRef,
+  colorMode,
+}: {
+  controlsRef: any;
+  colorMode: string;
+}) => {
+  const controlsCrosshairRef = useRef<THREE.Object3D>(null);
+  const shortDimension = 0.05;
+  const longDimension = 0.5;
+
+  // Update the controlsCrosshair position to match the orbit controls target
+  useFrame(() => {
+    if (controlsCrosshairRef.current && controlsRef.current) {
+      const crosshair = controlsCrosshairRef.current;
+      const target = controlsRef.current.target;
+      crosshair.position.copy(target);
+    }
+  });
+
+  return (
+    <group ref={controlsCrosshairRef}>
+      {/* X axis box */}
+      <Box scale={[longDimension, shortDimension, shortDimension]}>
+        <meshStandardMaterial
+          color={colorMode == "light" ? "#454b66" : "#f5fdc6"}
+        />
+      </Box>
+
+      {/* Y axis box */}
+      <Box scale={[shortDimension, longDimension, shortDimension]}>
+        <meshStandardMaterial
+          color={colorMode == "light" ? "#454b66" : "#f5fdc6"}
+        />
+      </Box>
+
+      {/* Z axis box */}
+      <Box scale={[shortDimension, shortDimension, longDimension]}>
+        <meshStandardMaterial
+          color={colorMode == "light" ? "#454b66" : "#f5fdc6"}
+        />
+      </Box>
+    </group>
+  );
+};
+
 export default function App() {
   // const [isConnected, setIsConnected] = useState(socket.connected);
   // const [fooEvents, setFooEvents] = useState([]);
@@ -60,6 +108,7 @@ export default function App() {
   const [length, setLength] = useState<number>(0);
   // updated via sockets
   const [step, setStep] = useState<number>(0);
+  const [selectedFrames, setSelectedFrames] = useState<Set<number>>(new Set());
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
   const [bookmarks, setBookmarks] = useState<any>({}); // {name: [step, ...]
   const [points, setPoints] = useState<THREE.Vector3[]>([]);
@@ -393,8 +442,18 @@ export default function App() {
             setStep(nextBookmark);
           }
         } else {
-          // Move to the next step, or wrap around to the start
-          setStep((prevStep) => (prevStep + 1 < length ? prevStep + 1 : 0));
+          if (selectedFrames.size > 0) {
+            const nextFrame = Array.from(selectedFrames).find(
+              (frame) => frame > step,
+            );
+            if (nextFrame) {
+              setStep(nextFrame);
+            } else {
+              setStep(Math.min(...selectedFrames));
+            }
+          } else {
+            setStep((prevStep) => (prevStep + 1 < length ? prevStep + 1 : 0));
+          }
         }
       } else if (event.key === "ArrowLeft") {
         setPlaying(false);
@@ -410,9 +469,22 @@ export default function App() {
           }
         } else {
           // Move to the previous step, or wrap around to the end
-          setStep((prevStep) =>
-            prevStep - 1 >= 0 ? prevStep - 1 : length - 1,
-          );
+          // check if selectedFrames length is greater than 0, then only jump
+          // between selectedFrames
+          if (selectedFrames.size > 0) {
+            const previousFrame = Array.from(selectedFrames)
+              .reverse()
+              .find((frame) => frame < step);
+            if (previousFrame) {
+              setStep(previousFrame);
+            } else {
+              setStep(Math.max(...selectedFrames));
+            }
+          } else {
+            setStep((prevStep) =>
+              prevStep - 1 >= 0 ? prevStep - 1 : length - 1,
+            );
+          }
         }
       } else if (event.key == "ArrowUp") {
         // jump 10 percent, or to the end
@@ -425,6 +497,7 @@ export default function App() {
         const newStep = Math.max(step - Math.floor(length / 10), 0);
         setStep(newStep);
       } else if (event.key == " ") {
+        // backspace
         updateLength();
         setPlaying((prev) => !prev);
         if (step == length - 1) {
@@ -656,6 +729,12 @@ export default function App() {
                 makeDefault
               />
             )}
+            {roomConfig["scene"].crosshair && (
+              <MoveCameraTarget
+                controlsRef={controlsRef}
+                colorMode={colorMode}
+              />
+            )}
             <Player
               playing={playing}
               togglePlaying={setPlaying}
@@ -664,6 +743,7 @@ export default function App() {
               fps={roomConfig["scene"].fps}
               loop={roomConfig["scene"]["Animation Loop"]}
               length={length}
+              selectedFrames={selectedFrames}
             />
             <Line3D
               points={points}
@@ -746,7 +826,10 @@ export default function App() {
           setStep={setStep}
           bookmarks={bookmarks}
           setBookmarks={setBookmarks}
+          selectedFrames={selectedFrames}
+          setSelectedFrames={setSelectedFrames}
         />
+        <Plotting setStep={setStep} setSelectedFrames={setSelectedFrames} />
         {showParticleInfo && (
           <>
             <ParticleInfoOverlay

app/src/components/particles.tsx

@@ -22,6 +22,17 @@ export interface Frames {
   [key: number]: { _type: string; value: Frame };
 }
 
+interface PlayerProps {
+  playing: boolean;
+  step: number;
+  setStep: (step: number) => void;
+  fps: number;
+  length: number;
+  loop: boolean;
+  togglePlaying: (playing: boolean) => void;
+  selectedFrames: Set<number>;
+}
+
 export const Player = ({
   playing,
   step,
@@ -30,7 +41,8 @@ export const Player = ({
   length,
   loop,
   togglePlaying: setPlaying,
-}: any) => {
+  selectedFrames,
+}: PlayerProps) => {
   useFrame(({ clock }) => {
     const a = clock.getElapsedTime();
     if (a > 1 / fps) {
@@ -39,10 +51,26 @@ export const Player = ({
           if (!loop) {
             setPlaying(!playing);
           } else {
-            setStep(0);
+            if (selectedFrames.size > 0) {
+              setStep(Math.min(...selectedFrames));
+            } else {
+              setStep(0);
+            }
           }
         } else {
-          setStep(step + 1);
+          // TODO: handle selectedFrames
+          if (selectedFrames.size > 0) {
+            const nextFrame = Array.from(selectedFrames).find(
+              (frame) => frame > step,
+            );
+            if (nextFrame) {
+              setStep(nextFrame);
+            } else {
+              setStep(Math.min(...selectedFrames));
+            }
+          } else {
+            setStep(step + 1);
+          }
         }
       }
       // reset the clock