From 19f5107f94a023ebf8e01c228d4863ce65bb83c8 Mon Sep 17 00:00:00 2001
From: Tim Sweeney <tim@wandb.com>
Date: Thu, 10 Oct 2024 14:10:04 -0700
Subject: [PATCH] Human: Nearly there - just need to do data fetch now

---
 .../LeaderboardPage/EditableMarkdown.tsx      | 26 ++++--
 .../LeaderboardConfigEditor.tsx               | 86 ++++++++++++++++++-
 .../pages/LeaderboardPage/LeaderboardPage.tsx | 43 ++++++----
 3 files changed, 130 insertions(+), 25 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/EditableMarkdown.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/EditableMarkdown.tsx
index 12d3262044bb..12705870a1b7 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/EditableMarkdown.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/EditableMarkdown.tsx
@@ -1,6 +1,13 @@
 import {Box, TextField, Typography} from '@mui/material';
-import React, {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import ReactMarkdown from 'react-markdown';
+import styled from 'styled-components';
 
 interface EditableMarkdownProps {
   value: string;
@@ -8,6 +15,12 @@ interface EditableMarkdownProps {
   placeholder: string;
 }
 
+const StyledReactMarkdown = styled(ReactMarkdown)`
+  > *:first-child {
+    margin-top: 0;
+  }
+`;
+
 export const EditableMarkdown: React.FC<EditableMarkdownProps> = ({
   value,
   onChange,
@@ -75,6 +88,12 @@ export const EditableMarkdown: React.FC<EditableMarkdownProps> = ({
     });
   };
 
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      updateHeight();
+    });
+  }, [updateHeight, value]);
+
   return (
     <Box ref={containerRef} sx={{padding: '16px', transition: 'height 0.3s'}}>
       {isEditing ? (
@@ -84,9 +103,6 @@ export const EditableMarkdown: React.FC<EditableMarkdownProps> = ({
           value={value}
           onChange={e => {
             onChange(e.target.value);
-            requestAnimationFrame(() => {
-              updateHeight();
-            });
           }}
           onBlur={handleBlur}
           placeholder={placeholder}
@@ -114,7 +130,7 @@ export const EditableMarkdown: React.FC<EditableMarkdownProps> = ({
             },
           }}
           onClick={handleEdit}>
-          <ReactMarkdown>{value || placeholder}</ReactMarkdown>
+          <StyledReactMarkdown>{value || placeholder}</StyledReactMarkdown>
         </Typography>
       )}
     </Box>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardConfigEditor.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardConfigEditor.tsx
index 7aca64572e01..d2ed94eb4ca5 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardConfigEditor.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardConfigEditor.tsx
@@ -12,7 +12,7 @@ import {
   Tabs,
   Typography,
 } from '@mui/material';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 
 import {
   fetchDatasetNamesForSpec,
@@ -66,6 +66,16 @@ export const LeaderboardConfigEditor: React.FC<{
     }));
   };
 
+  const updateDescription = (newDescription: string) => {
+    setConfig(prevConfig => ({
+      ...prevConfig,
+      config: {
+        ...prevConfig.config,
+        description: newDescription,
+      },
+    }));
+  };
+
   const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     setActiveTab(newValue);
   };
@@ -81,7 +91,8 @@ export const LeaderboardConfigEditor: React.FC<{
       }}>
       <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
         <Tabs value={activeTab} onChange={handleTabChange}>
-          <Tab label="Config Editor" />
+          <Tab label="Editor" />
+          <Tab label="Description" />
           <Tab label="Config Preview" />
         </Tabs>
       </Box>
@@ -93,7 +104,13 @@ export const LeaderboardConfigEditor: React.FC<{
             updateConfig={updateConfig}
           />
         )}
-        {activeTab === 1 && <ConfigPreview config={config} />}
+        {activeTab === 1 && (
+          <DescriptionEditor
+            description={config.config.description}
+            updateDescription={updateDescription}
+          />
+        )}
+        {activeTab === 2 && <ConfigPreview config={config} />}
       </Box>
 
       <Box
@@ -156,6 +173,69 @@ const ConfigPreview: React.FC<{
   );
 };
 
+const DescriptionEditor: React.FC<{
+  description: string;
+  updateDescription: (newDescription: string) => void;
+}> = ({description, updateDescription}) => {
+  const [localDescription, setLocalDescription] = useState(description);
+
+  const debouncedUpdate = useMemo(
+    () =>
+      debounce((value: string) => {
+        updateDescription(value);
+      }, 300),
+    [updateDescription]
+  );
+
+  useEffect(() => {
+    setLocalDescription(description);
+  }, [description]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = event.target.value;
+    setLocalDescription(newValue);
+    debouncedUpdate(newValue);
+  };
+
+  return (
+    <Box sx={{height: 'calc(100vh - 200px)'}}>
+      <textarea
+        value={localDescription}
+        onChange={handleChange}
+        style={{
+          width: '100%',
+          height: '100%',
+          fontFamily: 'monospace',
+          fontSize: '14px',
+          padding: '10px',
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          resize: 'none',
+          backgroundColor: '#f5f5f5',
+          lineHeight: '1.5',
+          whiteSpace: 'pre-wrap',
+          overflowWrap: 'break-word',
+        }}
+        placeholder="Enter markdown description here..."
+      />
+    </Box>
+  );
+};
+
+// Debounce function
+function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null;
+  return (...args: Parameters<T>) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
 const SourceEvaluationsConfig: React.FC<{
   sourceEvaluations: FilterAndGroupSourceEvaluationSpec[] | undefined;
   updateConfig: (
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardPage.tsx
index 28efa6024563..e115edb2300e 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardPage.tsx
@@ -106,24 +106,33 @@ export const LeaderboardPageContent: React.FC<LeaderboardPageProps> = props => {
         flexDirection="column"
         height="100%"
         minWidth="65%">
-        <div
-          style={{
-            position: 'absolute',
-            display: showConfig ? 'none' : 'block',
-            top: 20,
-            right: 24,
+        <Box
+          flex={1}
+          display="flex"
+          flexDirection="row"
+          maxHeight="35%"
+          width="100%"
+          sx={{
+            alignItems: 'flex-start',
           }}>
-          <ToggleLeaderboardConfig
-            isOpen={showConfig}
-            onClick={() => setShowConfig(c => !c)}
-          />
-        </div>
-        <Box flexShrink={0} maxHeight="35%" overflow="auto">
-          <EditableMarkdown
-            value={description}
-            onChange={setDescription}
-            placeholder={DEFAULT_DESCRIPTION}
-          />
+          <Box flexShrink={0} flexGrow={1} overflow="auto">
+            <EditableMarkdown
+              value={description}
+              onChange={setDescription}
+              placeholder={DEFAULT_DESCRIPTION}
+            />
+          </Box>
+          <div
+            style={{
+              display: showConfig ? 'none' : 'block',
+              paddingRight: '16px',
+              paddingTop: '16px',
+            }}>
+            <ToggleLeaderboardConfig
+              isOpen={showConfig}
+              onClick={() => setShowConfig(c => !c)}
+            />
+          </div>
         </Box>
         {showingAlert && (
           <UnlistedAlert onClose={() => setShowingAlert(false)} />