From 7b770412263a016e106c3d0080d09f93066392ed Mon Sep 17 00:00:00 2001
From: William Allen <william.allen@kitware.com>
Date: Mon, 25 May 2026 15:01:10 -0400
Subject: [PATCH 1/2] Convert submission monitor chart to ECharts

The TimelinePlot Vue component was originally designed to be the replacement for all other plots across the site, first introduced on the submission monitor page.  Since then, we've decided to use Apache ECharts instead of this D3-based approach.  This PR completely rewrites TimelinePlot.vue with ECharts.  The new plot is functionality equivalent, with a handful of minor UI improvements.
---
 .../js/vue/components/shared/TimelinePlot.vue | 577 +++++-------------
 1 file changed, 148 insertions(+), 429 deletions(-)

diff --git a/resources/js/vue/components/shared/TimelinePlot.vue b/resources/js/vue/components/shared/TimelinePlot.vue
index 5ca041ee3a..e09b90a91a 100644
--- a/resources/js/vue/components/shared/TimelinePlot.vue
+++ b/resources/js/vue/components/shared/TimelinePlot.vue
@@ -1,48 +1,43 @@
 <template>
-  <div ref="divRef">
-    <div class="timeline-tooltip">
-      <span>
-        <b ref="tooltipRow1Axis" />: <text ref="tooltipRow1Value" />
-      </span>
-      <br>
-      <span>
-        <b ref="tooltipRow2Axis" />: <text ref="tooltipRow2Value" />
-      </span>
-    </div>
-  </div>
+  <v-chart
+    ref="chart"
+    class="chart"
+    :option="chartOption"
+    :update-options="{ notMerge: true }"
+    autoresize
+    @click="onClick"
+    @dblclick="onDblClick"
+  />
 </template>
+
 <script>
