Human: Nearly there - just need to do data fetch now

wandb · Oct 10, 2024 · 19f5107 · 19f5107
1 parent 785c29e
commit 19f5107
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 25 deletions.
diff --git a/...rc/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/EditableMarkdown.tsx b/...rc/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/EditableMarkdown.tsx
@@ -1,13 +1,26 @@
 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;
   onChange: (value: string) => void;
   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/...onents/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardConfigEditor.tsx b/...onents/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/...src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardPage.tsx b/...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)} />