Fix analysis systems with same names (#478)

* avoid analysis on systems with the same names

* remove console log

* refactor code

* show systemID for systems with duplicate names

* change warning message

Author: qjiang002

frontend/src/components/Analysis/AnalysisDrawer/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Drawer, Spin } from "antd";
+import { Drawer, Spin, Tooltip } from "antd";
 import { SystemModel } from "../../../models";
 import { ErrorBoundary, AnalysisReport } from "../../../components";
 import { PageState } from "../../../utils";
@@ -8,6 +8,7 @@ import {
   SystemAnalysesReturn,
   SystemsAnalysesBody,
 } from "../../../clients/openapi";
+import { WarningOutlined } from "@ant-design/icons";
 import { parseFineGrainedResults, valuesToIntervals } from "../utils";
 import { ResultFineGrainedParsed, BucketIntervals } from "../types";
 import ReactGA from "react-ga4";
@@ -194,14 +195,38 @@ export function AnalysisDrawer({ systems, closeDrawer }: Props) {
     setBucketInfoUpdated(false);
   }
 
-  function getDrawerTitle(): string {
+  function getDrawerTitle(): React.ReactNode {
+    const systemNames = systems.map((sys) => sys.system_name);
+    const distinctSystemNames = new Set(systemNames);
+    const duplicateNameWarning =
+      distinctSystemNames.size !== systemNames.length;
+    const duplicateNameWarningMsg =
+      "The systems have duplicate names. Unique system IDs are attached to distinguish between them. Please change system names using the edit button on `Systems` page.";
     if (systems.length === 1) {
       return `Single Analysis of ${systems[0].system_name}`;
     } else if (systems.length === 2) {
       const systemNames = systems.map((sys) => sys.system_name).join(" and ");
-      return `Pairwise Analysis of ${systemNames}`;
+      return (
+        <div>
+          Pairwise Analysis of {systemNames}{" "}
+          {duplicateNameWarning && (
+            <Tooltip title={duplicateNameWarningMsg}>
+              <WarningOutlined />
+            </Tooltip>
+          )}
+        </div>
+      );
     }
-    return "Analysis";
+    return (
+      <div>
+        Analysis{" "}
+        {duplicateNameWarning && (
+          <Tooltip title={duplicateNameWarningMsg}>
+            <WarningOutlined />
+          </Tooltip>
+        )}
+      </div>
+    );
   }
 
   function renderDrawerContent(): React.ReactElement {

frontend/src/components/Analysis/AnalysisReport/FineGrainedAnalysis/FineGrainedBarChart.tsx

@@ -30,7 +30,16 @@ export function FineGrainedBarChart(props: Props) {
     onBarClick,
   } = props;
   // For invariant variables across all systems, we can simply take from the first result
-  const systemNames = systems.map((system) => system.system_name);
+  function getSystemNames(systems: SystemModel[]) {
+    const systemNames = systems.map((sys) => sys.system_name);
+    const distinctSystemNames = new Set(systemNames);
+    if (distinctSystemNames.size !== systemNames.length) {
+      return systems.map((sys) => sys.system_name + "_" + sys.system_id);
+    } else {
+      return systemNames;
+    }
+  }
+  const systemNames = getSystemNames(systems);
   const resultFirst = results[0];
   const bucketNames = resultFirst.bucketNames;
   const featureName = resultFirst.featureName;

frontend/src/components/Analysis/AnalysisReport/OverallMetricsBarChart.tsx

@@ -19,7 +19,16 @@ export function OverallMetricsBarChart({
   metricNames,
   onBarClick,
 }: Props) {
-  const systemNames = systems.map((system) => system.system_name);
+  function getSystemNames(systems: SystemModel[]) {
+    const systemNames = systems.map((sys) => sys.system_name);
+    const distinctSystemNames = new Set(systemNames);
+    if (distinctSystemNames.size !== systemNames.length) {
+      return systems.map((sys) => sys.system_name + "_" + sys.system_id);
+    } else {
+      return systemNames;
+    }
+  }
+  const systemNames = getSystemNames(systems);
   const resultsValues: number[][] = [];
   const resultsNumbersOfSamples: number[][] = [];
   const resultsConfidenceScores: Array<[number, number]>[] = [];

frontend/src/components/SystemsTable/SystemTableTools.tsx

@@ -125,8 +125,8 @@ export function SystemTableTools({
         Analysis
       </Button>
     );
-    // Pairwise analysis
-  } else if (selectedSystemIDs.length === 2) {
+    // Pairwise or multiple system analysis
+  } else {
     let disabled = false;
     let warning = false;
     let tooltipMessage = "";
@@ -144,35 +144,9 @@ export function SystemTableTools({
         disabled={disabled}
         onClick={() => onActiveSystemChange(selectedSystemIDs)}
       >
-        Pairwise Analysis
-        {warning && <WarningOutlined />}
-      </Button>
-    );
-    if (tooltipMessage !== "") {
-      analysisButton = (
-        <Tooltip title={tooltipMessage}>{analysisButton}</Tooltip>
-      );
-    }
-    // three or more systems
-  } else if (selectedSystemIDs.length >= 3) {
-    let disabled = false;
-    let warning = false;
-    let tooltipMessage = "";
-    if (selectedSystemDatasetNames.has("unspecified")) {
-      warning = true;
-      tooltipMessage =
-        "Unspecified dataset name detected. Proceed if you are certain the systems use the same dataset.";
-    } else if (selectedSystemDatasetNames.size > 1) {
-      disabled = true;
-      tooltipMessage =
-        "Cannot perform multiple analysis on systems with different dataset names.";
-    }
-    analysisButton = (
-      <Button
-        disabled={disabled}
-        onClick={() => onActiveSystemChange(selectedSystemIDs)}
-      >
-        Multiple System Analysis
+        {selectedSystemIDs.length === 2
+          ? "Pairwise Analysis"
+          : "Multiple System Analysis"}
         {warning && <WarningOutlined />}
       </Button>
     );