From 782515b3952fdb4c97f2f124615fb30788c341ed Mon Sep 17 00:00:00 2001
From: Henry Fontanier <henry@dust.tt>
Date: Thu, 1 Aug 2024 17:22:52 +0200
Subject: [PATCH] enh: improve viz responsiveness and remove unnecessary
 renders

---
 .../actions/VisualizationActionIframe.tsx     | 28 +++++++++----------
 front/lib/api/assistant/visualization.ts      | 12 +++++---
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/front/components/assistant/conversation/actions/VisualizationActionIframe.tsx b/front/components/assistant/conversation/actions/VisualizationActionIframe.tsx
index 0e27c296c686a..f46c9100dbefd 100644
--- a/front/components/assistant/conversation/actions/VisualizationActionIframe.tsx
+++ b/front/components/assistant/conversation/actions/VisualizationActionIframe.tsx
@@ -133,9 +133,7 @@ export function VisualizationActionIframe({
 
   onRetry: () => void;
 }) {
-  const [contentHeight, setContentHeight] = useState(0);
-  const [iframeLoaded, setIframeLoaded] = useState(false);
-  const [showSpinner, setShowSpinner] = useState(true);
+  const [contentHeight, setContentHeight] = useState<number>(0);
   const [activeIndex, setActiveIndex] = useState(1);
 
   const vizIframeRef = useRef<HTMLIFrameElement>(null);
@@ -154,21 +152,17 @@ export function VisualizationActionIframe({
 
   const { code, complete: codeFullyGenerated } = visualization;
 
+  const iframeLoaded = contentHeight > 0;
+  const showSpinner =
+    (!codeFullyGenerated && !code) || (codeFullyGenerated && !iframeLoaded);
+
   useEffect(() => {
     if (!codeFullyGenerated) {
-      // Display spinner over the code block while waiting for code generation.
-      setShowSpinner(!code);
       setActiveIndex(0);
-    } else if (iframeLoaded) {
-      // Display iframe if code is generated and iframe has loaded.
-      setShowSpinner(false);
-      setActiveIndex(1);
     } else {
-      // Show spinner while iframe is loading.
-      setShowSpinner(true);
       setActiveIndex(1);
     }
-  }, [codeFullyGenerated, code, iframeLoaded]);
+  }, [codeFullyGenerated, code]);
 
   useEffect(() => {
     if (!containerRef.current) {
@@ -202,7 +196,8 @@ export function VisualizationActionIframe({
       <div
         className={classNames(
           "transition-height relative w-full overflow-hidden duration-500 ease-in-out",
-          codeFullyGenerated ? "min-h-96" : ""
+          codeFullyGenerated ? "min-h-96" : "",
+          activeIndex === 1 ? "max-h-[60vh]" : ""
         )}
         ref={containerRef}
       >
@@ -221,7 +216,11 @@ export function VisualizationActionIframe({
           <div className="relative flex h-full w-full shrink-0 items-center justify-center">
             {codeFullyGenerated && (
               <div
-                style={{ height: `${contentHeight}px` }}
+                style={{
+                  height: `${contentHeight}px`,
+                  minHeight: "96",
+                  maxHeight: "60vh",
+                }}
                 className={classNames("max-h-[60vh] w-full")}
               >
                 <iframe
@@ -230,7 +229,6 @@ export function VisualizationActionIframe({
                   className="h-full min-h-96 w-full"
                   src={`${process.env.NEXT_PUBLIC_VIZ_URL}/content?identifier=${visualization.identifier}`}
                   sandbox="allow-scripts"
-                  onLoad={() => setIframeLoaded(true)}
                 />
               </div>
             )}
diff --git a/front/lib/api/assistant/visualization.ts b/front/lib/api/assistant/visualization.ts
index ca0d915ae5101..bf106c2bfc460 100644
--- a/front/lib/api/assistant/visualization.ts
+++ b/front/lib/api/assistant/visualization.ts
@@ -119,11 +119,15 @@ The generated component should not have any required props / parameters.
 
    
 
-### Outermost div height and width    
+### Responsiveness
 
-The component's outermost JSX tag should have a fixed height and width in pixels, set using the \`style\` prop, e.g. \`<div style={{ height: '600px', width: '600px' }}>...</div>\`.
+The content should be responsive and should not have fixed widths or heights. The component should be able to adapt to different screen sizes.
+The content should never overflow the viewport and should never have horizontal or vertical scrollbars.
 
-The height and width should be set to a fixed value, not a percentage. This style should not use tailwind CSS or any type of custom class. There should be a few pixels of horizontal padding to ensure the content is fully visible by the user.
+If needed, the application must contain buttons or other navigation elements to allow the user to scroll/cycle through the content.
+Never use tailwind's specific values like \`h-[600px]\`.
+
+Always add padding to the content (both horizontal and vertical) to make it look better and make sure the labels are fully visible.
 
     
 
@@ -173,7 +177,7 @@ if (file) {
 
 - Base React is available to be imported. In order to use hooks, they have to be imported at the top of the script, e.g. \`import { useState } from "react"\`
 
-- The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`. Support for defaultProps will be removed from function components in a future major release. JavaScript default parameters should be used instead.
+- The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`.
 
 - The papaparse library is available to be imported, e.g. \`import Papa from "papaparse"\` & \`const parsed = Papa.parse(fileContent, {header:true, skipEmptyLines: "greedy"});\`. The \`skipEmptyLines:"greedy"\` configuration should always be used.