fix: reorder imports for better organization and clarity

Author: Kevin

src/components/Agent.tsx

@@ -14,8 +14,8 @@ import { useAgentPosition } from "client/state";
 import { head, last, thru } from "lodash";
 import { ComponentProps, Suspense } from "react";
 import { useBoolean, useTween } from "react-use";
-import { rectangleRounded } from "./rectangleRounded";
 import { DoubleSide } from "three";
+import { rectangleRounded } from "./rectangleRounded";
 
 const font = `./fonts/geist-medium.ttf`;
 

src/components/Agents.tsx

@@ -1,10 +1,10 @@
 import { Instances, useGLTF, useTexture } from "@react-three/drei";
+import { useSolutionContents } from "client/run";
 import { useModel } from "hooks/useModel";
 import { range } from "lodash";
 import { Suspense, useMemo } from "react";
-import { MeshPhysicalMaterial, MeshStandardMaterial } from "three";
+import { MeshPhysicalMaterial } from "three";
 import { Agent } from "./Agent";
-import { useSolutionContents } from "client/run";
 
 useGLTF.preload("./robot-final.gltf");
 useTexture.preload("./base.png");

src/components/Stage.tsx

@@ -1,9 +1,9 @@
-import { GizmoHelper, GizmoViewport, Sky } from "@react-three/drei";
+import { GizmoHelper, GizmoViewport } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
+import { ACESFilmicToneMapping } from "three";
 import { CameraControls } from "./CameraControls";
 import { Contents } from "./Contents";
 import { Light } from "./Light";
-import { ACESFilmicToneMapping } from "three";
 
 export function Stage() {
   return (

src/hooks/useExample.tsx

@@ -1,25 +1,28 @@
-import { basename } from "utils";
-import { sizes, useFile } from "./useMap";
-import { usePreview } from "./usePreview";
 import { useMutation } from "@tanstack/react-query";
 import {
   useFlip,
   useMapFile,
   useScenarioFile,
   useSolutionFile,
 } from "client/run";
+import { useClear } from "client/state";
+import { basename } from "utils";
+import { sizes, useFile } from "./useMap";
+import { usePreview } from "./usePreview";
 
 export function useExample(path: string) {
   const { data: file, isLoading } = useFile(path);
   const preview = usePreview(file);
   const [, setSolutionFile] = useSolutionFile();
-  const [mapFile, setMapFile] = useMapFile();
+  const [, setMapFile] = useMapFile();
   const [, setScenarioFile] = useScenarioFile();
+  const clear = useClear();
   const [, setFlip] = useFlip();
   const open = useMutation({
     mutationKey: ["open-example", path],
     mutationFn: async (size: (typeof sizes)[number]) => {
       if (!file) return null;
+      await clear();
       const name = basename(path, true);
       const solution = `/examples/${name}/path/${size}/scen_1_paths.txt`;
       const scen = `/examples/${name}-random-1.scen`;
@@ -35,7 +38,6 @@ export function useExample(path: string) {
         new File([await fetch(scen).then((r) => r.blob())], basename(scen), {})
       );
       setFlip(false);
-      console.log(file, mapFile);
     },
   });
   return {

src/leva-controls/Inputs.tsx

@@ -1,18 +1,17 @@
-import { usePlaying, autoplayAtom } from "client/play";
+import { autoplayAtom, usePlaying } from "client/play";
 import {
+  useFlip,
   useMapFile,
-  useScenarioFile,
-  useSolutionFile,
   useRun,
+  useScenarioFile,
   useSolutionContents,
-  useFlip,
+  useSolutionFile,
 } from "client/run";
 import { useClear, useLength } from "client/state";
-import { useControls, button } from "leva";
-import { filePicker } from "leva-file-picker";
-import { store } from "store";
-import { Suspense } from "react";
+import { button, useControls } from "leva";
 import { file } from "leva-plugins/file";
+import { Suspense } from "react";
+import { store } from "store";
 
 export function Inputs() {
   const [, setPlaying] = usePlaying();