[electrophysiology_browser] Fix gap between chunks

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.tsx

@@ -8,24 +8,27 @@ import {colorOrder} from '../../color';
 
 const LineMemo = R.memoizeWith(
   ({amplitudeScale, filters, channelIndex, traceIndex,
-     chunkIndex, isStacked, DCOffset, numChannels, numChunks}) =>
+     chunkIndex, isStacked, DCOffset, numChannels,
+     numChunks, previousPoint}) =>
     `${amplitudeScale},${filters.join('-')},`
     + `${channelIndex}-${traceIndex}-${chunkIndex},`
-    + `${isStacked},${DCOffset},${numChannels},${numChunks}`,
+    + `${isStacked},${DCOffset},${numChannels},`
+    + `${numChunks},${previousPoint}`,
   ({
-     channelIndex,
-     traceIndex,
-     chunkIndex,
-     interval,
-     seriesRange,
-     amplitudeScale,
-     filters,
-     values,
-     isStacked,
-     DCOffset,
-     numChannels,
-     numChunks,
-     ...rest
+    channelIndex,
+    traceIndex,
+    chunkIndex,
+    interval,
+    seriesRange,
+    amplitudeScale,
+    filters,
+    values,
+    isStacked,
+    DCOffset,
+    numChannels,
+    numChunks,
+    previousPoint,
+    ...rest
    }) => {
     const scales = [
       scaleLinear()
@@ -36,12 +39,25 @@ const LineMemo = R.memoizeWith(
         .range([-0.5, 0.5]),
     ];
 
-    const points = values.map((value, i) =>
-      vec2.fromValues(
-        scales[0](
-          interval[0] + (i / values.length) * (interval[1] - interval[0])
-        ),
-        -(scales[1](value) - DCOffset)
+    const points = previousPoint === null
+      ? []
+      : [
+        vec2.fromValues(
+          scales[0](
+            interval[0] - (1 / values.length) * (interval[1] - interval[0])
+          ),
+          -(scales[1](previousPoint) - DCOffset)
+        )
+    ];
+
+    points.push(
+      ...values.map((value, i) =>
+        vec2.fromValues(
+          scales[0](
+            interval[0] + (i / values.length) * (interval[1] - interval[0])
+          ),
+          -(scales[1](value) - DCOffset)
+        )
       )
     );
 
@@ -77,6 +93,7 @@ type CProps = {
   withDCOffset: number,
   numChannels: number,
   numChunks: number,
+  previousPoint: number | null,
 };
 
 /**
@@ -95,22 +112,24 @@ type CProps = {
  * @param root0.withDCOffset
  * @param root0.numChannels
  * @param root0.numChunks
+ * @param root0.previousPoint
  */
 const LineChunk = ({
-   channelIndex,
-   traceIndex,
-   chunkIndex,
-   chunk,
-   seriesRange,
-   amplitudeScale,
-   scales,
-   physioFileID,
-   isHovered,
-   isStacked,
-   withDCOffset,
-   numChannels,
-   numChunks,
-   ...rest
+  channelIndex,
+  traceIndex,
+  chunkIndex,
+  chunk,
+  seriesRange,
+  amplitudeScale,
+  scales,
+  physioFileID,
+  isHovered,
+  isStacked,
+  withDCOffset,
+  numChannels,
+  numChunks,
+  previousPoint,
+  ...rest
  }: CProps) => {
   const {interval, values} = chunk;
 
@@ -151,6 +170,7 @@ const LineChunk = ({
           DCOffset={withDCOffset}
           numChannels={numChannels}
           numChunks={numChunks}
+          previousPoint={previousPoint}
         />
       </Group>
     </Group>

modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/SeriesRenderer.tsx

@@ -623,7 +623,8 @@ const SeriesRenderer: FunctionComponent<CProps> = ({
           />
         </clipPath>
 
-        {channelList.map((channel, i) => {
+        {
+          channelList.map((channel, i) => {
           if (!channelMetadata[channel.index]) {
             return null;
           }
@@ -733,12 +734,12 @@ const SeriesRenderer: FunctionComponent<CProps> = ({
                 : 0;
 
               return (
-                trace.chunks.map((chunk, k) => (
+                trace.chunks.map((chunk, k, chunks) => (
                     <LineChunk
                       channelIndex={channel.index}
                       traceIndex={j}
                       chunkIndex={k}
-                      key={`${k}-${trace.chunks.length}`}
+                      key={`${channel.index}-${k}-${trace.chunks.length}`}
                       chunk={chunk}
                       seriesRange={seriesRange}
                       amplitudeScale={amplitudeScale}
@@ -749,6 +750,11 @@ const SeriesRenderer: FunctionComponent<CProps> = ({
                       withDCOffset={DCOffset}
                       numChannels={numDisplayedChannels}
                       numChunks={numChunks}
+                      previousPoint={
+                        k === 0
+                          ? null
+                          : chunks[k - 1].values.slice(-1)[0]
+                      }
                     />
                 ))
               );