[1/n] Move Global Parameters into ConfigMetadataContainer

# [1/n] Move Global Parameters into ConfigMetadataContainer This PR stack will set up a basic UI for managing global model settings. Up until now, we've had no way to set model settings (such as system prompt) in the global config metadata from within the editor UI. We've had user feedback about this pain-point, and this is also going to be a crucial integration for the eval UI we're working on (since otherwise you would need to manually add different system prompts to all prompts in the config being evaluated, which is a LOT more friction than current state of using a single system prompt variable in python). In this PR: - Refactor Global parameters component into a global ConfigMetadataContainer which itself contains the global parameters component - Subsequent PRs will add global model settings to this container as well ## Testing: - Just ensure global parameters work as normal ![Screenshot 2024-03-12 at 2 53 22 PM](https://github.com/lastmile-ai/aiconfig/assets/5060851/8e1f4dac-77c8-4388-b0a9-82b21e85690f)
drengskapur · Mar 12, 2024 · 89ad24c · 89ad24c
1 parent 6706102
commit 89ad24c
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 28 deletions.
diff --git a/gradio-notebook/backend/gradio_notebook/templates/component/index.js b/gradio-notebook/backend/gradio_notebook/templates/component/index.js
@@ -42615,7 +42615,7 @@ const D1e = {
         ".actionTabsPanel": {
           width: "400px"
         },
-        ".parametersContainer": {
+        ".configMetadataContainer": {
           maxWidth: "1250px",
           maxHeight: "-webkit-fill-available",
           padding: "0",
@@ -42807,7 +42807,7 @@ const D1e = {
       borderTopColor: "var(--vscode-notebook-cellBorderColor)",
       marginBottom: "0.5em"
     },
-    ".parametersContainer": {
+    ".configMetadataContainer": {
       width: "100%",
       maxHeight: "-webkit-fill-available",
       margin: "16px auto",

diff --git a/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx b/python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx
@@ -44,7 +44,6 @@ import {
   getPrompt,
 } from "../utils/aiconfigStateUtils";
 import { debounce, uniqueId } from "lodash";
-import GlobalParametersContainer from "./GlobalParametersContainer";
 import AIConfigContext from "../contexts/AIConfigContext";
 import ConfigNameDescription from "./ConfigNameDescription";
 import {
@@ -66,6 +65,7 @@ import NotificationProvider, {
   AIConfigEditorNotification,
 } from "./notifications/NotificationProvider";
 import NotificationContext from "./notifications/NotificationContext";
+import ConfigMetadataContainer from "./global/ConfigMetadataContainer";
 
 type Props = {
   aiconfig: AIConfig;
@@ -1154,8 +1154,8 @@ function AIConfigEditorBase({
             setName={onSetName}
           />
         </div>
-        <GlobalParametersContainer
-          initialValue={aiconfigState?.metadata?.parameters ?? {}}
+        <ConfigMetadataContainer
+          metadata={aiconfigState?.metadata}
           onUpdateParameters={onUpdateGlobalParameters}
         />
         <PromptsContainer

diff --git a/.../components/GlobalParametersContainer.tsx → ...onents/global/ConfigMetadataContainer.tsx b/.../components/GlobalParametersContainer.tsx → ...onents/global/ConfigMetadataContainer.tsx
@@ -1,43 +1,44 @@
 import { Accordion, Text, createStyles } from "@mantine/core";
 import { JSONObject } from "aiconfig";
 import { memo, useContext, useState } from "react";
-import ParametersRenderer from "./ParametersRenderer";
-import AIConfigContext from "../contexts/AIConfigContext";
-import { PROMPT_CELL_LEFT_MARGIN_PX } from "../utils/constants";
+import AIConfigContext from "../../contexts/AIConfigContext";
+import { PROMPT_CELL_LEFT_MARGIN_PX } from "../../utils/constants";
+import ParametersRenderer from "../ParametersRenderer";
 
 type Props = {
-  initialValue: JSONObject;
+  metadata: JSONObject;
   onUpdateParameters: (newParameters: JSONObject) => void;
 };
 
 const useStyles = createStyles(() => ({
-  parametersContainer: {
+  configMetadataContainer: {
     margin: `16px auto 16px ${PROMPT_CELL_LEFT_MARGIN_PX}px`,
   },
-  parametersContainerReadonly: {
+  configMetadataContainerReadonly: {
     margin: "16px auto",
   },
 }));
 
-export default memo(function GlobalParametersContainer({
-  initialValue,
+export default memo(function ConfigMetadataContainer({
+  metadata,
   onUpdateParameters,
 }: Props) {
-  const [isParametersDrawerOpen, setIsParametersDrawerOpen] = useState(false);
-
   const { classes } = useStyles();
   const { readOnly } = useContext(AIConfigContext);
+  const [openPanel, setOpenPanel] = useState<string | null>(null);
 
   return (
     // Set local and global classname. Global will override if specified
-    // Local is readonly or not. Global will always have parametersContainer class
-    // and if readonly, will also have parametersContainerReadonly class (to allow overrides)
+    // Local is readonly or not. Global will always have configMetadataContainer class
+    // and if readonly, will also have configMetadataContainerReadonly class (to allow overrides)
     <div
       className={`${
         readOnly
-          ? classes.parametersContainerReadonly
-          : classes.parametersContainer
-      } parametersContainer ${readOnly ? "parametersContainerReadonly" : ""}`}
+          ? classes.configMetadataContainerReadonly
+          : classes.configMetadataContainer
+      } configMetadataContainer ${
+        readOnly ? "configMetadataContainerReadonly" : ""
+      }`}
     >
       <Accordion
         styles={{
@@ -49,16 +50,16 @@ export default memo(function GlobalParametersContainer({
             fontSize: "0.85em",
           },
         }}
-        onChange={(value) => setIsParametersDrawerOpen(value === "parameters")}
+        onChange={(value) => setOpenPanel(value)}
       >
         <Accordion.Item value="parameters">
           <Accordion.Control>
             <Text color="blue">Global Parameters {"{}"}</Text>
           </Accordion.Control>
           <Accordion.Panel>
-            {isParametersDrawerOpen && (
+            {openPanel === "parameters" && (
               <ParametersRenderer
-                initialValue={initialValue}
+                initialValue={metadata?.parameters ?? {}}
                 onUpdateParameters={onUpdateParameters}
                 maxHeight="300px"
               />

diff --git a/python/src/aiconfig/editor/client/src/themes/GradioTheme.ts b/python/src/aiconfig/editor/client/src/themes/GradioTheme.ts
@@ -313,7 +313,7 @@ export const GRADIO_THEME: MantineThemeOverride = {
           width: "400px",
         },
 
-        ".parametersContainer": {
+        ".configMetadataContainer": {
           maxWidth: "1250px",
           maxHeight: "-webkit-fill-available",
           padding: "0",

diff --git a/python/src/aiconfig/editor/client/src/themes/LocalTheme.ts b/python/src/aiconfig/editor/client/src/themes/LocalTheme.ts
@@ -107,7 +107,7 @@ export const LOCAL_THEME: MantineThemeOverride = {
       width: "400px",
     },
 
-    ".parametersContainer": {
+    ".configMetadataContainer": {
       maxWidth: "1250px",
       maxHeight: "-webkit-fill-available",
       padding: "0",

diff --git a/python/src/aiconfig/editor/client/src/themes/VSCodeTheme.ts b/python/src/aiconfig/editor/client/src/themes/VSCodeTheme.ts
@@ -7,7 +7,7 @@ export const VSCODE_THEME: MantineThemeOverride = {
     deg: 45,
   },
 
-  globalStyles: (theme) => ({
+  globalStyles: () => ({
     body: {
       padding: "0 !important",
       color: "var(--vscode-editor-foreground)",
@@ -147,7 +147,7 @@ export const VSCODE_THEME: MantineThemeOverride = {
       marginBottom: "0.5em",
     },
 
-    ".parametersContainer": {
+    ".configMetadataContainer": {
       width: "100%",
       maxHeight: "-webkit-fill-available",
       margin: "16px auto",

diff --git a/vscode-extension/editor/src/VSCodeTheme.ts b/vscode-extension/editor/src/VSCodeTheme.ts
@@ -217,7 +217,7 @@ export const VSCODE_THEME: MantineThemeOverride = {
       marginBottom: "0.5em",
     },
 
-    ".parametersContainer": {
+    ".configMetadataContainer": {
       maxHeight: "-webkit-fill-available",
       margin: "16px auto 16px 36px",
       padding: "0",