Brain-Development-and-Disorders-Lab · henryjburg · Jun 24, 2026 · Jun 17, 2026 · Jun 23, 2026 · Jun 23, 2026
diff --git a/client/.storybook/main.tsx b/client/.storybook/main.tsx
@@ -1,35 +1,13 @@
-import path, { dirname } from "path";
-import { fileURLToPath } from "url";
-
-// Setup filenames and directory paths
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+/** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/builder-vite",
     "@storybook/addon-a11y",
     "@storybook/addon-docs",
     "@storybook/addon-onboarding",
     "storybook-addon-apollo-client",
   ],
-  framework: "@storybook/react-webpack5",
-  webpackFinal: async (config) => {
-    // Match path aliases from webpack.common.js
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      "@components": path.resolve(__dirname, "../src/components/"),
-      "@database": path.resolve(__dirname, "../src/database/"),
-      "@hooks": path.resolve(__dirname, "../src/hooks/"),
-      "@lib": path.resolve(__dirname, "../src/lib/"),
-      "@pages": path.resolve(__dirname, "../src/pages/"),
-      "@types": path.resolve(__dirname, "../../types"),
-      "@variables": path.resolve(__dirname, "../src/variables"),
-    };
-
-    return config;
-  },
+  framework: "@storybook/react-vite",
 };
 export default config;
diff --git a/client/.storybook/preview.tsx b/client/.storybook/preview.tsx
@@ -1,3 +1,6 @@
+// React imports
+import React from "react";
+
 // Storybook imports
 import type { Preview } from "@storybook/react";
 

diff --git a/client/babel.config.json b/client/babel.config.json
diff --git a/website/src/index.html → client/index.html b/website/src/index.html → client/index.html
@@ -4,9 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>Metadatify</title>
+    <link rel="icon" type="image/x-icon" href="./src/img/Favicon.png" />
   </head>
   <body>
-    <noscript> You need to enable JavaScript to run this application. </noscript>
+    <script type="module" src="./src/index.tsx"></script>
     <div id="root"></div>
   </body>
 </html>
diff --git a/client/jest.config.js b/client/jest.config.js
diff --git a/client/package.json b/client/package.json
@@ -6,17 +6,16 @@
   "author": "Henry Burgess <henry.burgess@wustl.edu>",
   "license": "MIT",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "scripts": {
-    "start": "webpack serve --config webpack.dev.js",
+    "start": "vite",
     "start:storybook": "storybook dev -p 6006 --no-open",
-    "build": "webpack --config webpack.prod.js",
-    "build:storybook": "storybook build",
-    "clean": "rm -rf dist/ playwright-report/ test-results/",
+    "build": "vite build",
+    "clean": "rm -rf dist/ playwright-report/ test-results/ debug-storybook.log",
     "lint:check": "prettier . --check",
     "lint:fix": "prettier . --write",
-    "test:components": "jest  --verbose",
+    "test:components": "vitest components/",
     "test:ui": "playwright test"
   },
   "dependencies": {
@@ -37,16 +36,13 @@
     "consola": "^3.2.3",
     "date-fns": "^2.29.3",
     "dayjs": "^1.11.7",
-    "dayzed": "^3.2.3",
     "elkjs": "^0.8.2",
     "file-saver": "^2.0.5",
     "framer-motion": "^12.7.4",
     "graphql": "^16.8.1",
     "html5-qrcode": "^2.3.8",
-    "jsonpath-plus": "^10.3.0",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.9",
-    "next-themes": "^0.4.6",
     "pdfjs-dist": "^4.2.67",
     "posthog-js": "^1.184.2",
     "react": "^18.2.0",
@@ -59,64 +55,52 @@
     "react-zoom-pan-pinch": "^3.6.1",
     "reactflow": "^11.7.0",
     "recharts": "^3.5.1",
-    "rxjs": "^7.8.1",
     "seqparse": "^0.2.1",
     "seqviz": "^3.10.9",
-    "slugify": "^1.6.6",
-    "table": "^6.8.1"
+    "slugify": "^1.6.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
     "@eslint/js": "^9.14.0",
     "@playwright/test": "^1.57.0",
     "@storybook/addon-a11y": "^10.3.1",
     "@storybook/addon-docs": "^10.3.1",
     "@storybook/addon-onboarding": "^10.3.1",
-    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
-    "@storybook/react-webpack5": "^10.3.1",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.2",
+    "@storybook/builder-vite": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/apollo-upload-client": "^19.0.0",
     "@types/eslint__js": "^8.42.3",
     "@types/file-saver": "^2.0.5",
-    "@types/jest": "^29.5.8",
-    "@types/json2csv": "^5.0.3",
     "@types/lodash": "^4.14.192",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.1",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@types/underscore": "^1.11.4",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
-    "css-loader": "^6.7.1",
+    "@vitejs/plugin-react": "^6.0.3",
     "dotenv": "^16.4.5",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-storybook": "^10.3.1",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-module-name-mapper": "^0.1.5",
+    "jsdom": "^29.1.1",
     "prettier": "2.6.2",
     "prop-types": "^15.8.1",
-    "sass": "^1.85.0",
-    "sass-loader": "^16.0.5",
+    "resize-observer-polyfill": "^1.5.1",
+    "rxjs": "^7.8.2",
+    "sass": "^1.101.0",
     "storybook": "^10.3.1",
     "storybook-addon-apollo-client": "^10.0.0",
-    "style-loader": "^3.3.1",
     "styled-components": "^5.3.5",
-    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.2.8",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.14.0",
-    "web-worker": "^1.2.0",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.1",
-    "webpack-merge": "^5.9.0"
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9",
+    "vitest-axe": "^0.1.0",
+    "web-worker": "^1.2.0"
   },
   "resolutions": {
     "kysely": "0.28.17"

diff --git a/client/playwright.config.ts b/client/playwright.config.ts
@@ -3,7 +3,7 @@ import { defineConfig, devices } from "@playwright/test";
 import "dotenv/config";
 
 export default defineConfig({
-  testDir: "./test/playwright",
+  testDir: "./test/integration",
   fullyParallel: true,
   forbidOnly: process.env.CI ? true : false,
   globalTimeout: process.env.CI ? 10 * 60 * 1000 : undefined,

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -84,7 +84,7 @@ const Providers = (): React.JSX.Element => {
  * @return {ReactElement}
  */
 const App = (): ReactElement => {
-  if (_.isEqual(process.env.NODE_ENV, "development")) {
+  if (_.isEqual(import.meta.env.NODE_ENV, "development")) {
     consola.debug("Running client in development mode");
   }
 

diff --git a/client/src/components/ActorTag/index.stories.tsx b/client/src/components/ActorTag/index.stories.tsx
@@ -31,7 +31,7 @@ const userMock = {
         name: "Test User",
         firstName: "Test",
         lastName: "User",
-        account_orcid: null,
+        account_orcid: "XXXX-0000-1111-YYYY",
       },
     },
   },
