[fix] Fix chart interactions issue in the Single Run Page Metrics tab (…

…#1424)
aimhubio · Mar 2, 2022 · c1c6a75 · c1c6a75
1 parent 606d861
commit c1c6a75
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,11 +2,9 @@
 
 ## 3.6.2
 
+- Fix chart interactions issue in the Single Run Page Metrics tab (roubkar)
 - Fix `resolve_objects` in remote tracking client subtree (alberttorosyan)
 - Reject `0` as step/record count (alberttorosyan, VkoHov)
-
-### Fixes:
-
 - Fix error on mlflow conversion by experiment id (devfox-se)  
 
 ## 3.6.1 Feb 25, 2022

diff --git a/aim/web/ui/src/pages/RunDetail/RunDetailMetricsAndSystemTab.tsx b/aim/web/ui/src/pages/RunDetail/RunDetailMetricsAndSystemTab.tsx
@@ -49,7 +49,9 @@ function RunDetailMetricsAndSystemTab({
           <div className='RunDetailMetricsTab'>
             <div className='RunDetailMetricsTab__container'>
               {runBatch.map((batch: IRunBatch, i: number) => {
-                return <RunMetricCard batch={batch} index={i} key={i} />;
+                return (
+                  <RunMetricCard key={batch.key} batch={batch} index={i} />
+                );
               })}
             </div>
           </div>

diff --git a/aim/web/ui/src/pages/RunDetail/RunMetricCard.tsx b/aim/web/ui/src/pages/RunDetail/RunMetricCard.tsx
@@ -24,19 +24,14 @@ function RunMetricCard({
             <LineChart
               data={[
                 {
-                  key:
-                    batch.metric_name +
-                    contextToString(batch.context, 'keyHash'),
+                  key: batch.key,
                   data: {
                     xValues: [...batch.iters],
                     yValues: [...batch.values],
                   },
                   color: '#1c2852',
                   dasharray: '0',
-                  selectors: [
-                    batch.metric_name +
-                      contextToString(batch.context, 'keyHash'),
-                  ],
+                  selectors: [batch.key],
                 },
               ]}
               index={index}
@@ -70,7 +65,7 @@ function RunMetricCard({
             ?.split(',')
             .map((label: string, i: number) => (
               <Badge
-                key={index}
+                key={i}
                 size='large'
                 color={COLORS[0][(i + index) % COLORS[0].length]}
                 label={label || 'Empty context'}

diff --git a/aim/web/ui/src/pages/RunDetail/types.d.ts b/aim/web/ui/src/pages/RunDetail/types.d.ts
@@ -21,6 +21,7 @@ export interface IRunDetailSettingsTabProps {
 }
 
 export interface IRunBatch {
+  key: string;
   context: { [key: string]: string };
   iters: number[];
   name: string;

diff --git a/aim/web/ui/src/services/analytics.ts b/aim/web/ui/src/services/analytics.ts
@@ -9,8 +9,8 @@ let initialized = false;
 
 const enabled = () => {
   return (
-    (!isDev() && window.analytics !== false) || window.telemetry_enabled !== 0
-  ); //!isDev() && cookies.getCookie(configs.USER_ANALYTICS_COOKIE_NAME) == 1;
+    !isDev() && window.analytics !== false && window.telemetry_enabled === 1
+  );
 };
 
 const init = () => {

diff --git a/aim/web/ui/src/services/models/runs/runDetailAppModel.ts b/aim/web/ui/src/services/models/runs/runDetailAppModel.ts
@@ -9,6 +9,9 @@ import { INotification } from 'types/components/NotificationContainer/Notificati
 import { IApiRequest } from 'types/services/services';
 
 import exceptionHandler from 'utils/app/exceptionHandler';
+import { encode } from 'utils/encoder/encoder';
+import contextToString from 'utils/contextToString';
+import alphabeticalSortComparator from 'utils/alphabeticalSortComparator';
 
 import createModel from '../model';
 
@@ -121,16 +124,28 @@ function getRunMetricsBatch(body: any, runHash: string) {
       const runMetricsBatch: IRunBatch[] = [];
       const runSystemBatch: IRunBatch[] = [];
       data.forEach((run: IRunBatch) => {
+        const metric = {
+          ...run,
+          key: encode({
+            name: run.name,
+            context: run.context,
+          }),
+          sortKey: `${run.name}_${contextToString(run.context)}`,
+        };
         if (run.name.startsWith('__system__')) {
-          runSystemBatch.push(run);
+          runSystemBatch.push(metric);
         } else {
-          runMetricsBatch.push(run);
+          runMetricsBatch.push(metric);
         }
       });
       model.setState({
         ...model.getState(),
-        runMetricsBatch,
-        runSystemBatch,
+        runMetricsBatch: runMetricsBatch.sort(
+          alphabeticalSortComparator({ orderBy: 'sortKey' }),
+        ),
+        runSystemBatch: runSystemBatch.sort(
+          alphabeticalSortComparator({ orderBy: 'sortKey' }),
+        ),
         isRunBatchLoading: false,
       });
     },