From e2c463671184811b0e79c42c72d02b1fbc09a1d4 Mon Sep 17 00:00:00 2001
From: Ian Arawjo <fatso784@gmail.com>
Date: Mon, 4 Dec 2023 20:45:19 -0500
Subject: [PATCH] Show metavars in Table View

---
 .../react-server/src/LLMResponseInspector.js    | 17 ++++++++++++-----
 .../react-server/src/text-fields-node.css       |  7 +++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/chainforge/react-server/src/LLMResponseInspector.js b/chainforge/react-server/src/LLMResponseInspector.js
index 78ca888..f5f96a4 100644
--- a/chainforge/react-server/src/LLMResponseInspector.js
+++ b/chainforge/react-server/src/LLMResponseInspector.js
@@ -162,14 +162,15 @@ const LLMResponseInspector = ({ jsonResponses, wideFormat }) => {
     
     // Find all vars in responses
     let found_vars = new Set();
+    let found_metavars = new Set();
     let found_llms = new Set();
     jsonResponses.forEach(res_obj => {
-      Object.keys(res_obj.vars).forEach(v => {
-        found_vars.add(v);
-      });
+      Object.keys(res_obj.vars).forEach(v => found_vars.add(v));
+      Object.keys(res_obj.metavars).forEach(v => found_metavars.add(v));
       found_llms.add(getLLMName(res_obj));
     });
     found_vars = Array.from(found_vars);
+    found_metavars = Array.from(found_metavars).filter(v => !v.startsWith("LLM_"));
     found_llms = Array.from(found_llms);
 
     // Whether there's some evaluation scores in the responses
@@ -281,11 +282,12 @@ const LLMResponseInspector = ({ jsonResponses, wideFormat }) => {
       // Generate a table, with default columns for: input vars, LLMs queried
       // First get column names as input vars + LLMs:
       let var_cols, colnames, getColVal, found_sel_var_vals; 
+      let metavar_cols = found_metavars;
       if (tableColVar === 'LLM') {
         var_cols = found_vars;
         getColVal = getLLMName;
         found_sel_var_vals = found_llms;
-        colnames = var_cols.concat(found_llms);
+        colnames = var_cols.concat(metavar_cols).concat(found_llms);
       } else {
         var_cols = found_vars.filter(v => v !== tableColVar)
                              .concat(found_llms.length > 1 ? ['LLM'] : []); // only add LLM column if num LLMs > 1
@@ -296,7 +298,7 @@ const LLMResponseInspector = ({ jsonResponses, wideFormat }) => {
           acc.add(tableColVar in res_obj.vars ? res_obj.vars[tableColVar] : '(unspecified)');
           return acc;
         }, new Set()));
-        colnames = var_cols.concat(found_sel_var_vals);
+        colnames = var_cols.concat(metavar_cols).concat(found_sel_var_vals);
       }
 
       const getVar = (r, v) => v === 'LLM' ? getLLMName(r) : r.vars[v];
@@ -311,6 +313,10 @@ const LLMResponseInspector = ({ jsonResponses, wideFormat }) => {
           const val = (v === 'LLM') ? getLLMName(resp_objs[0]) : resp_objs[0].vars[v];
           return (val !== undefined) ? val : '(unspecified)';
         });
+        const metavar_cols_vals = metavar_cols.map(v => {
+          const val = resp_objs[0].metavars[v];
+          return (val !== undefined) ? val : '(unspecified)';
+        });
         const resp_objs_by_col_var = groupResponsesBy(resp_objs, getColVal)[0];
         const sel_var_cols = found_sel_var_vals.map(val => {
           if (val in resp_objs_by_col_var) {
@@ -326,6 +332,7 @@ const LLMResponseInspector = ({ jsonResponses, wideFormat }) => {
         return (
           <tr key={`r${idx}`} style={{borderBottom: '8px solid #eee'}}>
             {var_cols_vals.map((c, i) => (<td key={`v${i}`} className='inspect-table-var'>{c}</td>))}
+            {metavar_cols_vals.map((c, i) => (<td key={`m${i}`} className='inspect-table-metavar'>{c}</td>))}
             {sel_var_cols.map((c, i) => (<td key={`c${i}`} className='inspect-table-llm-resp'>{c}</td>))}
           </tr>
         );
diff --git a/chainforge/react-server/src/text-fields-node.css b/chainforge/react-server/src/text-fields-node.css
index 735af36..fa73c30 100644
--- a/chainforge/react-server/src/text-fields-node.css
+++ b/chainforge/react-server/src/text-fields-node.css
@@ -329,6 +329,13 @@
     font-weight: 500;
     white-space: pre-wrap;
   }
+  .inspect-table-metavar {
+    background-color: rgb(224, 232, 250);
+    padding-top: 10px;
+    border-right: 1px solid #cde; 
+    font-weight: 500;
+    white-space: pre-wrap;
+  }
   .inspect-table-llm-resp {
     padding-top: 8px;
     padding-bottom: 20px;