Draw y axis lines (#937)

* Draw y axis lines
* Add view option for rendering horizontal y axis lines

src/components/timeline/Row.svelte

@@ -6,6 +6,7 @@
   import { select } from 'd3-selection';
   import { pick } from 'lodash-es';
   import { createEventDispatcher } from 'svelte';
+  import { allResources } from '../../stores/simulation';
   import { selectedRow, viewSetSelectedRow, viewTogglePanel } from '../../stores/views';
   import type {
     ActivityDirective,
@@ -42,8 +43,8 @@
   import RowHorizontalGuides from './RowHorizontalGuides.svelte';
   import RowXAxisTicks from './RowXAxisTicks.svelte';
   import RowYAxes from './RowYAxes.svelte';
+  import RowYAxisTicks from './RowYAxisTicks.svelte';
   import TimelineViewDirectiveControls from './TimelineViewDirectiveControls.svelte';
-  import { allResources } from '../../stores/simulation';
 
   export let activityDirectivesByView: ActivityDirectivesByView = { byLayerId: {}, byTimelineId: {} };
   export let activityDirectivesMap: ActivityDirectivesMap = {};
@@ -274,6 +275,7 @@
       <g transform="translate({marginLeft}, 0)">
         {#if drawWidth > 0}
           <RowXAxisTicks {drawHeight} {xScaleView} {xTicksView} />
+          <RowYAxisTicks {drawHeight} {drawWidth} yAxes={yAxesWithScaleDomains} />
           <ConstraintViolations
             {constraintResults}
             {drawHeight}

src/components/timeline/RowHeader.svelte

@@ -51,6 +51,7 @@
     height: 24px;
     padding: 0px 8px 0px 4px;
     position: relative;
+    z-index: 3;
   }
 
   .row-header-title {

src/components/timeline/RowYAxisTicks.svelte

@@ -0,0 +1,40 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  import { axisLeft as d3AxisLeft } from 'd3-axis';
+  import type { Axis } from '../../types/timeline';
+  import { getYScale } from '../../utilities/timeline';
+
+  export let drawHeight: number = 0;
+  export let drawWidth: number = 0;
+  export let yAxes: Axis[] = [];
+
+  let ticks: number[] = [];
+  $: if (drawHeight && drawWidth) {
+    ticks = [];
+    yAxes.forEach(axis => {
+      if (
+        axis.renderTickLines &&
+        axis.scaleDomain &&
+        axis.scaleDomain.length === 2 &&
+        typeof axis.scaleDomain[0] === 'number' &&
+        typeof axis.scaleDomain[1] === 'number'
+      ) {
+        const scale = getYScale(axis.scaleDomain, drawHeight);
+        const axisLeft = d3AxisLeft(scale).ticks(5);
+        // D3 typings do not correctly reflect the presence of the "ticks()" function
+        const tickValues = (axisLeft.scale() as any).ticks() as number[];
+        const tickValues2 = tickValues.map(tick => scale(tick));
+        ticks.push(...tickValues2);
+      }
+    });
+  }
+</script>
+
+<g class="row-y-axis-ticks">
+  {#each ticks as tick}
+    <g class="tick" opacity="1" transform="translate(0 {tick})">
+      <line stroke="rgba(241, 242, 243, 1)" x2={drawWidth} />
+    </g>
+  {/each}
+</g>

src/components/timeline/TimelineCursor.svelte

@@ -37,7 +37,6 @@
     height: 100%;
     left: 0;
     opacity: 1;
-    pointer-events: all;
     position: absolute;
     top: -10px;
     transform: translateX(0);

src/components/timeline/TimelineCursors.svelte

@@ -195,6 +195,7 @@
     pointer-events: none;
     position: absolute;
     width: 100%;
+    z-index: 2;
   }
 
   .timeline-cursor-header {

src/components/timeline/form/TimelineEditorYAxisSettings.svelte

@@ -3,16 +3,16 @@
 <script lang="ts">
   import SettingsIcon from '@nasa-jpl/stellar/icons/settings.svg?component';
   import { createEventDispatcher } from 'svelte';
+  import { viewTimeRange } from '../../../stores/plan';
+  import { resourcesByViewLayerId } from '../../../stores/simulation';
   import { selectedRow, selectedTimeline, viewUpdateRow } from '../../../stores/views';
   import type { Axis, AxisDomainFitMode } from '../../../types/timeline';
   import { getTarget } from '../../../utilities/generic';
+  import { getYAxisBounds } from '../../../utilities/timeline';
   import { tooltip } from '../../../utilities/tooltip';
   import Input from '../../form/Input.svelte';
   import Menu from '../../menus/Menu.svelte';
   import MenuHeader from '../../menus/MenuHeader.svelte';
-  import { getYAxisBounds } from '../../../utilities/timeline';
-  import { resourcesByViewLayerId } from '../../../stores/simulation';
-  import { viewTimeRange } from '../../../stores/plan';
 
   export let yAxis: Axis;
   export let yAxes: Axis[];
@@ -73,6 +73,17 @@
     viewUpdateRow('yAxes', newRowYAxes);
   }
 
+  function updateYAxisTickLines(event: Event) {
+    const checked = (event.target as HTMLInputElement).checked;
+    const newRowYAxes = yAxes.map(axis => {
+      if (axis.id === yAxis.id) {
+        return { ...axis, renderTickLines: checked };
+      }
+      return axis;
+    });
+    viewUpdateRow('yAxes', newRowYAxes);
+  }
+
   function updateYAxisScaleDomain(event: Event, yAxis: Axis) {
     const { name, value: v } = getTarget(event);
     const numberValue = v as number;
@@ -112,6 +123,16 @@
   <Menu bind:this={axisMenu} hideAfterClick={false} placement="bottom-end" width={280}>
     <MenuHeader title="Y Axis Settings" />
     <div class="body st-typography-body">
+      <Input layout="inline">
+        <label for="renderTickLines">Horizontal Ticks</label>
+        <input
+          style:width="max-content"
+          checked={yAxis.renderTickLines}
+          id="renderTickLines"
+          on:change={event => updateYAxisTickLines(event)}
+          type="checkbox"
+        />
+      </Input>
       <Input layout="inline">
         <label for="autofitDomain">Domain Fitting</label>
         <select

src/schemas/ui-view-schema.json

@@ -408,13 +408,17 @@
                       "items": {
                         "additionalProperties": false,
                         "properties": {
+                          "color": {
+                            "$ref": "#/definitions/color"
+                          },
                           "domainFitMode": {
                             "description": "Describes the domain fitting behavior for the axis",
                             "enum": ["fitPlan", "fitTimeWindow", "manual"],
                             "type": "string"
                           },
-                          "color": {
-                            "$ref": "#/definitions/color"
+                          "renderTickLines": {
+                            "description": "If true render horizontal lines for each y axis tick, if false do not render them",
+                            "type": "boolean"
                           },
                           "id": {
                             "$ref": "#/definitions/id"

src/types/timeline.ts

@@ -19,6 +19,7 @@ export type Axis = {
   domainFitMode: AxisDomainFitMode;
   id: number;
   label: Label;
+  renderTickLines?: boolean;
   scaleDomain?: (number | null)[];
   tickCount: number | null;
 };

src/utilities/timeline.ts

@@ -385,6 +385,7 @@ export function createYAxis(timelines: Timeline[], args: Partial<Axis> = {}): Ax
     domainFitMode: 'fitTimeWindow',
     id,
     label: { text: 'Label' },
+    renderTickLines: true,
     tickCount: 4,
     ...args,
   };