reorder subject page tabs in datahub

Author: joshunrau

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 />

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>
   );