fix secondary mount of sql editor

web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/results/page.tsx

@@ -1,7 +1,7 @@
-import { MetricViewResults } from '@/controllers/MetricController/MetricViewResults';
+import { MetricViewResultsController } from '@/controllers/MetricController/MetricViewResults';
 
 export default async function ResultsPage({ params }: { params: Promise<{ metricId: string }> }) {
   const { metricId } = await params;
 
-  return <MetricViewResults metricId={metricId} />;
+  return <MetricViewResultsController metricId={metricId} />;
 }

web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/results/page.tsx

@@ -1,7 +1,7 @@
-import { MetricViewResults } from '@/controllers/MetricController/MetricViewResults';
+import { MetricViewResultsController } from '@/controllers/MetricController/MetricViewResults';
 
 export default async function ResultsPage({ params }: { params: Promise<{ metricId: string }> }) {
   const { metricId } = await params;
 
-  return <MetricViewResults metricId={metricId} />;
+  return <MetricViewResultsController metricId={metricId} />;
 }

web/src/components/features/layouts/AppVerticalCodeSplitter/AppVerticalCodeSplitter.tsx

@@ -3,6 +3,7 @@ import { AppSplitter, type AppSplitterRef } from '@/components/ui/layouts/AppSpl
 import { SQLContainer } from './SQLContainer';
 import { DataContainer } from './DataContainer';
 import type { IDataResult } from '@/api/asset_interfaces';
+import { useMount } from '@/hooks';
 
 export interface AppVerticalCodeSplitterProps {
   sql: string;

web/src/components/ui/layouts/AppSplitter/AppSplitter.tsx

@@ -91,9 +91,11 @@ export const AppSplitter = React.memo(
       }, [hasHidden, leftHidden, sizes]);
 
       const memoizedLeftPaneStyle = useMemo(() => {
-        const isHidden = leftHidden || _sizes[0] === '0%'; //leftHidden || _sizes[0] === '0px' || _sizes[0] === 0 || _sizes[0] === '0%';
+        const isHidden = leftHidden;
+        const isEffectivelyHidden = _sizes[0] === '0px' || _sizes[0] === '0%';
         return {
-          display: isHidden ? 'none' : undefined
+          display: isHidden ? 'none' : undefined,
+          overflow: isEffectivelyHidden ? 'hidden' : undefined
         };
       }, [leftHidden, _sizes[0]]);
 

web/src/controllers/MetricController/MetricViewChart/MetricViewChartContent.tsx

@@ -4,7 +4,6 @@ import { BusterChart } from '@/components/ui/charts';
 import { cn } from '@/lib/classMerge';
 import React, { useMemo } from 'react';
 import { METRIC_CHART_CONTAINER_ID } from './config';
-import { useMount } from '@/hooks';
 
 interface MetricViewChartContentProps {
   className?: string;

web/src/controllers/MetricController/MetricViewResults/MetricViewResultsController.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { useMemoizedFn, useUnmount } from '@/hooks';
+import { useMemoizedFn, useMount, useUnmount } from '@/hooks';
 import { IDataResult } from '@/api/asset_interfaces';
 import { useMetricResultsLayout } from './useMetricResultsLayout';
 import { useChatLayoutContextSelector } from '@/layouts/ChatLayout/ChatLayoutContext';
@@ -12,7 +12,8 @@ import { useGetMetric, useGetMetricData } from '@/api/buster_rest/metrics';
 
 const autoSaveId = 'metric-view-results';
 
-export const MetricViewResults: React.FC<{ metricId: string }> = React.memo(({ metricId }) => {
+export const MetricViewResultsController: React.FC<{ metricId: string }> = React.memo(
+  ({ metricId }) => {
     const appSplitterRef = React.useRef<AppSplitterRef>(null);
     const selectedFileViewSecondary = useChatLayoutContextSelector(
       (x) => x.selectedFileViewSecondary
@@ -95,10 +96,6 @@ export const MetricViewResults: React.FC<{ metricId: string }> = React.memo(({ m
       }
     }, [metric?.sql]);
 
-  useUnmount(() => {
-    resetRunSQLData({ metricId });
-  });
-
     return (
       <div ref={containerRef} className="h-full w-full p-5">
         <AppVerticalCodeSplitter
@@ -117,6 +114,7 @@ export const MetricViewResults: React.FC<{ metricId: string }> = React.memo(({ m
         />
       </div>
     );
-});
+  }
+);
 
-MetricViewResults.displayName = 'MetricViewResults';
+MetricViewResultsController.displayName = 'MetricViewResultsController';

web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricContainerHeaderButtons.tsx

@@ -120,7 +120,7 @@ const EditSQLButton = React.memo(({ metricId }: { metricId: string }) => {
   const selectedFileViewSecondary = useChatLayoutContextSelector(
     (x) => x.selectedFileViewSecondary
   );
-  const onSetFileView = useChatLayoutContextSelector((x) => x.onSetFileView);
+  const onChangePage = useAppLayoutContextSelector((x) => x.onChangePage);
   const chatId = useChatIndividualContextSelector((x) => x.chatId);
   const metricVersionNumber = useChatLayoutContextSelector((x) => x.metricVersionNumber);
   const editableSecondaryView: MetricFileViewSecondary = 'sql-edit';
@@ -148,14 +148,21 @@ const EditSQLButton = React.memo(({ metricId }: { metricId: string }) => {
   //   onSetFileView({ secondaryView, fileView: 'results' });
   // });
 
-  console.log('href', href);
+  const onClickButton = useMemoizedFn(() => {
+    onChangePage(href, { shallow: true });
+  });
 
   return (
-    <Link href={href}>
+    <Link
+      href={href}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}>
       <SelectableButton
         tooltipText="SQL editor"
         icon={<SquareCode />}
-        onClick={() => {}}
+        onClick={onClickButton}
         selected={isSelectedView}
       />
     </Link>

web/src/layouts/ChatLayout/FileContainer/FileContainerSecondary/secondaryPanelsConfig/metricPanels.tsx

@@ -17,17 +17,13 @@ const VersionHistoryPanel = dynamic(
     ),
   { loading }
 );
-const MetricViewResults = dynamic(
-  () => import('@/controllers/MetricController/MetricViewResults').then((x) => x.MetricViewResults),
-  { loading }
-);
 
 export const MetricSecondaryRecord: Record<
   MetricFileViewSecondary,
   React.FC<FileContainerSecondaryProps>
 > = {
   'chart-edit': ({ selectedFile }) => <MetricEditController metricId={selectedFile?.id || ''} />,
-  'sql-edit': ({ selectedFile }) => <MetricViewResults metricId={selectedFile?.id || ''} />,
+  'sql-edit': ({ selectedFile }) => <></>, //because this is a vertical splitter, we don't want to render the sql edit view in the secondary view because it is vertical
   'version-history': ({ selectedFile }) => (
     <VersionHistoryPanel assetId={selectedFile?.id || ''} type="metric" />
   )