From 9c847ca6f175f1a37e16b35ed751927fa624a377 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 3 Feb 2025 11:42:51 -0700
Subject: [PATCH] animate buttons in and out

---
 .../MetricController/MetricController.tsx     | 13 +++++++----
 .../MetricEditController.tsx                  |  7 ++++++
 .../MetricEditController/index.ts             |  1 +
 .../MetricViewController/MetricViewChart.tsx  |  7 ++++++
 .../MetricViewController.tsx                  | 15 +++++++++++++
 .../MetricViewController/MetricViewFile.tsx   |  7 ++++++
 .../MetricViewResults.tsx                     |  7 ++++++
 .../MetricViewController/config.ts            | 14 ++++++++++++
 .../MetricViewController/index.ts             |  1 +
 .../ChatLayout/ChatLayoutContext/index.ts     |  1 +
 .../FileButtonContainer.tsx                   |  7 ++++++
 .../HideButtonContainer.tsx                   | 22 +++++++++++++++++++
 .../MetricContainerHeaderButtons.tsx          | 18 +++++++++++----
 13 files changed, 112 insertions(+), 8 deletions(-)
 create mode 100644 web/src/app/app/_controllers/MetricController/MetricEditController/MetricEditController.tsx
 create mode 100644 web/src/app/app/_controllers/MetricController/MetricEditController/index.ts
 create mode 100644 web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewChart.tsx
 create mode 100644 web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewController.tsx
 create mode 100644 web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewFile.tsx
 create mode 100644 web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewResults.tsx
 create mode 100644 web/src/app/app/_controllers/MetricController/MetricViewController/config.ts
 create mode 100644 web/src/app/app/_controllers/MetricController/MetricViewController/index.ts
 create mode 100644 web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/FileButtonContainer.tsx
 create mode 100644 web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/HideButtonContainer.tsx

diff --git a/web/src/app/app/_controllers/MetricController/MetricController.tsx b/web/src/app/app/_controllers/MetricController/MetricController.tsx
index f0bafc0ef..5f9928585 100644
--- a/web/src/app/app/_controllers/MetricController/MetricController.tsx
+++ b/web/src/app/app/_controllers/MetricController/MetricController.tsx
@@ -1,9 +1,11 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { useChatLayoutContextSelector } from '../../_layouts/ChatLayout';
-import { AppSplitter, AppSplitterRef } from '@/components';
+import { MetricFileView, useChatLayoutContextSelector } from '../../_layouts/ChatLayout';
+import { AppSplitter, AppSplitterRef } from '@/components/layout/AppSplitter';
 import { useMetricControllerLayout } from './useMetricControllerLayout';
+import { MetricViewController } from './MetricViewController';
+import { MetricEditController } from './MetricEditController';
 
 const defaultLayout = ['auto', '0px'];
 
