royerlab · aganders3 · Mar 29, 2024 · Mar 28, 2024 · Mar 28, 2024
diff --git a/__tests__/main.test.tsx b/__tests__/main.test.tsx
@@ -1,6 +1,6 @@
 import { expect, test } from "vitest";
 
-import Scene from "../src/scene";
+import Scene from "@/components/scene";
 import React from "react";
 import { render } from "@testing-library/react";
 

diff --git a/index.html b/index.html
@@ -13,6 +13,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/components/main.tsx"></script>
   </body>
 </html>
diff --git a/src/assets/preact.svg b/src/assets/preact.svg
diff --git a/src/app.tsx → src/components/app.tsx b/src/app.tsx → src/components/app.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import "./app.css";
-import Scene from "./scene.tsx";
+import "@/css/app.css";
+import Scene from "@/components/scene.tsx";
 
 const aspectRatio = 4 / 3;
 

diff --git a/src/main.tsx → src/components/main.tsx b/src/main.tsx → src/components/main.tsx
@@ -4,8 +4,8 @@ import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import { defaultTheme } from "@czi-sds/components";
 
-import App from "./app.tsx";
-import "./index.css";
+import App from "@/components/app.tsx";
+import "@/css/index.css";
 
 const domNode = document.getElementById("app")!;
 const root = createRoot(domNode);

diff --git a/src/scene.tsx → src/components/scene.tsx b/src/scene.tsx → src/components/scene.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { Button, InputSlider, InputText, InputToggle, LoadingIndicator } from "@czi-sds/components";
-import { PointCanvas } from "./PointCanvas";
-import { TrackManager, loadTrackManager } from "./TrackManager";
 
-import useSelectionBox from "./hooks/useSelectionBox";
+import { PointCanvas } from "@/lib/PointCanvas";
+import { TrackManager, loadTrackManager } from "@/lib/TrackManager";
+import { ViewerState, clearUrlHash } from "@/lib/ViewerState";
 
-import { ViewerState, clearUrlHash } from "./ViewerState";
+import useSelectionBox from "@/hooks/useSelectionBox";
 
 interface SceneProps {
     renderWidth?: number;
@@ -113,7 +113,7 @@ export default function Scene(props: SceneProps) {
         canvas.current?.highlightPoints(selected);
 
         const maxPointsPerTimepoint = trackManager?.maxPointsPerTimepoint || 0;
-        Promise.all(selected.map((p) => curTime * maxPointsPerTimepoint + p).map(fetchAndAddTrack));
+        Promise.all(selected.map((p: number) => curTime * maxPointsPerTimepoint + p).map(fetchAndAddTrack));
         // TODO: cancel the fetch if the selection changes?
     }, [selectedPoints]);
 

diff --git a/src/app.css → src/css/app.css b/src/app.css → src/css/app.css
diff --git a/src/index.css → src/css/index.css b/src/index.css → src/css/index.css
diff --git a/src/hooks/useSelectionBox.ts b/src/hooks/useSelectionBox.ts
@@ -1,8 +1,8 @@
 import { SelectionHelper } from "three/addons/interactive/SelectionHelper.js";
 import { useEffect, useRef, useState } from "react";
 
-import { PointSelectionBox, PointsCollection } from "../PointSelectionBox";
-import { PointCanvas } from "../PointCanvas";
+import { PointSelectionBox, PointsCollection } from "@/lib/PointSelectionBox";
+import { PointCanvas } from "@/lib/PointCanvas";
 
 export default function useSelectionBox(canvas: PointCanvas | undefined) {
     const [selecting, setSelecting] = useState(false);

diff --git a/src/PointCanvas.ts → src/lib/PointCanvas.ts b/src/PointCanvas.ts → src/lib/PointCanvas.ts
@@ -21,7 +21,7 @@ import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
 import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
 import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
 
-import { Track } from "./lib/three/Track";
+import { Track } from "@/lib/three/Track";
 
 type Tracks = Map<number, Track>;
 

diff --git a/src/PointSelectionBox.ts → src/lib/PointSelectionBox.ts b/src/PointSelectionBox.ts → src/lib/PointSelectionBox.ts
diff --git a/src/TrackManager.ts → src/lib/TrackManager.ts b/src/TrackManager.ts → src/lib/TrackManager.ts
diff --git a/src/ViewerState.ts → src/lib/ViewerState.ts b/src/ViewerState.ts → src/lib/ViewerState.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -19,7 +19,13 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

diff --git a/vite.config.ts b/vite.config.ts
@@ -5,6 +5,11 @@ import react from "@vitejs/plugin-react";
 
 export default defineConfig({
     plugins: [react()],
+    resolve: {
+        alias: {
+            "@": "/src",
+        },
+    },
     test: {
         environment: "jsdom",
         browser: {