Wv 3074 sub daily time slider (#5106)

* first pass * lint fixes * eslint-disable no-await-in-loop
nasa-gibs · Apr 11, 2024 · 933e29a · 933e29a
1 parent 09e5f1d
commit 933e29a
Show file tree

Hide file tree

Showing 5 changed files with 230 additions and 140 deletions.
diff --git a/web/js/components/timeline/timeline-axis/timeline-axis.js b/web/js/components/timeline/timeline-axis/timeline-axis.js
@@ -1335,52 +1335,50 @@ class TimelineAxis extends Component {
       timeScale,
       matchingTimelineCoverage,
     } = this.props;
-    const {
-      startDate,
-      endDate,
-    } = matchingTimelineCoverage;
-
-    const positionTransformX = position + transformX;
-    const { gridWidth } = timeScaleOptions[timeScale].timeAxis;
-    const axisFrontDate = new Date(frontDate).getTime();
-    const axisBackDate = new Date(backDate).getTime();
-    const layerStart = new Date(startDate).getTime();
-    const layerEnd = new Date(endDate).getTime();
-
-    let visible = true;
-    if (layerStart >= axisBackDate || layerEnd <= axisFrontDate) {
-      visible = false;
-    }
-
-    let leftOffset = 0;
-    const layerStartBeforeAxisFront = layerStart < axisFrontDate;
-    const layerEndBeforeAxisBack = layerEnd <= axisBackDate;
 
-    // oversized width allows axis drag buffer
-    let width = axisWidth * 2;
-    if (visible) {
-      if (layerStartBeforeAxisFront) {
-        leftOffset = 0;
-      } else {
-        // positive diff means layerStart more recent than axisFrontDate
-        const diff = moment.utc(layerStart).diff(axisFrontDate, timeScale, true);
-        const gridDiff = gridWidth * diff;
-        leftOffset = gridDiff + positionTransformX;
+    return matchingTimelineCoverage.map(({ startDate, endDate }) => {
+      const positionTransformX = position + transformX;
+      const { gridWidth } = timeScaleOptions[timeScale].timeAxis;
+      const axisFrontDate = new Date(frontDate).getTime();
+      const axisBackDate = new Date(backDate).getTime();
+      const layerStart = new Date(startDate).getTime();
+      const layerEnd = new Date(endDate).getTime();
+
+      let visible = true;
+      if (layerStart >= axisBackDate || layerEnd <= axisFrontDate) {
+        visible = false;
       }
 
-      if (layerEndBeforeAxisBack) {
-        // positive diff means layerEnd earlier than back date
-        const diff = moment.utc(layerEnd).diff(axisFrontDate, timeScale, true);
-        const gridDiff = gridWidth * diff;
-        width = Math.max(gridDiff + positionTransformX - leftOffset, 0);
+      let leftOffset = 0;
+      const layerStartBeforeAxisFront = layerStart < axisFrontDate;
+      const layerEndBeforeAxisBack = layerEnd <= axisBackDate;
+
+      // oversized width allows axis drag buffer
+      let width = axisWidth * 2;
+      if (visible) {
+        if (layerStartBeforeAxisFront) {
+          leftOffset = 0;
+        } else {
+          // positive diff means layerStart more recent than axisFrontDate
+          const diff = moment.utc(layerStart).diff(axisFrontDate, timeScale, true);
+          const gridDiff = gridWidth * diff;
+          leftOffset = gridDiff + positionTransformX;
+        }
+
+        if (layerEndBeforeAxisBack) {
+          // positive diff means layerEnd earlier than back date
+          const diff = moment.utc(layerEnd).diff(axisFrontDate, timeScale, true);
+          const gridDiff = gridWidth * diff;
+          width = Math.max(gridDiff + positionTransformX - leftOffset, 0);
+        }
       }
-    }
 
-    return {
-      visible,
-      leftOffset,
-      width,
-    };
+      return {
+        visible,
+        leftOffset,
+        width,
+      };
+    });
   };
 
   /**
@@ -1389,32 +1387,30 @@ class TimelineAxis extends Component {
   * @param {Number} transformX
   * @returns {Object} DOM SVG object
   */
-  createMatchingCoverageLineDOMEl = (lineCoverageOptions, transformX) => {
-    const { leftOffset, visible, width } = lineCoverageOptions;
-    return (
-      <g
-        className="axis-matching-layer-coverage-line"
-        transform={`translate(${-transformX})`}
-        clipPath="url(#matchingCoverage)"
-      >
-        <rect
-          style={{
-            left: leftOffset,
-            visibility: visible ? 'visible' : 'hidden',
-            margin: '0 0 6px 0',
-          }}
-          rx={0}
-          ry={0}
-          width={width}
-          height={10}
-          transform={`translate(${transformX + leftOffset})`}
-          fill="rgba(0, 119, 212, 0.5)"
-          stroke="rgba(0, 69, 123, 0.8)"
-          strokeWidth={3}
-        />
-      </g>
-    );
-  };
+  createMatchingCoverageLineDOMEl = (lineCoverageOptions, transformX) => lineCoverageOptions.map(({ leftOffset, visible, width }, i) => (
+    <g
+      key={`matchingCoverageLine-${crypto.randomUUID()}`}
+      className="axis-matching-layer-coverage-line"
+      transform={`translate(${-transformX})`}
+      clipPath="url(#matchingCoverage)"
+    >
+      <rect
+        style={{
+          left: leftOffset,
+          visibility: visible ? 'visible' : 'hidden',
+          margin: '0 0 6px 0',
+        }}
+        rx={0}
+        ry={0}
+        width={width}
+        height={10}
+        transform={`translate(${transformX + leftOffset})`}
+        fill="rgba(0, 119, 212, 0.5)"
+        stroke="rgba(0, 69, 123, 0.8)"
+        strokeWidth={3}
+      />
+    </g>
+  ));
 
   render() {
     const {
@@ -1565,7 +1561,7 @@ TimelineAxis.propTypes = {
   isTimelineDragging: PropTypes.bool,
   isTourActive: PropTypes.bool,
   leftOffset: PropTypes.number,
-  matchingTimelineCoverage: PropTypes.object,
+  matchingTimelineCoverage: PropTypes.array,
   onDateChange: PropTypes.func,
   parentOffset: PropTypes.number,
   position: PropTypes.number,

diff --git a/web/js/components/timeline/timeline-coverage/coverage-item-container.js b/web/js/components/timeline/timeline-coverage/coverage-item-container.js
@@ -126,7 +126,7 @@ class CoverageItemContainer extends Component {
     } = getLayerItemStyles(visible, id);
 
     // get line container dimensions
-    const containerLineDimensions = getMatchingCoverageLineDimensions(layer);
+    const containerLineDimensions = getMatchingCoverageLineDimensions(layer).filter(({ visible }) => visible);
     return (
       <div
         className="layer-coverage-line"
@@ -145,40 +145,39 @@ class CoverageItemContainer extends Component {
               const nextDate = array[multiIndex + 1];
               const rangeDateEnd = getRangeDateEndWithAddedInterval(layer, dateObj, layerPeriod, interval, nextDate);
               // get range line dimensions
-              const multiLineRangeOptions = getMatchingCoverageLineDimensions(layer, dateObj, rangeDateEnd);
+              const multiLineRangeOptions = getMatchingCoverageLineDimensions(layer, dateObj, rangeDateEnd).filter(({ visible }) => visible);
               // create DOM line element
               const key = `${id}-${multiIndex}`;
-              return multiLineRangeOptions.visible
-                  && (
-                    <React.Fragment key={key}>
-                      <CoverageLine
-                        axisWidth={axisWidth}
-                        positionTransformX={positionTransformX}
-                        id={id}
-                        options={multiLineRangeOptions}
-                        lineType="MULTI"
-                        startDate={date}
-                        endDate={rangeDateEnd}
-                        color={lineBackgroundColor}
-                        layerPeriod={layerPeriod}
-                        index={key}
-                      />
-                    </React.Fragment>
-                  );
+              return (
+                <React.Fragment key={key}>
+                  <CoverageLine
+                    axisWidth={axisWidth}
+                    positionTransformX={positionTransformX}
+                    id={id}
+                    options={multiLineRangeOptions}
+                    lineType="MULTI"
+                    startDate={date}
+                    endDate={rangeDateEnd}
+                    color={lineBackgroundColor}
+                    layerPeriod={layerPeriod}
+                    index={key}
+                  />
+                </React.Fragment>
+              );
             })
-            : containerLineDimensions.visible && (
-            <CoverageLine
-              axisWidth={axisWidth}
-              positionTransformX={positionTransformX}
-              id={id}
-              options={containerLineDimensions}
-              lineType="SINGLE"
-              startDate={startDate}
-              endDate={endDate}
-              color={lineBackgroundColor}
-              layerPeriod={layerPeriod}
-              index={`${id}-0`}
-            />
+            : (
+              <CoverageLine
+                axisWidth={axisWidth}
+                positionTransformX={positionTransformX}
+                id={id}
+                options={containerLineDimensions}
+                lineType="SINGLE"
+                startDate={startDate}
+                endDate={endDate}
+                color={lineBackgroundColor}
+                layerPeriod={layerPeriod}
+                index={`${id}-0`}
+              />
             )}
         </svg>
       </div>

diff --git a/web/js/components/timeline/timeline-coverage/coverage-line.js b/web/js/components/timeline/timeline-coverage/coverage-line.js
@@ -148,11 +148,11 @@ class CoverageLine extends PureComponent {
       layerPeriod,
       index,
     } = this.props;
-    return (
+    return options.map((option) => (
       <g clipPath="url(#coverageLineBoundary)">
         {this.createMatchingCoverageLineDOMEl(
           id,
-          options,
+          option,
           lineType,
           startDate,
           endDate,
@@ -161,7 +161,7 @@ class CoverageLine extends PureComponent {
           index,
         )}
       </g>
-    );
+    ));
   }
 }
 
@@ -172,7 +172,7 @@ CoverageLine.propTypes = {
   index: PropTypes.string,
   layerPeriod: PropTypes.string,
   lineType: PropTypes.string,
-  options: PropTypes.object,
+  options: PropTypes.array,
   positionTransformX: PropTypes.number,
   startDate: PropTypes.string,
 };