-import {ref, onMounted } from 'vue';
-import d3 from 'd3';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { LineChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+} from 'echarts/components';
+import VChart from 'vue-echarts';
+
+use([
+  CanvasRenderer,
+  LineChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  DataZoomComponent,
+]);
 
 export default {
   name: 'TimelinePlot',
-  /*
-   * This template generates a line plot for a group of time-series datasets,
-   * where each set is allowed to have a different number of data points.
-   *
-   * The expected input is of the form:
-   *   plotData: [
-   *   |   {
-   *   |   | color: <line color>,  <--- d3 accepts most color formats (hex, rgb, etc.)
-   *   |   | name: '<name to appear in legend>',
-   *   |   | values: [
-   *   |   |   {
-   *   |   |   | x: <Date object>,
-   *   |   |   | y: <numeric>,
-   *   |   |   | url: '<url>'      <--- optional, renders clickable points if provided
-   *   |   |   },
-   *   |   |   ...
-   *   |   | ],
-   *   |   },
-   *   |   ...
-   *   | ],
-   *   },
-   *   title: '<plot title>',
-   *   xLabel: '<x-axis label>',
-   *   yLabel: '<y-axis label>'
-   */
-
+  components: {
+    VChart,
+  },
   props: {
     plotData: {
       type: Object,
@@ -61,411 +56,135 @@ export default {
       required: true,
     },
   },
-
-  setup () {
-    // initialize refs
-    const divRef = ref(); // div element in which to render the plot
-    const tooltipRow1Axis = ref();
-    const tooltipRow1Value = ref();
-    const tooltipRow2Axis = ref();
-    const tooltipRow2Value = ref();
-    onMounted(() => {
-      divRef.value;
-      tooltipRow1Axis.value;
-      tooltipRow1Value.value;
-      tooltipRow2Axis.value;
-      tooltipRow2Value.value;
-    });
-  },
-
-  mounted () {
-    this.plot_timeline_graph();
-  },
-
-  methods: {
-    plot_timeline_graph() {
-
-      const plot_div = this.$refs.divRef;
-      const data = this.plotData.map((d) => d.values);
-      const colors = this.plotData.map((d) => d.color);
-      const line_names = this.plotData.map((d) => d.name);
-      const title = this.title;
-      const xLabel = this.xLabel;
-      const yLabel = this.yLabel;
-      const tooltipRow1Axis = this.$refs.tooltipRow1Axis;
-      const tooltipRow1Value = this.$refs.tooltipRow1Value;
-      const tooltipRow2Axis = this.$refs.tooltipRow2Axis;
-      const tooltipRow2Value = this.$refs.tooltipRow2Value;
-
-
-      // ################## INPUT DATA (temporary) ##################
-      // TODO: refactor all `.style()` calls to CSS sheet
-      const legend_font_size = 18; // GIVEN
-      const title_font_size = 22; // GIVEN
-
-      // TODO: fit relative to page?
-      // define plot size
-      const margin = {
-        top: 2*title_font_size,
-        right: 30,
-        bottom: 30,
-        left: 60,
-      };
-      const width = 600 - margin.left - margin.right;
-      const height = 400 - margin.top - margin.bottom;
-
-
-      // ################## INITIALIZE PLOT ##################
-      // create main svg object in which we draw the plot
-      const svg = d3.select(plot_div)
-        .append('svg')
-        .attr({
-          'width': width + margin.left + margin.right,
-          'height': height + margin.top + margin.bottom,
-        })
-        .append('g')
-        .attr('transform', `translate(${margin.left},${margin.top})`);
-
-      // add title
-      svg.append('text')
-        .attr({
-          'x': width/2,
-          'y': -margin.top/2,
-          'text-anchor': 'middle',
-        })
-        .text(title)
-        .style('font-size', `${title_font_size}px`);;
-
-
-      // ################## PLOT AXES ##################
-      // find extent of the x-axis to make the domain fit the data
-
-      // get list of min,max x values of each dataset
-      const x_extents = data.map((d) => {
-        return d3.extent(d.map((d) => d.x));
-      });
-      // pick max and min x values across all datasets
-      const x_min = d3.min(x_extents, (d) => d[0]);
-      const x_max = d3.max(x_extents, (d) => d[1]);
-      // create x scale that maps dates to width in pixels
-      const x = d3.time.scale()
-        .domain([x_min, x_max])
-        .range([0,width]);
-
-      // plot x-axis
-      const xAxis = svg.append('g')
-        .attr({
-          'class': 'x-axis',
-          'transform': `translate(0,${height})`,
-        })
-        .call(d3.svg.axis().scale(x).orient('bottom'));
-      // add x label
-      xAxis.append('text')
-        .attr({
-          'x': width,
-          'y': -legend_font_size/2,
-        })
-        .style('text-anchor', 'end')
-        .text(xLabel)
-        .style('font-size', `${legend_font_size}px`);
-
-      // likewise, find extent of data on y-axis across all sets of points
-      const y_extents = data.map((d) => {
-        return d3.extent(d.map( (d) => d.y ));
-      });
-      const y_min = d3.min(y_extents, (d) => d[0]);
-      const y_max = d3.max(y_extents, (d) => d[1]);
-      // create y scale that maps data values to height in pixels
-      const y = d3.scale.linear()
-        .domain([y_min, y_max])
-        .range([height,0]);
-      // plot y-axis
-      const yAxis = svg.append('g')
-        .attr('class', 'y-axis')
-        .call(d3.svg.axis().scale(y).orient('left'));
-      // add y label
-      yAxis.append('text')
-        .attr({
-          'transform': 'rotate(-90)',
-          'y': legend_font_size/2,
-          'dy': legend_font_size/2,
-        })
-        .style('text-anchor', 'end')
-        .text(yLabel)
-        .style('font-size', `${legend_font_size}px`);
-
-      // define useful getters for location of point in the plot (in pixels)
-      const getXRange = ((d) => x(d.x));
-      const getYRange = ((d) => y(d.y));
-
-
-      // ################## ADD BRUSHING ##################
-      // add a clipPath object to restrict object to render only inside the plot
-      svg.append('defs')
-        .append('svg:clipPath')
-        .attr('id', 'clip')
-        .append('svg:rect')
-        .attr({
-          'width': width,
-          'height': height,
-          'x': 0,
-          'y': 0,
-        });
-
-      // initialize the brush object
-      const brush = d3.svg.brush()
-        .x(x) // 1D brush only acts on the x-axis
-        .extent(x.domain()) // initialise the brush area
-        .on('brush', () => {
-          d3.select('.extent')
-            .attr('height',height)
-            .style('fill','grey')
-            .style('opacity', 0.25);
-        })
-        .on('brushend', () => {
-          zoomOnSelection(); // trigger an update when brush selection changes
-          d3.select('.extent')
-            .attr('height',0)
-            .style('opacity', 0); // remove gray area when done
-        });
-      svg.append('g')
-        .attr('class', 'brush')
-        .call(brush);
-      // initialize some brush stuff as d3 refuses to do it for us.
-      // TODO: this shouldn't be necessary :(
-      d3.select('.resize w').select('rect').attr('height',height);
-      d3.select('.resize e').select('rect').attr('height',height);
-      d3.select('.background').attr('height',height);
-
-      // general function to update the chart based on specified boundaries
-      function updateChart(new_x1, new_x2, delta_t) {
-        return function() {
-          // update x-axis
-          x.domain([new_x1, new_x2]);
-          xAxis.transition().duration(delta_t)
-            .call(d3.svg.axis().scale(x).orient('bottom'));
-          for (let i = 0; i < data.length; i += 1) {
-            // update line position
-            plot_lines[i].transition().duration(delta_t)
-              .attr('d', d3.svg.line().x(getXRange).y(getYRange));
-            // update circle positions
-            plot_points[i].transition().duration(delta_t)
-              .attr({
-                'cx': getXRange,
-                'cy': getYRange,
-              });
-          }
-        };
-      }
-
-      // zoom-in the plot using the coordinates of the brushed area
-      function zoomOnSelection() {
-        // get the boundaries of the selection
-        const extent = d3.select('.extent');
-        const coord1 = Number(extent.attr('x'));
-        const coord2 = coord1 + Number(extent.attr('width'));
-
-        if (coord2 - coord1 < 2) {
-          return; // selection too small to be meaningfull (e.g. accidental mouse click)
-        }
-        else {
-          updateChart(x.invert(coord1), x.invert(coord2), 700)();
-        }
+  computed: {
+    chartOption() {
+      if (!this.plotData || !Array.isArray(this.plotData)) {
+        return {};
       }
 
-      // on double-click, reinitialize the chart to original zoom level
-      d3.select(plot_div).on('dblclick', updateChart(x_min, x_max, 200));
-
-
-      // ################## ADD TOOLTIP ##################
-      // select div which serves as the tooltip and define functions to update it
-      const tooltip = d3.select('div .timeline-tooltip');
+      const hasData = this.plotData.some((d) => d.values && d.values.length > 0);
+      const hasZoom = this.plotData.some((d) => d.values && d.values.length > 1);
+      const legendFontSize = 18;
+      const titleFontSize = 22;
+
+      const option = {
+        animation: false,
+        title: {
+          text: this.title,
+          left: 'center',
+          textStyle: {
+            fontSize: titleFontSize,
+          },
+        },
+        grid: {
+          top: 80,
+          right: 30,
+          bottom: 80,
+          left: 60,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            const seriesName = params.seriesName;
+            const xValue = params.data[0];
+            const yValue = params.data[1];
+            return `<b>${seriesName}</b>: ${yValue}<br/><b>${this.xLabel}</b>: ${xValue}`;
+          },
+        },
+        xAxis: {
+          type: 'time',
+          name: this.xLabel,
+          nameLocation: 'middle',
+          nameGap: 35,
+          nameTextStyle: {
+            fontSize: legendFontSize,
+          },
+        },
+        yAxis: {
+          type: 'value',
+          name: this.yLabel,
+          nameLocation: 'middle',
+          nameGap: 45,
+          nameTextStyle: {
+            fontSize: legendFontSize,
+          },
+        },
+        series: this.plotData.map((d) => ({
+          name: d.name,
+          type: 'line',
+          data: d.values.map((v) => [v.x, v.y, v.url]),
+          itemStyle: {
+            color: d.color,
+          },
+          showSymbol: false,
+          emphasis: {
+            focus: 'series',
+            itemStyle: {
+              opacity: 1,
+              borderWidth: 2,
+            },
+          },
+          lineStyle: {
+            width: 1.5,
+          },
+        })),
+      };
 
-      // make tooltip visible when user hovers on a point
-      function showTooltip() {
-        d3.select(this).style('opacity', 1); // make circle appear
-        tooltip.transition().duration(100).style('opacity', 1);
+      if (hasZoom) {
+        option.dataZoom = [
+          {
+            type: 'inside',
+            xAxisIndex: 0,
+            filterMode: 'none',
+          },
+          {
+            type: 'slider',
+            xAxisIndex: 0,
+            filterMode: 'none',
+            bottom: 10,
+          },
+        ];
       }
 
-      // load information about data point and display it in the tooltip div
-      function renderTooltip(k) {
-        return function(d) {
-          // get x,y coordinates from the circle the user is hovering on
-          const [x_val, y_val] = Object.values(d).map(String);
-          // render the tooltip div element with this point's data
-          tooltip // add slight offset for visiblity
-            .style('left', `${d3.event.pageX + 15}px`)
-            .style('top', `${d3.event.pageY - 10}px`);
-          d3.select(tooltipRow1Axis).text(line_names[k]);
-          d3.select(tooltipRow1Value).text(y_val);
-          d3.select(tooltipRow2Axis).text(xLabel);
-          d3.select(tooltipRow2Value).text(x_val);
+      if (hasData) {
+        option.legend = {
+          data: this.plotData.map((d) => d.name),
+          right: 30,
+          top: 60,
+          orient: 'vertical',
+          backgroundColor: 'rgba(255, 255, 255, 0.8)',
+          borderColor: 'lightgrey',
+          borderWidth: 1,
+          textStyle: {
+            fontSize: legendFontSize,
+          },
         };
       }
 
-      // make tooltip invisible when user mouse leaves point
-      function hideTooltip() {
-        d3.select(this).style('opacity', 0); // make cirle disappear
-        tooltip.transition().duration(100).style('opacity', 0);
-      }
-
-
-      // ################## DRAW THE LINES ##################
-      const plot_lines = [];
-      const plot_points = [];
-      for (let i = 0; i < data.length; i += 1) {
-        const current_color = colors[i];
-
-        // plot the line
-        const line_i = svg.append('path')
-          .datum(data[i])
-          .attr({
-            'fill': 'none',
-            'stroke': current_color,
-            'stroke-width': 1.5,
-            'clip-path': 'url(#clip)',
-            'd': d3.svg.line()
-              .x(getXRange)
-              .y(getYRange),
-          });
-        plot_lines.push(line_i);
-
-        // draw indivudal data points that appear on hover
-        let point_i = svg.append('g')
-          .selectAll('dot')
-          .data(data[i])
-          .enter()
-          .append('svg:a')
-          .attr('clip-path', 'url(#clip)');
-        if ('url' in data[i][0]) {
-          // add a url to make the circle clickable, if given one
-          point_i.attr('xlink:href', (d) => d.url);
-        }
-        point_i = point_i.append('circle')
-          .attr({
-            'class': 'my_circle',
-            'cx': getXRange,
-            'cy': getYRange,
-            'r': 7,
-            'stroke': current_color,
-            'fill': 'white',
-            'opacity': 0,
-          })
-          .on('mouseover', showTooltip)
-          .on('mousemove', renderTooltip(i))
-          .on('mouseleave', hideTooltip);
-        plot_points.push(point_i);
+      return option;
+    },
+  },
+  methods: {
+    onClick(params) {
+      if (params.data && params.data[2]) {
+        window.location.href = params.data[2];
       }
-
-
-      // ################## ADD LEGEND ##################
-      const numKeys = line_names.length;
-
-      // calculate width of legend ahead of time so that it fits the text exactly
-      // by creating a dummy element with the full texts and removing it immediately
-      // TODO: this is not ideal, but text in SVG is difficult...
-      const textWidths = [];
-      svg.append('g')
-        .selectAll('.getTextWidth')
-        .data(line_names)
-        .enter()
-        .append('text')
-        .attr('font-size', legend_font_size)
-        .text((d) => d)
-        .each(function() {
-          const thisWidth = this.getComputedTextLength();
-          textWidths.push(thisWidth);
-          this.remove(); // remove the text just after displaying it
-        });
-      const maxKeyLen = Math.ceil(d3.max(textWidths));
-
-      // calculate dimensions of the legend
-      const legendRectSize = Math.max(18, legend_font_size); // size of square color swatch
-      const legendSpacing = Math.ceil(legendRectSize/4); // add some minimal padding
-      // calculate width, each row in the legend looks like: |space-swatch-space-key-space|
-      const legendWidth = 3*legendSpacing + legendRectSize + maxKeyLen;
-      // calculate height: there are numKeys rows, each with height legendRectSize
-      //   and we want to put spacing before each row and also after the last row
-      const legendHeight = numKeys*legendRectSize + (numKeys+1)*legendSpacing;
-
-      // create new SVG group to gather all objects associated with the legend
-      const legend = svg.append('g')
-        .attr({
-          'class': 'legend',
-          'width': legendWidth,
-          'height': legendHeight,
-          'transform': `translate(${(width-legendWidth)},0)`,
-        });
-      // add SVG rect object to serve as our legend border
-      legend.append('rect')
-        .attr({
-          'width': legendWidth,
-          'height': legendHeight,
-          'fill': 'white',
-          'stroke': 'lightgrey',
-          'opacity': 0.8,
+    },
+    onDblClick() {
+      if (this.$refs.chart) {
+        this.$refs.chart.dispatchAction({
+          type: 'restore',
         });
-
-      // dim all lines but the selected one when hovering on a legend item
-      function dimLines(_, i) {
-        for (let j = 0; j < data.length; j++) {
-          if (j !== i) {
-            plot_lines[j].transition().duration(150).attr('opacity', 0.25);
-          }
-        }
       }
-      // restore all lines to original opacity on mouse leave
-      function undimLines() {
-        for (let j = 0; j < data.length; j++) {
-          plot_lines[j].transition().duration(150).attr('opacity', 1);
-        }
-      };
-
-      // add rows to the legend for each dataset
-      const legend_items = legend.selectAll('.legend-item')
-        .data(line_names)
-        .enter()
-        .append('g')
-        .attr('class', 'legend-item')
-        .attr('transform', (d, i) => {
-          // calculate the poisiton of each row with respect to
-          // the origin of the rectangular border we added above
-          const rowHeight = legendRectSize + legendSpacing;
-          const horzDist = legendSpacing;
-          const vertDist = i * rowHeight + legendSpacing;
-          return `translate(${horzDist},${vertDist})`;
-        })
-        .on('mouseover', dimLines)
-        .on('mouseleave', undimLines);
-      // draw the color swatch for each row
-      legend_items.append('rect')
-        .attr({
-          'width': legendRectSize,
-          'height': legendRectSize,
-        })
-        .style('fill', (d,i) => colors[i]);
-      // render the text associated with each dataset
-      legend_items.append('text')
-        .attr({
-          'x': legendRectSize + legendSpacing,
-          'y': legendRectSize - legendSpacing/2,
-        })
-        .text((d) => d )
-        .style('font-size', `${legend_font_size}px`);
-
     },
   },
 };
 </script>
+
 <style scoped>
-div .timeline-tooltip {
-  position: absolute;
-  text-align: left;
-  opacity: 0;
-  background-color: white;
-  border: solid;
-  border-width: 1px;
-  border-radius: 0.4em;
-  padding: 0.4em;
+.chart {
+  height: 400px;
+  width: 100%;
 }
 </style>

From e3f45dad10f90c22981f37d8f64162ab5fb166cc Mon Sep 17 00:00:00 2001
From: William Allen <william.allen@kitware.com>
Date: Thu, 28 May 2026 10:09:13 -0400
Subject: [PATCH 2/2] Remove double click action

---
 resources/js/vue/components/shared/TimelinePlot.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/resources/js/vue/components/shared/TimelinePlot.vue b/resources/js/vue/components/shared/TimelinePlot.vue
index e09b90a91a..d9da971531 100644
--- a/resources/js/vue/components/shared/TimelinePlot.vue
+++ b/resources/js/vue/components/shared/TimelinePlot.vue
@@ -6,7 +6,6 @@
     :update-options="{ notMerge: true }"
     autoresize
     @click="onClick"
-    @dblclick="onDblClick"
   />
 </template>
 
@@ -171,13 +170,6 @@ export default {
         window.location.href = params.data[2];
       }
     },
-    onDblClick() {
-      if (this.$refs.chart) {
-        this.$refs.chart.dispatchAction({
-          type: 'restore',
-        });
-      }
-    },
   },
 };
 </script>