@@ -12,6 +14,9 @@ export const MetricController: React.FC<{
 }> = React.memo(({ metricId }) => {
   const appSplitterRef = useRef<AppSplitterRef>(null);
 
+  const selectedFileView = useChatLayoutContextSelector(
+    (x) => x.selectedFileView
+  ) as MetricFileView;
   const selectedFileViewSecondary = useChatLayoutContextSelector(
     (x) => x.selectedFileViewSecondary
   );
@@ -24,8 +29,8 @@ export const MetricController: React.FC<{
   return (
     <AppSplitter
       ref={appSplitterRef}
-      leftChildren={<div>{metricId}</div>}
-      rightChildren={<div className="min-w-[230px]">right swag</div>}
+      leftChildren={<MetricViewController selectedFileView={selectedFileView} />}
+      rightChildren={<MetricEditController />}
       rightHidden={!renderSecondary}
       autoSaveId="metric-controller"
       defaultLayout={defaultLayout}
diff --git a/web/src/app/app/_controllers/MetricController/MetricEditController/MetricEditController.tsx b/web/src/app/app/_controllers/MetricController/MetricEditController/MetricEditController.tsx
new file mode 100644
index 000000000..84741feba
--- /dev/null
+++ b/web/src/app/app/_controllers/MetricController/MetricEditController/MetricEditController.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const MetricEditController: React.FC = React.memo(() => {
+  return <div>MetricEditController</div>;
+});
+
+MetricEditController.displayName = 'MetricEditController';
diff --git a/web/src/app/app/_controllers/MetricController/MetricEditController/index.ts b/web/src/app/app/_controllers/MetricController/MetricEditController/index.ts
new file mode 100644
index 000000000..f7d0665a1
--- /dev/null
+++ b/web/src/app/app/_controllers/MetricController/MetricEditController/index.ts
@@ -0,0 +1 @@
+export * from './MetricEditController';
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewChart.tsx b/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewChart.tsx
new file mode 100644
index 000000000..c1c7e24c7
--- /dev/null
+++ b/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewChart.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const MetricViewChart: React.FC = React.memo(() => {
+  return <div>MetricViewChart</div>;
+});
+
+MetricViewChart.displayName = 'MetricViewChart';
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewController.tsx b/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewController.tsx
new file mode 100644
index 000000000..e6bd9fba8
--- /dev/null
+++ b/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewController.tsx
@@ -0,0 +1,15 @@
+import { MetricFileView } from '@appLayouts/ChatLayout/ChatLayoutContext';
+import React from 'react';
+import { MetricViewComponents } from './config';
+
+export const MetricViewController: React.FC<{
+  selectedFileView: MetricFileView | undefined;
+}> = React.memo(({ selectedFileView }) => {
+  if (!selectedFileView) return null;
+
+  const Component = MetricViewComponents[selectedFileView];
+
+  return <Component selectedFileView={selectedFileView} />;
+});
+
+MetricViewController.displayName = 'MetricViewController';
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewFile.tsx b/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewFile.tsx
new file mode 100644
index 000000000..7996b2890
--- /dev/null
+++ b/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewFile.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const MetricViewFile: React.FC = React.memo(() => {
+  return <div>MetricViewFile</div>;
+});
+
+MetricViewFile.displayName = 'MetricViewFile';
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewResults.tsx b/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewResults.tsx
new file mode 100644
index 000000000..02abdd04b
--- /dev/null
+++ b/web/src/app/app/_controllers/MetricController/MetricViewController/MetricViewResults.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const MetricViewResults: React.FC = React.memo(() => {
+  return <div>MetricViewResults</div>;
+});
+
+MetricViewResults.displayName = 'MetricViewResults';
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewController/config.ts b/web/src/app/app/_controllers/MetricController/MetricViewController/config.ts
new file mode 100644
index 000000000..9970c9320
--- /dev/null
+++ b/web/src/app/app/_controllers/MetricController/MetricViewController/config.ts
@@ -0,0 +1,14 @@
+import type { MetricFileView } from '@/app/app/_layouts/ChatLayout';
+import { MetricViewChart } from './MetricViewChart';
+import { MetricViewFile } from './MetricViewFile';
+import { MetricViewResults } from './MetricViewResults';
+
+interface MetricViewProps {
+  selectedFileView: MetricFileView;
+}
+
+export const MetricViewComponents: Record<MetricFileView, React.FC<MetricViewProps>> = {
+  chart: MetricViewChart,
+  results: MetricViewResults,
+  file: MetricViewFile
+};
diff --git a/web/src/app/app/_controllers/MetricController/MetricViewController/index.ts b/web/src/app/app/_controllers/MetricController/MetricViewController/index.ts
new file mode 100644
index 000000000..ef0dd627c
--- /dev/null
+++ b/web/src/app/app/_controllers/MetricController/MetricViewController/index.ts
@@ -0,0 +1 @@
+export * from './MetricViewController';
diff --git a/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/index.ts b/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/index.ts
index ec2ac1cce..67764e5a5 100644
--- a/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/index.ts
+++ b/web/src/app/app/_layouts/ChatLayout/ChatLayoutContext/index.ts
@@ -1 +1,2 @@
 export * from './ChatLayoutContext';
+export type * from './useChatFileLayout';
diff --git a/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/FileButtonContainer.tsx b/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/FileButtonContainer.tsx
new file mode 100644
index 000000000..ea99ddfc7
--- /dev/null
+++ b/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/FileButtonContainer.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const FileButtonContainer: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  return <div className="flex items-center gap-1">{children}</div>;
+};
diff --git a/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/HideButtonContainer.tsx b/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/HideButtonContainer.tsx
new file mode 100644
index 000000000..821998a6c
--- /dev/null
+++ b/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/HideButtonContainer.tsx
@@ -0,0 +1,22 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React from 'react';
+
+const displayAnimation = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.15 }
+};
+
+export const HideButtonContainer: React.FC<{
+  children: React.ReactNode;
+  show: boolean;
+}> = React.memo(({ children, show }) => {
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      {show && <motion.div {...displayAnimation}>{children}</motion.div>}
+    </AnimatePresence>
+  );
+});
+
+HideButtonContainer.displayName = 'HideButtonContainer';
diff --git a/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx b/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx
index ad12b1fe5..f47c94ce3 100644
--- a/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx
+++ b/web/src/app/app/_layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons.tsx
@@ -2,21 +2,31 @@ import React from 'react';
 import { FileContainerButtonsProps } from './interfaces';
 import { Button, ButtonProps } from 'antd';
 import { AppMaterialIcons, AppTooltip } from '@/components';
-import { useChatLayoutContextSelector } from '../../ChatLayoutContext';
+import { type MetricFileView, useChatLayoutContextSelector } from '../../ChatLayoutContext';
 import { useMemoizedFn } from 'ahooks';
 import { SaveMetricToCollectionButton } from '@appComponents/Buttons/SaveMetricToCollectionButton';
 import { SaveMetricToDashboardButton } from '@appComponents/Buttons/SaveMetricToDashboardButton';
 import { ShareMetricButton } from '@appComponents/Buttons/ShareMetricButton';
 import { useChatContextSelector } from '../../ChatContext';
+import { HideButtonContainer } from './HideButtonContainer';
+import { FileButtonContainer } from './FileButtonContainer';
 
 export const MetricContainerHeaderButtons: React.FC<FileContainerButtonsProps> = React.memo(() => {
+  const selectedFileView = useChatLayoutContextSelector(
+    (x) => x.selectedFileView
+  ) as MetricFileView;
+
+  const showEditChartButton = selectedFileView === 'chart';
+
   return (
-    <div className="flex items-center gap-1">
-      <EditChartButton />
+    <FileButtonContainer>
+      <HideButtonContainer show={showEditChartButton}>
+        <EditChartButton />
+      </HideButtonContainer>
       <SaveToCollectionButton />
       <SaveToDashboardButton />
       <ShareMetricButton />
-    </div>
+    </FileButtonContainer>
   );
 });