From 63ca2de1d138e106ad3220ec63cd64abca5327e6 Mon Sep 17 00:00:00 2001
From: Juan Escalada <97265671+jescalada@users.noreply.github.com>
Date: Thu, 3 Oct 2024 13:39:22 +0900
Subject: [PATCH] Allow visualizing and comparing nested params (#13012)

Signed-off-by: Juan Escalada <juanescalada175@gmail.com>
Signed-off-by: Juan Escalada <97265671+jescalada@users.noreply.github.com>
---
 .../components/CompareRunView.tsx             | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/mlflow/server/js/src/experiment-tracking/components/CompareRunView.tsx b/mlflow/server/js/src/experiment-tracking/components/CompareRunView.tsx
index 8667e9e04e6ea..a2bcaeaed2038 100644
--- a/mlflow/server/js/src/experiment-tracking/components/CompareRunView.tsx
+++ b/mlflow/server/js/src/experiment-tracking/components/CompareRunView.tsx
@@ -208,6 +208,21 @@ export class CompareRunView extends Component<CompareRunViewProps, CompareRunVie
       // @ts-expect-error TS(4111): Property 'onlyShowParamDiff' comes from an index s... Remove this comment to see the full error message
       this.state.onlyShowParamDiff,
       true,
+      (key: any, data: any) => key,
+      (value) => {
+        try {
+          const jsonValue = parsePythonDictString(value);
+
+          // Pretty print if parsed value is an object or array
+          if (typeof jsonValue === 'object' && jsonValue !== null) {
+            return this.renderPrettyJson(jsonValue);
+          } else {
+            return value;
+          }
+        } catch (e) {
+          return value;
+        }
+      },
     );
     if (dataRows.length === 0) {
       return (
@@ -230,6 +245,10 @@ export class CompareRunView extends Component<CompareRunViewProps, CompareRunVie
     );
   }
 
+  renderPrettyJson(jsonValue: any) {
+    return <pre>{JSON.stringify(jsonValue, null, 2)}</pre>;
+  }
+
   renderMetricTable(colWidth: any, experimentIds: any) {
     const dataRows = this.renderDataRows(
       this.props.metricLists,
@@ -714,4 +733,19 @@ const mapStateToProps = (state: any, ownProps: any) => {
   };
 };
 
+/**
+ * Parse a Python dictionary in string format into a JSON object.
+ * @param value The Python dictionary string to parse
+ * @returns The parsed JSON object, or null if parsing fails
+ */
+const parsePythonDictString = (value: string) => {
+  try {
+    const jsonString = value.replace(/'/g, '"');
+    return JSON.parse(jsonString);
+  } catch (e) {
+    console.error('Failed to parse string to JSON:', e);
+    return null;
+  }
+};
+
 export default connect(mapStateToProps)(injectIntl(CompareRunView));