From 83e9b0b1b5a8bc5e8ede481b05c6d50c28dfd1eb Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 21 Mar 2025 22:01:14 -0600
Subject: [PATCH] chat file layout update

---
 .../[dashboardId]/metrics/[metricId]/page.tsx     | 15 +++++++++++++++
 .../(chat_experience)/metrics/[metricId]/page.tsx |  5 +----
 .../components/ui/sidebar/SidebarCollapsible.tsx  |  6 +++++-
 .../DashboardMetricItem/MetricTitle.tsx           |  2 +-
 .../useChatFileLayout/useChatFileLayout.ts        |  2 ++
 .../useSelectedFileAndLayout.ts                   |  6 +++++-
 6 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/metrics/[metricId]/page.tsx

diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/metrics/[metricId]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/metrics/[metricId]/page.tsx
new file mode 100644
index 000000000..247a2a399
--- /dev/null
+++ b/web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/metrics/[metricId]/page.tsx
@@ -0,0 +1,15 @@
+import { MetricController } from '@/controllers/MetricController';
+import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
+
+export default async function MetricPage(props: {
+  params: Promise<{ metricId: string; dashboardId: string }>;
+}) {
+  const params = await props.params;
+  const { metricId, dashboardId } = params;
+
+  return (
+    <AppAssetCheckLayout assetId={metricId} type="metric">
+      <MetricController metricId={metricId} />
+    </AppAssetCheckLayout>
+  );
+}
diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/page.tsx
index 98ae9f0de..bd6112f25 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/page.tsx
+++ b/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/page.tsx
@@ -1,10 +1,7 @@
 import { MetricController } from '@/controllers/MetricController';
 import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
 
-export default async function MetricPage(props: {
-  params: Promise<{ metricId: string }>;
-  searchParams: Promise<{ embed?: string }>;
-}) {
+export default async function MetricPage(props: { params: Promise<{ metricId: string }> }) {
   const params = await props.params;
   const { metricId } = params;
 
diff --git a/web/src/components/ui/sidebar/SidebarCollapsible.tsx b/web/src/components/ui/sidebar/SidebarCollapsible.tsx
index b5515b58a..8ca1ed237 100644
--- a/web/src/components/ui/sidebar/SidebarCollapsible.tsx
+++ b/web/src/components/ui/sidebar/SidebarCollapsible.tsx
@@ -21,6 +21,7 @@ import {
   DragStartEvent,
   DragEndEvent
 } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
   arrayMove,
   SortableContext,
@@ -31,6 +32,8 @@ import {
 import { CSS } from '@dnd-kit/utilities';
 import { useMemoizedFn } from '@/hooks';
 
+const modifiers = [restrictToVerticalAxis];
+
 interface SidebarTriggerProps {
   label: string;
   isOpen: boolean;
@@ -181,7 +184,8 @@ export const SidebarCollapsible: React.FC<
                 sensors={sensors}
                 collisionDetection={closestCenter}
                 onDragStart={handleDragStart}
-                onDragEnd={handleDragEnd}>
+                onDragEnd={handleDragEnd}
+                modifiers={modifiers}>
                 <SortableContext
                   items={sortedItems.map((item) => item.id)}
                   strategy={verticalListSortingStrategy}>
diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx
index af0ee053a..0a23ddea8 100644
--- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx
+++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx
@@ -45,7 +45,7 @@ export const MetricTitle: React.FC<{
     }, [title, useEllipsis]);
 
     return (
-      <Link className="flex px-4" href={metricLink}>
+      <Link className="flex px-4" href={metricLink} prefetch>
         <div
           {...attributes}
           {...listeners}
diff --git a/web/src/layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts b/web/src/layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts
index e264e9854..90d44063e 100644
--- a/web/src/layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts
+++ b/web/src/layouts/ChatLayout/ChatLayoutContext/useChatFileLayout/useChatFileLayout.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { FileType } from '@/api/asset_interfaces';
 import { useMemo, useState } from 'react';
 import { FileConfig, FileView, FileViewConfig, FileViewSecondary } from './interfaces';
diff --git a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
index ed3440083..1e2bba707 100644
--- a/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
+++ b/web/src/layouts/ChatLayout/hooks/useSelectedFileAndLayout/useSelectedFileAndLayout.ts
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState, useTransition } from 'react';
+import { useEffect, useMemo, useState, useTransition } from 'react';
 import type { ChatLayoutView, SelectedFile } from '../../interfaces';
 import { usePathname } from 'next/navigation';
 import { parsePathnameSegments } from './parsePathnameSegments';
@@ -73,6 +73,10 @@ export const useSelectedFileAndLayout = ({
     });
   });
 
+  useEffect(() => {
+    setSelectedFile(initializeSelectedFile(params));
+  }, [Object.keys(params).join('')]);
+
   return useMemo(
     () => ({
       onSetSelectedFile,