Merge pull request DouglasNeuroInformatics#1253 from joshunrau/new-features

joshunrau · web-flow · commit e0305a0c3223 · 2025-12-09T20:54:12.000-05:00
New features
diff --git a/apps/api/src/instrument-records/instrument-records.controller.ts b/apps/api/src/instrument-records/instrument-records.controller.ts
@@ -92,4 +92,11 @@ export class InstrumentRecordsController {
   ) {
     return this.instrumentRecordsService.updateById(id, data, { ability });
   }
+
+  @ApiOperation({ summary: 'Get Instrument Record' })
+  @Get(':id')
+  @RouteAccess({ action: 'read', subject: 'InstrumentRecord' })
+  findById(@Param('id', ValidObjectIdPipe) id: string, @CurrentUser('ability') ability: AppAbility) {
+    return this.instrumentRecordsService.findById(id, { ability });
+  }
 }
diff --git a/apps/api/src/instrument-records/instrument-records.service.ts b/apps/api/src/instrument-records/instrument-records.service.ts
@@ -254,6 +254,16 @@ export class InstrumentRecordsService {
     return records;
   }
 
+  async findById(id: string, { ability }: EntityOperationOptions = {}) {
+    const record = await this.instrumentRecordModel.findFirst({
+      where: { AND: [accessibleQuery(ability, 'read', 'InstrumentRecord')], id }
+    });
+    if (!record) {
+      throw new NotFoundException();
+    }
+    return record;
+  }
+
   async linearModel(
     { groupId, instrumentId }: { groupId?: string; instrumentId: string },
     { ability }: EntityOperationOptions = {}
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -46,6 +46,7 @@
     "lucide-react": "^0.507.0",
     "motion": "catalog:",
     "papaparse": "workspace:papaparse__5.x@*",
+    "qrcode": "^1.5.4",
     "react": "workspace:react__19.x@*",
     "react-dom": "workspace:react-dom__19.x@*",
     "recharts": "^2.15.2",
@@ -65,6 +66,7 @@
     "@tanstack/router-plugin": "^1.127.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "16.2.0",
+    "@types/qrcode": "^1.5.6",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "happy-dom": "catalog:",
     "tailwindcss": "catalog:",
diff --git a/apps/web/src/components/QRCode.tsx b/apps/web/src/components/QRCode.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+
+import { useTheme } from '@douglasneuroinformatics/libui/hooks';
+import qrcode from 'qrcode';
+
+export const QRCode = ({ url }: { url: string }) => {
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  const [theme] = useTheme();
+
+  useEffect(() => {
+    qrcode.toCanvas(
+      ref.current,
+      url,
+      {
+        color: {
+          dark: theme === 'dark' ? '#f1f5f9' : '#0f172a',
+          light: '#0000'
+        },
+        margin: 2,
+        scale: 6
+      },
+      (error) => {
+        if (error) {
+          console.error(error);
+        }
+      }
+    );
+  }, [theme, url]);
+
+  return <canvas className="rounded-md border" ref={ref} />;
+};
diff --git a/apps/web/src/hooks/useInstrumentRecordQuery.ts b/apps/web/src/hooks/useInstrumentRecordQuery.ts
@@ -0,0 +1,17 @@
+import { $InstrumentRecord } from '@opendatacapture/schemas/instrument-records';
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+export const instrumentRecordQueryOptions = ({ params }: { params: { id: string } }) => {
+  return queryOptions({
+    queryFn: async () => {
+      const response = await axios.get(`/v1/instrument-records/${params.id}`);
+      return $InstrumentRecord.parse(response.data);
+    },
+    queryKey: ['instrument-records', `id-${params.id}`]
+  });
+};
+
+export function useInstrumentRecordQuery({ params }: { params: { id: string } }) {
+  return useSuspenseQuery(instrumentRecordQueryOptions({ params }));
+}
diff --git a/apps/web/src/hooks/useInstrumentVisualization.ts b/apps/web/src/hooks/useInstrumentVisualization.ts
@@ -18,6 +18,7 @@ import { useFindSessionQuery } from './useFindSessionQuery';
 type InstrumentVisualizationRecord = {
   [key: string]: unknown;
   __date__: Date;
+  __id__: string;
   __time__: number;
 };
 
@@ -76,7 +77,7 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
       instrument.internal.edition
     }_${new Date().toISOString()}`;
 
-    const exportRecords = records.map((record) => omit(record, ['__time__']));
+    const exportRecords = records.map((record) => omit(record, ['__time__', '__id__']));
 
     const makeWideRows = () => {
       const columnNames = Object.keys(exportRecords[0]!);
@@ -229,6 +230,7 @@ export function useInstrumentVisualization({ params }: UseInstrumentVisualizatio
 
           return {
             __date__: record.date,
+            __id__: record.id,
             __time__: record.date.getTime(),
             username: username,
             ...record.computedMeasures,
diff --git a/apps/web/src/hooks/useSubjectQuery.ts b/apps/web/src/hooks/useSubjectQuery.ts
@@ -0,0 +1,21 @@
+import { $Subject } from '@opendatacapture/schemas/subject';
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+type SubjectQueryParams = {
+  id: string;
+};
+
+export const subjectQueryOptions = ({ params }: { params: SubjectQueryParams }) => {
+  return queryOptions({
+    queryFn: async () => {
+      const response = await axios.get(`/v1/subjects/${params.id}`, { params });
+      return $Subject.parseAsync(response.data);
+    },
+    queryKey: ['subjects', `id-${params.id}`]
+  });
+};
+
+export function useSubjectQuery({ params }: { params: SubjectQueryParams }) {
+  return useSuspenseQuery(subjectQueryOptions({ params }));
+}
diff --git a/apps/web/src/route-tree.ts b/apps/web/src/route-tree.ts
@@ -31,6 +31,7 @@ import { Route as AppInstrumentsRenderIdRouteImport } from './routes/_app/instru
 import { Route as AppDatahubSubjectIdTableRouteImport } from './routes/_app/datahub/$subjectId/table'
 import { Route as AppDatahubSubjectIdGraphRouteImport } from './routes/_app/datahub/$subjectId/graph'
 import { Route as AppDatahubSubjectIdAssignmentsRouteImport } from './routes/_app/datahub/$subjectId/assignments'
+import { Route as AppDatahubSubjectIdRecordIdRouteImport } from './routes/_app/datahub/$subjectId/$recordId'
 import { Route as AppAdminUsersCreateRouteImport } from './routes/_app/admin/users/create'
 import { Route as AppAdminGroupsCreateRouteImport } from './routes/_app/admin/groups/create'
 
@@ -148,6 +149,12 @@ const AppDatahubSubjectIdAssignmentsRoute =
     path: '/assignments',
     getParentRoute: () => AppDatahubSubjectIdRouteRoute,
   } as any)
+const AppDatahubSubjectIdRecordIdRoute =
+  AppDatahubSubjectIdRecordIdRouteImport.update({
+    id: '/$recordId',
+    path: '/$recordId',
+    getParentRoute: () => AppDatahubSubjectIdRouteRoute,
+  } as any)
 const AppAdminUsersCreateRoute = AppAdminUsersCreateRouteImport.update({
   id: '/admin/users/create',
   path: '/admin/users/create',
@@ -177,6 +184,7 @@ export interface FileRoutesByFullPath {
   '/upload': typeof AppUploadIndexRoute
   '/admin/groups/create': typeof AppAdminGroupsCreateRoute
   '/admin/users/create': typeof AppAdminUsersCreateRoute
+  '/datahub/$subjectId/$recordId': typeof AppDatahubSubjectIdRecordIdRoute
   '/datahub/$subjectId/assignments': typeof AppDatahubSubjectIdAssignmentsRoute
   '/datahub/$subjectId/graph': typeof AppDatahubSubjectIdGraphRoute
   '/datahub/$subjectId/table': typeof AppDatahubSubjectIdTableRoute
@@ -202,6 +210,7 @@ export interface FileRoutesByTo {
   '/upload': typeof AppUploadIndexRoute
   '/admin/groups/create': typeof AppAdminGroupsCreateRoute
   '/admin/users/create': typeof AppAdminUsersCreateRoute
+  '/datahub/$subjectId/$recordId': typeof AppDatahubSubjectIdRecordIdRoute
   '/datahub/$subjectId/assignments': typeof AppDatahubSubjectIdAssignmentsRoute
   '/datahub/$subjectId/graph': typeof AppDatahubSubjectIdGraphRoute
   '/datahub/$subjectId/table': typeof AppDatahubSubjectIdTableRoute
@@ -229,6 +238,7 @@ export interface FileRoutesById {
   '/_app/upload/': typeof AppUploadIndexRoute
   '/_app/admin/groups/create': typeof AppAdminGroupsCreateRoute
   '/_app/admin/users/create': typeof AppAdminUsersCreateRoute
+  '/_app/datahub/$subjectId/$recordId': typeof AppDatahubSubjectIdRecordIdRoute
   '/_app/datahub/$subjectId/assignments': typeof AppDatahubSubjectIdAssignmentsRoute
   '/_app/datahub/$subjectId/graph': typeof AppDatahubSubjectIdGraphRoute
   '/_app/datahub/$subjectId/table': typeof AppDatahubSubjectIdTableRoute
@@ -256,6 +266,7 @@ export interface FileRouteTypes {
     | '/upload'
     | '/admin/groups/create'
     | '/admin/users/create'
+    | '/datahub/$subjectId/$recordId'
     | '/datahub/$subjectId/assignments'
     | '/datahub/$subjectId/graph'
     | '/datahub/$subjectId/table'
@@ -281,6 +292,7 @@ export interface FileRouteTypes {
     | '/upload'
     | '/admin/groups/create'
     | '/admin/users/create'
+    | '/datahub/$subjectId/$recordId'
     | '/datahub/$subjectId/assignments'
     | '/datahub/$subjectId/graph'
     | '/datahub/$subjectId/table'
@@ -307,6 +319,7 @@ export interface FileRouteTypes {
     | '/_app/upload/'
     | '/_app/admin/groups/create'
     | '/_app/admin/users/create'
+    | '/_app/datahub/$subjectId/$recordId'
     | '/_app/datahub/$subjectId/assignments'
     | '/_app/datahub/$subjectId/graph'
     | '/_app/datahub/$subjectId/table'
@@ -477,6 +490,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppDatahubSubjectIdAssignmentsRouteImport
       parentRoute: typeof AppDatahubSubjectIdRouteRoute
     }
+    '/_app/datahub/$subjectId/$recordId': {
+      id: '/_app/datahub/$subjectId/$recordId'
+      path: '/$recordId'
+      fullPath: '/datahub/$subjectId/$recordId'
+      preLoaderRoute: typeof AppDatahubSubjectIdRecordIdRouteImport
+      parentRoute: typeof AppDatahubSubjectIdRouteRoute
+    }
     '/_app/admin/users/create': {
       id: '/_app/admin/users/create'
       path: '/admin/users/create'
@@ -495,13 +515,15 @@ declare module '@tanstack/react-router' {
 }
 
 interface AppDatahubSubjectIdRouteRouteChildren {
+  AppDatahubSubjectIdRecordIdRoute: typeof AppDatahubSubjectIdRecordIdRoute
   AppDatahubSubjectIdAssignmentsRoute: typeof AppDatahubSubjectIdAssignmentsRoute
   AppDatahubSubjectIdGraphRoute: typeof AppDatahubSubjectIdGraphRoute
   AppDatahubSubjectIdTableRoute: typeof AppDatahubSubjectIdTableRoute
 }
 
 const AppDatahubSubjectIdRouteRouteChildren: AppDatahubSubjectIdRouteRouteChildren =
   {
+    AppDatahubSubjectIdRecordIdRoute: AppDatahubSubjectIdRecordIdRoute,
     AppDatahubSubjectIdAssignmentsRoute: AppDatahubSubjectIdAssignmentsRoute,
     AppDatahubSubjectIdGraphRoute: AppDatahubSubjectIdGraphRoute,
     AppDatahubSubjectIdTableRoute: AppDatahubSubjectIdTableRoute,
diff --git a/apps/web/src/routes/_app/datahub/$subjectId/$recordId.tsx b/apps/web/src/routes/_app/datahub/$subjectId/$recordId.tsx
@@ -0,0 +1,41 @@
+import { InstrumentSummary } from '@opendatacapture/react-core';
+import { createFileRoute } from '@tanstack/react-router';
+
+import { useInstrument } from '@/hooks/useInstrument';
+import { instrumentRecordQueryOptions, useInstrumentRecordQuery } from '@/hooks/useInstrumentRecordQuery';
+import { subjectQueryOptions, useSubjectQuery } from '@/hooks/useSubjectQuery';
+
+const RouteComponent = () => {
+  const recordId = Route.useParams({ select: (params) => params.recordId });
+
+  const { data: instrumentRecord } = useInstrumentRecordQuery({ params: { id: recordId } });
+  const { data: subject } = useSubjectQuery({ params: { id: instrumentRecord.subjectId } });
+
+  const instrument = useInstrument(instrumentRecord.instrumentId);
+
+  if (!instrument) {
+    return null;
+  }
+
+  return (
+    <div className="container py-8">
+      <InstrumentSummary
+        displayAllMeasures
+        data={instrumentRecord.data}
+        instrument={instrument}
+        subject={subject}
+        timeCollected={instrumentRecord.createdAt.getTime()}
+      />
+    </div>
+  );
+};
+
+export const Route = createFileRoute('/_app/datahub/$subjectId/$recordId')({
+  component: RouteComponent,
+  loader: async ({ context, params }) => {
+    const record = await context.queryClient.ensureQueryData(
+      instrumentRecordQueryOptions({ params: { id: params.recordId } })
+    );
+    await context.queryClient.ensureQueryData(subjectQueryOptions({ params: { id: record.subjectId } }));
+  }
+});
diff --git a/apps/web/src/routes/_app/datahub/$subjectId/assignments.tsx b/apps/web/src/routes/_app/datahub/$subjectId/assignments.tsx
@@ -21,6 +21,7 @@ import type { UnilingualInstrumentInfo } from '@opendatacapture/schemas/instrume
 import { createFileRoute } from '@tanstack/react-router';
 import { z } from 'zod/v4';
 
+import { QRCode } from '@/components/QRCode';
 import { useAssignmentsQuery } from '@/hooks/useAssignmentsQuery';
 import { useCreateAssignment } from '@/hooks/useCreateAssignment';
 import { useInstrument } from '@/hooks/useInstrument';
@@ -40,26 +41,25 @@ const AssignmentSlider: React.FC<{
   const instrument = useInstrument(assignment?.instrumentId ?? null);
 
   return (
-    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+    <Sheet open={Boolean(isOpen && assignment && instrument)} onOpenChange={setIsOpen}>
       <Sheet.Content className="flex h-full flex-col">
         <Sheet.Header>
           <Sheet.Title>{instrument?.details.title}</Sheet.Title>
           <Sheet.Description>{t('datahub.assignments.assignmentSliderDesc')}</Sheet.Description>
         </Sheet.Header>
         <Sheet.Body className="grow">
-          {instrument && (
-            <div className="flex flex-col gap-3">
-              <Label asChild>
-                <a className="hover:underline" href={assignment!.url} rel="noreferrer" target="_blank">
-                  {t('datahub.assignments.link')}
-                </a>
-              </Label>
-              <div className="flex gap-2">
-                <Input readOnly className="h-9" id="link" value={assignment!.url} />
-                <CopyButton size="sm" text={assignment!.url} variant="outline" />
-              </div>
+          <div className="flex flex-col gap-3">
+            <Label asChild>
+              <a className="hover:underline" href={assignment?.url} rel="noreferrer" target="_blank">
+                {t('datahub.assignments.link')}
+              </a>
+            </Label>
+            <div className="flex gap-2">
+              <Input readOnly className="h-9" id="link" value={assignment?.url} />
+              <CopyButton size="sm" text={assignment?.url ?? ''} variant="outline" />
             </div>
-          )}
+            <QRCode url={assignment?.url ?? 'javascript:void(0)'} />
+          </div>
         </Sheet.Body>
         <Sheet.Footer>
           <Button
diff --git a/apps/web/src/routes/_app/datahub/$subjectId/route.tsx b/apps/web/src/routes/_app/datahub/$subjectId/route.tsx
@@ -53,15 +53,15 @@ const RouteComponent = () => {
         </Heading>
       </PageHeader>
       <div className="mb-5 flex">
+        <TabLink label={t('layout.tabs.table')} pathname={`${basePathname}/table`} testId="subject-table" />
+        <TabLink label={t('layout.tabs.graph')} pathname={`${basePathname}/graph`} testId="subject-graph" />
         {config.setup.isGatewayEnabled && (
           <TabLink
             label={t('layout.tabs.assignments')}
             pathname={`${basePathname}/assignments`}
             testId="subject-assignment"
           />
         )}
-        <TabLink label={t('layout.tabs.table')} pathname={`${basePathname}/table`} testId="subject-table" />
-        <TabLink label={t('layout.tabs.graph')} pathname={`${basePathname}/graph`} testId="subject-graph" />
       </div>
       <React.Suspense fallback={<LoadingFallback />}>
         <Outlet />
diff --git a/apps/web/src/routes/_app/datahub/$subjectId/table.tsx b/apps/web/src/routes/_app/datahub/$subjectId/table.tsx
@@ -8,6 +8,7 @@ import { TimeDropdown } from '@/components/TimeDropdown';
 import { useInstrumentVisualization } from '@/hooks/useInstrumentVisualization';
 
 const RouteComponent = () => {
+  const navigate = Route.useNavigate();
   const params = Route.useParams();
   const { dl, instrumentId, instrumentOptions, records, setInstrumentId, setMinDate } = useInstrumentVisualization({
     params: { subjectId: params.subjectId }
@@ -60,6 +61,9 @@ const RouteComponent = () => {
         data-testid="subject-table"
         entriesPerPage={15}
         minRows={15}
+        onEntryClick={(row) => {
+          void navigate({ params: { recordId: row.__id__ }, to: '/datahub/$subjectId/$recordId' });
+        }}
       />
     </div>
   );
diff --git a/apps/web/src/routes/_app/datahub/index.tsx b/apps/web/src/routes/_app/datahub/index.tsx
@@ -174,7 +174,7 @@ const RouteComponent = () => {
         <MasterDataTable
           data={data}
           onSelect={(subject) => {
-            void navigate({ to: `./${subject.id}/assignments` });
+            void navigate({ to: `./${subject.id}/table` });
           }}
         />
       </div>
diff --git a/packages/react-core/src/components/InstrumentSummary/InstrumentSummary.tsx b/packages/react-core/src/components/InstrumentSummary/InstrumentSummary.tsx
diff --git a/packages/react-core/src/index.ts b/packages/react-core/src/index.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -92,4 +92,11 @@ export class InstrumentRecordsController {`
`92`	`92`	`) {`
`93`	`93`	`return this.instrumentRecordsService.updateById(id, data, { ability });`
`94`	`94`	`}`
	`95`	`+`
	`96`	`+ @ApiOperation({ summary: 'Get Instrument Record' })`
	`97`	`+ @Get(':id')`
	`98`	`+ @RouteAccess({ action: 'read', subject: 'InstrumentRecord' })`
	`99`	`+ findById(@Param('id', ValidObjectIdPipe) id: string, @CurrentUser('ability') ability: AppAbility) {`
	`100`	`+ return this.instrumentRecordsService.findById(id, { ability });`
	`101`	`+ }`
`95`	`102`	`}`