@crvouga/atlas 0.10.2 → 0.11.0

package/packages/visualizer/src/app/gazetteer.tsx

@@ -1,10 +1,8 @@
-import { Link, useLocation, useParams, useSearch } from '@tanstack/react-router';
-
-import { ScreenImage } from '../components/Screen';
+import { Badge, Box, Divider, NavLink, Stack, Text, Title } from '@mantine/core';
+import { Link, useParams, useSearch } from '@tanstack/react-router';
 import { STATUS_LABEL, type AtlasView, type StateView } from '../data/model';
+import { statusColor } from '../ui/theme';
 import { useAtlas } from './atlas-context';
-import styles from './gazetteer.module.css';
-
 function openingScreen(view: AtlasView, steps: readonly { transitionIds: readonly string[] }[]) {
   for (const step of steps) {
     const transition = view.transitions.get(step.transitionIds[0] ?? '');
@@ -13,105 +11,114 @@ function openingScreen(view: AtlasView, steps: readonly { transitionIds: readonl
   }
   return undefined;
 }
-
 function screensOf(view: AtlasView, chartId: string) {
-  const chart = view.charts.get(chartId);
-  if (!chart) return [];
-  return chart.states
+  return (view.charts.get(chartId)?.states ?? [])
     .map((key) => view.states.get(key))
-    .filter((state): state is StateView => Boolean(state && (state.kind === 'screen' || state.kind === 'final')));
+    .filter((state): state is StateView => !!state && (state.kind === 'screen' || state.kind === 'final'));
 }
-
 export function Gazetteer() {
   const { view } = useAtlas();
   const params = useParams({ strict: false });
   const search = useSearch({ strict: false });
-  const { pathname } = useLocation();
   const screen = typeof search.screen === 'string' ? search.screen : undefined;
   const journeyId = typeof search.journey === 'string' ? search.journey : undefined;
   const group = typeof search.group === 'string' ? search.group : undefined;
   const journeys = (view?.journeys ?? []).filter((journey) => journey.chartIds.length > 0);
   return (
-    <nav className={styles.index} aria-label="Places">
-      <h2>Places</h2>
-      {!view && <p className={styles.empty}>Loading the spec…</p>}
-      {view?.contexts.map((context) => (
-        <section key={context.id}>
-          <h3>{context.name}</h3>
-          {context.chartIds.map((chartId) => {
-            const chart = view.charts.get(chartId);
-            if (!chart) return null;
-            const screens = screensOf(view, chartId);
-            return (
-              <div key={chartId}>
-                <Link className={styles.chart} to="/chart/$chartId" params={{ chartId }} search={(prev) => ({ run: prev.run, screen: undefined, journey: undefined, group: undefined })} activeOptions={{ includeSearch: true, explicitUndefined: true }} aria-current={params.chartId === chartId && !screen && !journeyId && !group ? 'page' : undefined}>
-                  {chart.name}
-                </Link>
-                <ul>
-                  {screens.map((state) => (
-                    <li key={state.key}>
+    <Box component="nav" aria-label="Places" p="md">
+      <Stack gap="lg">
+        <Title order={2}>Places</Title>
+        {!view && <Text c="dimmed">Loading the spec…</Text>}
+        {view?.contexts.map((context) => (
+          <Stack key={context.id} gap="xs">
+            <Text size="xs" fw={600} c="dimmed">
+              {context.name}
+            </Text>
+            {context.chartIds.map((chartId) => {
+              const chart = view.charts.get(chartId);
+              if (!chart) return null;
+              return (
+                <Box key={chartId}>
+                  <NavLink
+                    label={chart.name}
+                    fw={600}
+                    active={params.chartId === chartId && !screen && !journeyId && !group}
+                    renderRoot={(props) => (
                       <Link
-                        className={styles.row}
-                        data-status={state.status}
+                        {...props}
                         to="/chart/$chartId"
                         params={{ chartId }}
-                        search={(prev) => ({ run: prev.run, screen: state.name, journey: prev.journey })}
-                        aria-current={params.chartId === chartId && screen === state.name ? 'page' : undefined}
-                      >
-                        <span className={styles.thumb} aria-hidden="true">
-                          <ScreenImage state={state} size="thumb" description={false} lines={false} caption={false} />
-                        </span>
-                        <span className={styles.name}>{state.name}</span>
-                        <span className={styles.status}>{STATUS_LABEL[state.status]}</span>
-                      </Link>
-                    </li>
+                        search={(prev) => ({ run: prev.run, screen: undefined, journey: undefined, group: undefined })}
+                      />
+                    )}
+                  />
+                  {screensOf(view, chartId).map((state) => (
+                    <NavLink
+                      key={state.key}
+                      label={state.name}
+                      active={params.chartId === chartId && screen === state.name}
+                      aria-current={params.chartId === chartId && screen === state.name ? 'page' : undefined}
+                      rightSection={
+                        <Badge color={statusColor(state.status)} size="xs">
+                          {STATUS_LABEL[state.status]}
+                        </Badge>
+                      }
+                      renderRoot={(props) => (
+                        <Link
+                          {...props}
+                          to="/chart/$chartId"
+                          params={{ chartId }}
+                          search={(prev) => ({ run: prev.run, screen: state.name, journey: prev.journey })}
+                        />
+                      )}
+                    />
                   ))}
-                </ul>
-              </div>
-            );
-          })}
-        </section>
-      ))}
-      {journeys.length > 0 && (
-        <section>
-          <h3>Journeys</h3>
-          <ul>
+                </Box>
+              );
+            })}
+          </Stack>
+        ))}
+        {journeys.length > 0 && (
+          <Stack gap="xs">
+            <Divider />
+            <Title order={3}>Journeys</Title>
             {journeys.map((journey) => {
-              const opening = view ? openingScreen(view, journey.steps) : undefined;
+              const chartId = journey.chartIds[0]!;
+              const start = view && openingScreen(view, journey.steps);
               return (
-                <li key={journey.id}>
-                  <Link
-                    className={styles.row}
-                    data-status={journey.status}
-                    to="/chart/$chartId"
-                    params={{ chartId: journey.chartIds[0] ?? '' }}
-                    search={(prev) => ({ run: prev.run, journey: journey.id })}
-                    aria-current={journeyId === journey.id && pathname.startsWith('/chart') ? 'page' : undefined}
-                  >
-                    {opening && (
-                      <span className={styles.thumb} aria-hidden="true">
-                        <ScreenImage state={opening} size="thumb" description={false} lines={false} caption={false} />
-                      </span>
-                    )}
-                    <span className={styles.name}>{journey.name}</span>
-                    <span className={styles.status}>{STATUS_LABEL[journey.status]}</span>
-                  </Link>
-                </li>
+                <NavLink
+                  key={journey.id}
+                  label={journey.name}
+                  active={journeyId === journey.id}
+                  rightSection={
+                    <Badge size="xs" color={statusColor(journey.status)}>
+                      {STATUS_LABEL[journey.status]}
+                    </Badge>
+                  }
+                  renderRoot={(props) => (
+                    <Link
+                      {...props}
+                      to="/chart/$chartId"
+                      params={{ chartId }}
+                      search={(prev) => ({ run: prev.run, journey: journey.id, screen: start?.name })}
+                    />
+                  )}
+                />
               );
             })}
-          </ul>
-        </section>
-      )}
-      {view && view.excluded.length > 0 && (
-        <section>
-          <h2>Not in the spec yet</h2>
-          <ul>
+          </Stack>
+        )}
+        {!!view?.excluded.length && (
+          <Stack gap="xs">
+            <Title order={3}>Not in the spec yet</Title>
             {view.excluded.map((item) => (
-              <li key={item} className={styles.excluded}>{item}</li>
+              <Text key={item} c="dimmed">
+                {item}
+              </Text>
             ))}
-          </ul>
-        </section>
-      )}
-    </nav>
+          </Stack>
+        )}
+      </Stack>
+    </Box>
   );
 }

package/packages/visualizer/src/app/router.tsx

@@ -1,13 +1,20 @@
-import { createBrowserHistory, createMemoryHistory, createRootRoute, createRoute, createRouter, lazyRouteComponent, type RouterHistory } from '@tanstack/react-router';
+import { Alert, Anchor, Button, Container, Stack, Text, Title } from '@mantine/core';
+import {
+  Link,
+  createBrowserHistory,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  lazyRouteComponent,
+  type RouterHistory
+} from '@tanstack/react-router';
 import { z } from 'zod/v4';
-
 import { SpecPage } from '../evidence/spec-page';
+import { ExplorerSearchFields } from '../explorer/search';
 import { ProductPage } from '../views/ProductPage';
 import { AppShell } from './AppShell';
-import { ExplorerSearchFields } from '../explorer/search';
-
 const RootSearch = z.object({ run: z.string().min(1).optional().catch(undefined) });
-
 const ChartSearch = RootSearch.extend({
   screen: z.string().min(1).optional().catch(undefined),
   event: z.string().min(1).optional().catch(undefined),
@@ -15,12 +22,9 @@ const ChartSearch = RootSearch.extend({
   group: z.string().min(1).optional().catch(undefined),
   t: z.coerce.number().nonnegative().optional().catch(undefined)
 });
-
 export type ChartSearch = z.infer<typeof ChartSearch>;
-
 /** The project home: the test explorer's filters, grouping, order, open test and open run (see `explorer/search.ts`). */
 const HomeSearch = RootSearch.extend(ExplorerSearchFields);
-
 /** A spec document, the check opened in it, one layer's record of that check, and a recorded moment. */
 const SpecSearch = RootSearch.extend({
   spec: z.string().min(1).optional().catch(undefined),
@@ -29,14 +33,32 @@ const SpecSearch = RootSearch.extend({
   view: z.enum(['recording']).optional().catch(undefined),
   moment: z.coerce.number().int().positive().optional().catch(undefined)
 });
-
 export type SpecSearch = z.infer<typeof SpecSearch>;
-
 /** A fresh route tree per router, so a test can run its own viewer beside the page's. */
 function routeTree() {
   const rootRoute = createRootRoute({
     validateSearch: (search) => RootSearch.parse(search),
-    component: AppShell
+    component: AppShell,
+    errorComponent: ({ error, reset }) => (
+      <Container py="xl">
+        <Alert color="red" title="The page couldn’t be loaded">
+          <Stack>
+            <Text>{error instanceof Error ? error.message : String(error)}</Text>
+            <Button onClick={reset}>Try again</Button>
+            <Anchor renderRoot={(props) => <Link {...props} to="/" search={{}} />}>Back to reports</Anchor>
+          </Stack>
+        </Alert>
+      </Container>
+    ),
+    notFoundComponent: () => (
+      <Container py="xl">
+        <Stack>
+          <Title order={1}>Page not found</Title>
+          <Text c="dimmed">This address is not part of the report viewer.</Text>
+          <Anchor renderRoot={(props) => <Link {...props} to="/" search={{}} />}>Back to reports</Anchor>
+        </Stack>
+      </Container>
+    )
   });
   const productRoute = createRoute({
     getParentRoute: () => rootRoute,
@@ -59,11 +81,9 @@ function routeTree() {
   });
   return rootRoute.addChildren([productRoute, chartRoute, specRoute]);
 }
-
 export function createAtlasRouter(history: RouterHistory) {
   return createRouter({ routeTree: routeTree(), history, defaultPreload: false, scrollRestoration: true });
 }
-
 /**
  * Addresses in the hash, so a built site deep-links without server rewrites. The page's own query (`?project=geviti`)
  * selects the project and is not part of the address: TanStack's hash history appends it to the hash, which turned
@@ -82,9 +102,7 @@ export function createProjectHashHistory(win: Window = window): RouterHistory {
     createHref: (href) => `${win.location.pathname}${win.location.search}#${href}`
   });
 }
-
 export const router = createAtlasRouter(createProjectHashHistory());
-
 declare module '@tanstack/react-router' {
   interface Register {
     router: typeof router;

package/packages/visualizer/src/components/ActivityIndicator.tsx

@@ -1,6 +1,5 @@
-import styles from './ActivityIndicator.module.css';
-
-/** A quiet indication of active work; reduced motion keeps a static ring. */
-export function ActivityIndicator({ label = 'Working' }: { label?: string }) {
-  return <span className={styles.activity} role="status" aria-label={label} title={label}><span className={styles.ring} aria-hidden="true" /></span>;
+import { Loader } from '@mantine/core';
+/** A named, reduced-motion-aware indicator for work in progress. */
+export function ActivityIndicator({ label }: { label: string }) {
+  return <Loader size="xs" aria-label={label} role="status" />;
 }

package/packages/visualizer/src/components/DataIssues.tsx

@@ -1,70 +1,52 @@
 import type { DataIssue } from '@crvouga/atlas/schema';
-import * as Dialog from '@radix-ui/react-dialog';
+import { Alert, Button, Code, Drawer, Stack, Text, Title } from '@mantine/core';
 import { useMemo } from 'react';
-
 import { useUiStore } from '../state/ui-store';
-import styles from './DataIssues.module.css';
-import { CloseIcon, NoteIcon, WarnIcon } from './icons';
-
 const SEVERITY_LABEL = { error: 'Problem', warning: 'Warning', info: 'Note' } as const;
-
-/**
- * A quiet count of what went wrong while reading the data. It never interrupts; the list opens
- * only when asked for.
- */
+/** File-by-file diagnostics; unreadable data never appears as a passing result. */
 export function DataIssues({ issues }: { issues: DataIssue[] }) {
   const open = useUiStore((s) => s.issuesOpen);
   const setOpen = useUiStore((s) => s.setIssuesOpen);
   const problems = issues.filter((i) => i.severity !== 'info').length;
-  const byFile = useMemo(() => {
-    const groups = new Map<string, DataIssue[]>();
-    for (const issue of issues) groups.set(issue.file, [...(groups.get(issue.file) ?? []), issue]);
-    return [...groups.entries()].sort(([, a], [, b]) => severityRank(b) - severityRank(a));
+  const groups = useMemo(() => {
+    const byFile = new Map<string, DataIssue[]>();
+    for (const issue of issues) byFile.set(issue.file, [...(byFile.get(issue.file) ?? []), issue]);
+    return [...byFile].sort(([, a], [, b]) => severityRank(b) - severityRank(a));
   }, [issues]);
-  if (issues.length === 0) return null;
-  const label = problems ? `${problems} data ${problems === 1 ? 'problem' : 'problems'}` : `${issues.length} data ${issues.length === 1 ? 'note' : 'notes'}`;
+  if (!issues.length) return null;
+  const label = problems
+    ? `${problems} data ${problems === 1 ? 'problem' : 'problems'}`
+    : `${issues.length} data ${issues.length === 1 ? 'note' : 'notes'}`;
   return (
-    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger className={styles.trigger} data-has-problems={problems > 0}>
-        {problems ? <WarnIcon size={13} /> : <NoteIcon size={13} />}
+    <>
+      <Button color={problems ? 'orange' : 'gray'} onClick={() => setOpen(true)}>
         {label}
-      </Dialog.Trigger>
-      <Dialog.Portal>
-        <Dialog.Overlay className={styles.overlay} />
-        <Dialog.Content className={styles.sheet}>
-          <div className={styles.head}>
-            <Dialog.Title className={styles.title}>What we couldn’t read</Dialog.Title>
-            <Dialog.Close className={styles.close} aria-label="Close">
-              <CloseIcon size={16} />
-            </Dialog.Close>
-          </div>
-          <Dialog.Description className={styles.lead}>
-            Everything else on the map is shown as usual. These are the parts of the spec and the runs that were skipped or guessed, file by file.
-          </Dialog.Description>
-          <div className={styles.list}>
-            {byFile.map(([file, list]) => (
-              <section key={file} className={styles.file}>
-                <h3 className={styles.fileName}>{file || 'General'}</h3>
-                <ul className={styles.items}>
-                  {list.map((issue, i) => (
-                    <li key={i} className={styles.item} data-severity={issue.severity}>
-                      <span className={styles.severity}>{SEVERITY_LABEL[issue.severity]}</span>
-                      <span>
-                        {issue.path && <span className={styles.path}>{issue.path}: </span>}
-                        {issue.message}
-                      </span>
-                    </li>
-                  ))}
-                </ul>
-              </section>
-            ))}
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+      </Button>
+      <Drawer opened={open} onClose={() => setOpen(false)} title="What we couldn’t read">
+        <Stack>
+          <Text c="dimmed">
+            Everything else on the map is shown as usual. These are the parts of the spec and the runs that were skipped or guessed, file by
+            file.
+          </Text>
+          {groups.map(([file, list]) => (
+            <Stack key={file} gap="xs">
+              <Title order={3}>{file || 'General'}</Title>
+              {list.map((issue, i) => (
+                <Alert
+                  key={i}
+                  color={issue.severity === 'error' ? 'red' : issue.severity === 'warning' ? 'orange' : 'blue'}
+                  title={SEVERITY_LABEL[issue.severity]}
+                >
+                  {issue.path && <Code>{issue.path}</Code>} {issue.message}
+                </Alert>
+              ))}
+            </Stack>
+          ))}
+        </Stack>
+      </Drawer>
+    </>
   );
 }
-
 function severityRank(list: DataIssue[]) {
   return Math.max(...list.map((i) => (i.severity === 'error' ? 2 : i.severity === 'warning' ? 1 : 0)));
 }