From 52cfaee1e35e131009813f7cd16ce8511d688c85 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 22 Nov 2024 03:00:32 +0100
Subject: [PATCH 1/3] fix(frontend): improved Editor height and padding

---
 .../components/AccordionTreePanel.tsx         | 78 ++++++++++++-------
 1 file changed, 52 insertions(+), 26 deletions(-)

diff --git a/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx b/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
index b2eb45a73b..f0e2839a1a 100644
--- a/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
+++ b/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
@@ -2,7 +2,7 @@ import CopyButton from "@/components/CopyButton/CopyButton"
 import {getStringOrJson} from "@/lib/helpers/utils"
 import {JSSTheme} from "@/lib/Types"
 import {Collapse, Radio, Space} from "antd"
-import React, {useState, useMemo} from "react"
+import React, {useState, useMemo, useRef, useEffect} from "react"
 import {createUseStyles} from "react-jss"
 import yaml from "js-yaml"
 import {Editor} from "@monaco-editor/react"
@@ -36,7 +36,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         },
         "& .ant-collapse-content": {
             borderTop: `1px solid ${theme.colorBorder} !important`,
-            padding: theme.padding,
+            padding: `${theme.padding}px 0`,
             lineHeight: theme.lineHeight,
             backgroundColor: `${bgColor || theme.colorBgContainer} !important`,
             borderBottomLeftRadius: theme.borderRadius,
@@ -77,6 +77,8 @@ const AccordionTreePanel = ({
     const classes = useStyles({bgColor})
     const {appTheme} = useAppTheme()
     const [segmentedValue, setSegmentedValue] = useState("JSON")
+    const editorRef = useRef<HTMLDivElement>(null)
+    const [editorHeight, setEditorHeight] = useState(0)
 
     const yamlOutput = useMemo(() => {
         if (segmentedValue === "YAML" && value && Object.keys(value).length) {
@@ -91,6 +93,16 @@ const AccordionTreePanel = ({
         return ""
     }, [segmentedValue, value])
 
+    const calculateEditorHeight = (content: string) => {
+        const lineCount = content.split("\n").length
+        return Math.min(lineCount * 18, 200)
+    }
+
+    useEffect(() => {
+        const content = segmentedValue === "JSON" ? getStringOrJson(value) : yamlOutput
+        setEditorHeight(calculateEditorHeight(content))
+    }, [value, label, segmentedValue, yamlOutput])
+
     return (
         <Collapse
             {...props}
@@ -100,30 +112,44 @@ const AccordionTreePanel = ({
                     key: label,
                     label,
                     children: (
-                        <Editor
-                            className={classes.editor}
-                            height={fullEditorHeight ? "100%" : 200}
-                            language={
-                                typeof value === "string"
-                                    ? "markdown"
-                                    : segmentedValue === "JSON"
-                                      ? "json"
-                                      : "yaml"
-                            }
-                            theme={`vs-${appTheme}`}
-                            value={segmentedValue === "JSON" ? getStringOrJson(value) : yamlOutput}
-                            options={{
-                                wordWrap: "on",
-                                minimap: {enabled: false},
-                                readOnly: true,
-                                lineNumbers: "off",
-                                lineDecorationsWidth: 0,
-                                scrollbar: {
-                                    verticalScrollbarSize: 8,
-                                    horizontalScrollbarSize: 8,
-                                },
-                            }}
-                        />
+                        <div
+                            ref={editorRef}
+                            style={{height: fullEditorHeight ? "100%" : editorHeight}}
+                        >
+                            <Editor
+                                className={classes.editor}
+                                height={fullEditorHeight ? "100%" : editorHeight}
+                                language={
+                                    typeof value === "string"
+                                        ? "markdown"
+                                        : segmentedValue === "JSON"
+                                          ? "json"
+                                          : "yaml"
+                                }
+                                theme={`vs-${appTheme}`}
+                                value={
+                                    segmentedValue === "JSON" ? getStringOrJson(value) : yamlOutput
+                                }
+                                options={{
+                                    wordWrap: "on",
+                                    minimap: {enabled: false},
+                                    scrollBeyondLastLine: false,
+                                    automaticLayout: true,
+                                    readOnly: true,
+                                    lineNumbers: "off",
+                                    lineDecorationsWidth: 0,
+                                    scrollbar: {
+                                        verticalScrollbarSize: 8,
+                                        horizontalScrollbarSize: 8,
+                                    },
+                                }}
+                                onMount={(editor) =>
+                                    setEditorHeight(
+                                        calculateEditorHeight(editor.getModel()?.getValue() || ""),
+                                    )
+                                }
+                            />
+                        </div>
                     ),
                     extra: (
                         <Space size={12}>

From 716f6230cd5545ba46c75f6001e7b8367372f81e Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 25 Nov 2024 04:03:49 +0100
Subject: [PATCH 2/3] fix(frontend): improved logic to set code editor height

---
 .../components/AccordionTreePanel.tsx         | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx b/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
index f0e2839a1a..9e05711906 100644
--- a/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
+++ b/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
@@ -78,7 +78,7 @@ const AccordionTreePanel = ({
     const {appTheme} = useAppTheme()
     const [segmentedValue, setSegmentedValue] = useState("JSON")
     const editorRef = useRef<HTMLDivElement>(null)
-    const [editorHeight, setEditorHeight] = useState(0)
+    const [editorHeight, setEditorHeight] = useState(200)
 
     const yamlOutput = useMemo(() => {
         if (segmentedValue === "YAML" && value && Object.keys(value).length) {
@@ -93,14 +93,8 @@ const AccordionTreePanel = ({
         return ""
     }, [segmentedValue, value])
 
-    const calculateEditorHeight = (content: string) => {
-        const lineCount = content.split("\n").length
-        return Math.min(lineCount * 18, 200)
-    }
-
     useEffect(() => {
-        const content = segmentedValue === "JSON" ? getStringOrJson(value) : yamlOutput
-        setEditorHeight(calculateEditorHeight(content))
+        setEditorHeight(editorRef.current?.clientHeight || 200)
     }, [value, label, segmentedValue, yamlOutput])
 
     return (
@@ -114,11 +108,11 @@ const AccordionTreePanel = ({
                     children: (
                         <div
                             ref={editorRef}
-                            style={{height: fullEditorHeight ? "100%" : editorHeight}}
+                            style={{height: fullEditorHeight ? "100%" : `${editorHeight}px`}}
                         >
                             <Editor
                                 className={classes.editor}
-                                height={fullEditorHeight ? "100%" : editorHeight}
+                                height={fullEditorHeight ? "100%" : `${editorHeight}px`}
                                 language={
                                     typeof value === "string"
                                         ? "markdown"
@@ -143,11 +137,17 @@ const AccordionTreePanel = ({
                                         horizontalScrollbarSize: 8,
                                     },
                                 }}
-                                onMount={(editor) =>
-                                    setEditorHeight(
-                                        calculateEditorHeight(editor.getModel()?.getValue() || ""),
-                                    )
-                                }
+                                onMount={(editor) => {
+                                    const model = editor.getModel()
+                                    if (model) {
+                                        const updateHeight = () => {
+                                            const contentHeight = editor.getContentHeight()
+                                            setEditorHeight(contentHeight)
+                                        }
+                                        editor.onDidContentSizeChange(updateHeight)
+                                        updateHeight()
+                                    }
+                                }}
                             />
                         </div>
                     ),

From 0ae77e8be138d5e382b287586b80a75c6e3ecf98 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 25 Nov 2024 12:35:31 +0100
Subject: [PATCH 3/3] fix(frontend): added max-height to accordion code editor

---
 .../pages/observability/components/AccordionTreePanel.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx b/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
index 9e05711906..98916148a9 100644
--- a/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
+++ b/agenta-web/src/components/pages/observability/components/AccordionTreePanel.tsx
@@ -94,7 +94,7 @@ const AccordionTreePanel = ({
     }, [segmentedValue, value])
 
     useEffect(() => {
-        setEditorHeight(editorRef.current?.clientHeight || 200)
+        setEditorHeight(Math.min(editorRef.current?.clientHeight || 200, 800))
     }, [value, label, segmentedValue, yamlOutput])
 
     return (
@@ -108,7 +108,11 @@ const AccordionTreePanel = ({
                     children: (
                         <div
                             ref={editorRef}
-                            style={{height: fullEditorHeight ? "100%" : `${editorHeight}px`}}
+                            style={{
+                                height: fullEditorHeight ? "100%" : `${editorHeight}px`,
+                                maxHeight: fullEditorHeight ? "none" : 800,
+                                overflow: "auto",
+                            }}
                         >
                             <Editor
                                 className={classes.editor}