Highlight changed hashes for Deps columns (#2029)

* Highlight changed hashes for deps columns

* Use ValueWithChanges for deps values

* Create separate style for deps changes

* Improve code style

Author: wolmir

extension/src/experiments/columns/extract.ts

@@ -1,6 +1,10 @@
 import { Deps, ExperimentFields, ValueTreeRoot } from '../../cli/reader'
 import { shortenForLabel } from '../../util/string'
-import { DepColumns, MetricOrParamColumns } from '../webview/contract'
+import {
+  DepColumns,
+  Experiment,
+  MetricOrParamColumns
+} from '../webview/contract'
 
 const extractMetricsOrParams = (
   columns?: ValueTreeRoot
@@ -21,28 +25,36 @@ const extractMetricsOrParams = (
   return acc
 }
 
-const extractDeps = (columns?: Deps): DepColumns | undefined => {
+const extractDeps = (
+  columns?: Deps,
+  branch?: Experiment
+): DepColumns | undefined => {
   if (!columns) {
     return
   }
 
   const acc: DepColumns = {}
 
   for (const [path, { hash }] of Object.entries(columns)) {
-    acc[path] = shortenForLabel(hash)
+    const value = shortenForLabel(hash)
+    acc[path] = {
+      changes: !!value && !!branch && branch?.deps?.[path].value !== value,
+      value
+    }
   }
 
   return acc
 }
 
 export const extractColumns = (
-  experiment: ExperimentFields
+  experiment: ExperimentFields,
+  branch?: Experiment
 ): {
   deps: DepColumns | undefined
   metrics: MetricOrParamColumns | undefined
   params: MetricOrParamColumns | undefined
 } => ({
-  deps: extractDeps(experiment.deps),
+  deps: extractDeps(experiment.deps, branch),
   metrics: extractMetricsOrParams(experiment.metrics),
   params: extractMetricsOrParams(experiment.params)
 })

extension/src/experiments/model/collect.ts

@@ -112,9 +112,10 @@ const getCheckpointTipId = (
 
 const transformColumns = (
   experiment: Experiment,
-  experimentFields: ExperimentFields
+  experimentFields: ExperimentFields,
+  branch?: Experiment
 ) => {
-  const { metrics, params, deps } = extractColumns(experimentFields)
+  const { metrics, params, deps } = extractColumns(experimentFields, branch)
 
   if (metrics) {
     experiment.metrics = metrics
@@ -133,7 +134,8 @@ const transformExperimentData = (
   label: string | undefined,
   sha?: string,
   displayNameOrParent?: string,
-  logicalGroupName?: string
+  logicalGroupName?: string,
+  branch?: Experiment
 ): Experiment => {
   const experiment = {
     id,
@@ -153,7 +155,7 @@ const transformExperimentData = (
     experiment.sha = sha
   }
 
-  transformColumns(experiment, experimentFields)
+  transformColumns(experiment, experimentFields, branch)
 
   return experiment
 }
@@ -162,7 +164,8 @@ const transformExperimentOrCheckpointData = (
   sha: string,
   experimentData: ExperimentFieldsOrError,
   experimentsObject: ExperimentsObject,
-  branchSha: string
+  branchSha: string,
+  branch: Experiment
 ): {
   checkpointTipId?: string
   experiment: Experiment | undefined
@@ -187,7 +190,8 @@ const transformExperimentOrCheckpointData = (
       shortenForLabel(sha),
       sha,
       getDisplayNameOrParent(sha, branchSha, experimentsObject),
-      getLogicalGroupName(sha, branchSha, experimentsObject)
+      getLogicalGroupName(sha, branchSha, experimentsObject),
+      branch
     )
   }
 }
@@ -222,14 +226,17 @@ const collectFromExperimentsObject = (
   acc: ExperimentsAccumulator,
   experimentsObject: ExperimentsObject,
   branchSha: string,
-  branchName: string
+  branch: Experiment
 ) => {
+  const branchName = branch.label
+
   for (const [sha, experimentData] of Object.entries(experimentsObject)) {
     const { checkpointTipId, experiment } = transformExperimentOrCheckpointData(
       sha,
       experimentData,
       experimentsObject,
-      branchSha
+      branchSha,
+      branch
     )
     if (!experiment) {
       continue
@@ -257,7 +264,7 @@ const collectFromBranchesObject = (
     const branch = transformExperimentData(name, experimentFields, name, sha)
 
     if (branch) {
-      collectFromExperimentsObject(acc, experimentsObject, sha, branch.label)
+      collectFromExperimentsObject(acc, experimentsObject, sha, branch)
       collectHasRunningExperiment(acc, branch)
 
       acc.branches.push(branch)

extension/src/experiments/webview/contract.ts

@@ -6,8 +6,13 @@ export interface MetricOrParamColumns {
   [filename: string]: ValueTree
 }
 
+export interface ValueWithChanges {
+  value: string | number
+  changes: boolean
+}
+
 export interface DepColumns {
-  [path: string]: string
+  [path: string]: ValueWithChanges
 }
 
 export interface Experiment extends BaseExperimentFields {