@@ -49,7 +49,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default story
+// Story for "default" presentation
 export const Default: Story = {
   parameters: {
     apolloMocks: [userMock],
@@ -61,6 +61,7 @@ export const Default: Story = {
   },
 } satisfies Story;
 
+// Story for "inline" presentation, where the avatar is shrunk and text is constrained
 export const Inline: Story = {
   parameters: {
     apolloMocks: [userMock],
@@ -73,6 +74,7 @@ export const Inline: Story = {
   },
 } satisfies Story;
 
+// Story for "avatar-only" presentation, where the name and ORCiD are not shown
 export const AvatarOnly: Story = {
   parameters: {
     apolloMocks: [userMock],

diff --git a/client/src/components/ActorTag/index.tsx b/client/src/components/ActorTag/index.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 
 // Existing and custom components
-import { Avatar, Badge, Flex, Skeleton, Text } from "@chakra-ui/react";
+import { Avatar, Badge, Flex, Skeleton, SkeletonText, Text } from "@chakra-ui/react";
 import Tooltip from "@components/Tooltip";
 
 // Existing and custom types
@@ -89,7 +89,7 @@ const ActorTag = (props: ActorTagProps) => {
 
   return props.inline || props.inlineNoAvatar ? (
     <Flex direction={"row"} gap={"0.5"} align={"center"} w={"fit-content"}>
-      {(_.isUndefined(props.inlineNoAvatar) || props.inlineNoAvatar === false) && (
+      {(_.isUndefined(props.inlineNoAvatar) || !props.inlineNoAvatar) && (
         <Avatar.Root size={"2xs"} key={actorLabel} colorPalette={loading ? "gray" : pickPalette(actorLabel)}>
           <Avatar.Fallback name={loading ? "" : actorLabel} />
         </Avatar.Root>
@@ -123,18 +123,20 @@ const ActorTag = (props: ActorTagProps) => {
       >
         <Avatar.Fallback name={loading ? "" : actorLabel} />
       </Avatar.Root>
-      <Skeleton loading={loading} asChild>
-        <Flex direction={"column"} gap={"0.5"} align={"left"} w={"100%"}>
-          <Text fontSize={"xs"} fontWeight={"semibold"} color={"gray.700"}>
-            {actorLabel}
-          </Text>
-          {isBreakpointActive("xl", "up") && actorOrcid !== "" && (
-            <Text fontSize={"2xs"} fontWeight={"semibold"} color={"gray.500"}>
-              {actorOrcid}
+      <SkeletonText loading={loading} w={"100%"} noOfLines={actorOrcid !== "" ? 2 : 1} gap={"2"} asChild>
+        <Flex w={"100%"} align={"left"}>
+          <Flex direction={"column"} gap={"0.5"} align={"left"} w={"100%"} justify={"center"}>
+            <Text fontSize={"xs"} fontWeight={"semibold"} color={"gray.700"} ml={"0.5"}>
+              {actorLabel}
             </Text>
-          )}
+            {isBreakpointActive("xl", "up") && actorOrcid !== "" && (
+              <Badge fontSize={"2xs"} fontWeight={"semibold"} variant={"subtle"}>
+                {actorOrcid}
+              </Badge>
+            )}
+          </Flex>
         </Flex>
-      </Skeleton>
+      </SkeletonText>
     </Flex>
   );
 };

diff --git a/client/src/components/AlertDialog/index.stories.tsx b/client/src/components/AlertDialog/index.stories.tsx
@@ -25,7 +25,7 @@ const AlertDialogWithTrigger = (props: Omit<React.ComponentProps<typeof AlertDia
   const [open, setOpen] = useState(false);
   return (
     <>
-      <Button size={"sm"} colorPalette={"orange"} onClick={() => setOpen(true)}>
+      <Button size={"sm"} colorPalette={"orange"} rounded={"md"} onClick={() => setOpen(true)}>
         Open Dialog
       </Button>
       <AlertDialog {...props} open={open} setOpen={setOpen} />

diff --git a/client/src/components/DataTable/index.stories.tsx b/client/src/components/DataTable/index.stories.tsx
@@ -21,6 +21,9 @@ dayjs.extend(relativeTime);
 // Custom types
 import { EntityModel } from "@types";
 
+// Variables
+import { GLOBAL_STYLES } from "@variables";
+
 // Setup default data to be used in all stories
 const defaultData: Partial<EntityModel>[] = [
   {

diff --git a/client/src/components/DataTable/index.tsx b/client/src/components/DataTable/index.tsx
@@ -908,6 +908,7 @@ const DataTable = (props: DataTableProps) => {
                       justify={"center"}
                       overflow={"hidden"}
                       flexShrink={0}
+                      data-testid={`datatable-header-${header.id}`}
                     >
                       {isSelectColumn ? (
                         flexRender(header.column.columnDef.header, header.getContext())
@@ -1013,7 +1014,7 @@ const DataTable = (props: DataTableProps) => {
       <Flex gap={1} align={"center"} justify={"space-between"} w={"100%"} mt={2} flexShrink={0}>
         <Flex direction={"row"} gap={2} align={"center"} flexShrink={0}>
           {props.showPagination && (
-            <Flex direction={"row"} gap={2} align={"center"}>
+            <Flex direction={"row"} gap={2} align={"center"} data-testid={"data-table-pagination"}>
               <IconButton
                 variant={"outline"}
                 size={"xs"}
@@ -1075,7 +1076,7 @@ const DataTable = (props: DataTableProps) => {
           {!props.viewOnly && props.showSelection && (
             <Menu.Root>
               <Menu.Trigger asChild>
-                <Button colorPalette={"yellow"} size={"xs"} rounded={"md"}>
+                <Button colorPalette={"yellow"} size={"xs"} rounded={"md"} data-testid={"data-table-actions"}>
                   Actions
                   <Icon name={"lightning"} size={"xs"} />
                 </Button>
@@ -1204,7 +1205,7 @@ const DataTable = (props: DataTableProps) => {
                   >
                     <Select.HiddenSelect />
                     <Select.Control>
-                      <Select.Trigger rounded={"md"}>
+                      <Select.Trigger rounded={"md"} data-testid={"data-table-page-size"}>
                         <Select.ValueText placeholder={"Page Size"} />
                       </Select.Trigger>
                       <Select.IndicatorGroup>

diff --git a/client/src/components/Navigation/index.tsx b/client/src/components/Navigation/index.tsx
@@ -24,6 +24,9 @@ import { useWorkspace } from "@hooks/useWorkspace";
 // Variables
 import { GLOBAL_STYLES } from "@variables";
 
+// Static assets
+import favicon from "@img/Favicon.png";
+
 const Navigation = () => {
   const posthog = usePostHog();
   const navigate = useNavigate();
@@ -43,7 +46,7 @@ const Navigation = () => {
       <Flex direction={"column"} display={{ base: "none", lg: "flex" }} gap={"2"} w={"100%"}>
         {/* Heading */}
         <Flex direction={"row"} gap={"2"} p={"1"} align={"center"} justify={"center"}>
-          <Image src="/Favicon.png" boxSize={"20px"} />
+          <Image src={favicon} boxSize={"20px"} />
           <Text fontWeight={"semibold"} fontSize={"lg"} color={"brand"}>
             Metadatify
           </Text>
@@ -271,7 +274,7 @@ const Navigation = () => {
         {/* Version number */}
         <Flex direction={"row"} gap={"2"} align={"center"} justify={"center"}>
           <Text fontSize={"xs"} fontWeight={"semibold"} color={"gray.400"}>
-            v{process.env.VERSION}
+            v{import.meta.env.VERSION}
           </Text>
         </Flex>
       </Flex>
@@ -395,7 +398,7 @@ const Navigation = () => {
               {/* Version number */}
               <Flex direction={"row"} gap={"2"} align={"center"} justify={"center"}>
                 <Text fontSize={"xs"} fontWeight={"semibold"} color={"gray.400"}>
-                  v{process.env.VERSION}
+                  v{import.meta.env.VERSION}
                 </Text>
               </Flex>
             </Menu.Content>