fix: index events by worker ordinal, as we attempt to do for log lines

also try not to show heartbeat events over and over again

plugins/plugin-codeflare-dashboard/package.json

@@ -23,14 +23,12 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/heap": "^0.2.31",
     "@types/split2": "^3.2.1",
     "react-devtools-core": "^4.27.4"
   },
   "dependencies": {
     "@logdna/tail-file": "^3.0.1",
     "chokidar": "^3.5.3",
-    "heap": "^0.2.7",
     "ink": "^3.2.0",
     "madwizard": "^8.0.13",
     "pretty-ms": "^7.0.1",

plugins/plugin-codeflare-dashboard/src/components/Dashboard/Timeline.tsx

@@ -33,12 +33,13 @@ export default class Timeline extends React.PureComponent<Props> {
     latest: "▏",
   }
 
+  /** This will help us compute whether we are about to overflow terminal width. */
   private get maxLabelLength() {
     return this.props.gridModels.filter((_) => !_.isQualitative).reduce((N, { title }) => Math.max(N, title.length), 0)
   }
 
   /** @return max number of time cells, across all grids and all workers */
-  private nTimeCells() {
+  private get nTimeCells() {
     // outer loop: iterate across grids
     return this.props?.workers.reduce((nTimes, _) => {
       if (Array.isArray(_) && _.length > 0) {
@@ -95,25 +96,23 @@ export default class Timeline extends React.PureComponent<Props> {
       return <React.Fragment />
     }
 
-    const nTimes = this.nTimeCells()
+    // timeStartIdx: once we overflow the viewport's width, we display
+    // the suffix of history information, starting at this index
+    //                                        /- we have a 1-cell margin between row labels and timeline cells
+    const timeStartIdx = Math.abs(Math.max(0, 1 + this.nTimeCells + this.maxLabelLength - process.stdout.columns))
+    //             total number of cells in the model -/           \- room for row labels  \- fit in viewport
 
-    // to help us compute whether we are about to overflow terminal width
-    const maxLabelLength = this.props.gridModels.reduce((N, spec) => {
-      return Math.max(N, spec.title.length)
-    }, 0)
-
-    // once we overflow, display the suffix of history information, starting at this index
-    const timeStartIdx = Math.abs(Math.max(0, nTimes + maxLabelLength - process.stdout.columns))
-
-    if (nTimes === 0) {
+    if (this.nTimeCells === 0) {
       // none of the grids have any temporal information, yet
       return <React.Fragment />
     } else {
       // render one `this.timeline()` row per grid
       return (
         <Box flexDirection="column">
           {this.props.workers.map((workers, gridIdx) => (
-            <Box key={gridIdx}>{this.timeline(workers, this.props.gridModels[gridIdx], nTimes, timeStartIdx)}</Box>
+            <Box key={gridIdx}>
+              {this.timeline(workers, this.props.gridModels[gridIdx], this.nTimeCells, timeStartIdx)}
+            </Box>
           ))}
         </Box>
       )

plugins/plugin-codeflare-dashboard/src/controller/dashboard/index.ts

@@ -35,6 +35,10 @@ export type Options = Arguments["parsedOptions"] & {
   p: string
   profile: string
   theme: string
+
+  /** Frequency of updates to the timeline, in seconds */
+  u: number
+  "update-frequency": number
 }
 
 /** Behave like top, where the screen is cleared just for this process */
@@ -153,7 +157,7 @@ export default async function dashboard(args: Arguments<Options>, cmd: "db" | "d
   }
 
   const historyConfig: HistoryConfig = {
-    width: 5000,
+    width: args.parsedOptions.u ? 1000 * args.parsedOptions.u : 5000,
   }
 
   const db = dashboardUI(profile, jobId, await gridForA(kind, historyConfig), { scale })

plugins/plugin-codeflare-dashboard/src/controller/dashboard/options.ts

@@ -35,5 +35,5 @@ export default Options
 
 export const flags = {
   boolean: ["demo"],
-  alias: { events: ["e"], lines: ["l"], theme: ["t"], demo: ["d"], scale: ["s"] },
+  alias: { events: ["e"], lines: ["l"], theme: ["t"], demo: ["d"], scale: ["s"], "update-frequency": ["u"] },
 }