Allow visualizing and comparing nested params (mlflow#13012)

Signed-off-by: Juan Escalada <[email protected]>
Signed-off-by: Juan Escalada <[email protected]>

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));