Merge pull request #136 from GNS-Science/fix/timedimension-sort-reset

time dimension resets when sorting geojson;

src/LeafletMap/LeafletMap.stories.tsx

@@ -282,3 +282,75 @@ export const FaultModelWithTimeDimensionTest = () => {
     </>
   );
 };
+
+export const FaultModelWithTimeDimensionTest2 = () => {
+  const [fullscreen, setFullscreen] = useState<boolean>(false);
+  const [needsMore, setNeedsMore] = useState<boolean>(false);
+  const [hasNoMore, setHasNoMore] = useState<boolean>(false);
+  const [zoomLevel, setZoomLevel] = useState<number>(5);
+  const [totalRuptures, setTotalRuptures] = useState<number>(88);
+  const [ruptureDataArray, setRuptureDataArray] = useState<GeoJsonObject[]>(ruptureArray as GeoJsonObject[]);
+
+  const timeArray = useMemo(() => {
+    return (
+      totalRuptures &&
+      Array(totalRuptures)
+        .fill(0)
+        .map((_, i) => i + 1)
+    );
+  }, [totalRuptures]);
+
+  const zoom = 5;
+  const nzCentre = [-40.946, 174.167];
+  const currentTime = new Date();
+  currentTime.setUTCDate(1);
+  const timeDimensionOptions = {
+    currentTime: 1,
+    times: timeArray || [],
+    timeInterval: 'P1M/2021-01-01T00:00:00Z/P1M',
+    period: 'P1D',
+  };
+
+  const timeDimensionControlOptions = {
+    displayDate: false,
+    maxSpeed: 5,
+    minSpeed: 1,
+    playerOptions: {
+      loop: true,
+    },
+  };
+
+  const reverseRuptureDataArray = () => {
+    const reversedArray = [];
+    for (let i = ruptureDataArray.length - 1; i >= 0; i--) {
+      reversedArray.push(ruptureDataArray[i]);
+    }
+    setRuptureDataArray(reversedArray);
+  };
+
+  return (
+    <>
+      <LeafletMap
+        zoom={zoom}
+        nzCentre={nzCentre as LatLngExpression}
+        geoJsonData={[]}
+        height={'700px'}
+        width={'100%'}
+        setFullscreen={setFullscreen}
+        cov={true}
+        zoomLevel={zoomLevel}
+        setZoomLevel={setZoomLevel}
+        timeDimensionOptions={timeDimensionOptions}
+        timeDimensionControlOptions={timeDimensionControlOptions}
+        timeDimension={true}
+        timeDimensionGeoJsonData={ruptureDataArray}
+        timeDimensionUnderlay={surfaceBaseLayer as GeoJsonObject}
+        setTimeDimensionNeedsMore={setNeedsMore}
+        setTimeDimensionHasNoMore={setHasNoMore}
+        surfaceProperties={ruptureProperties || []}
+        timeDimensionTotalLength={totalRuptures || 0}
+      />
+      <button onClick={() => reverseRuptureDataArray()}>reverse order</button>
+    </>
+  );
+};

src/LeafletMap/LeafletMap.tsx

@@ -246,7 +246,7 @@ const TimeDimensionLayer: React.FC<TimeDimensionLayerProps> = (props: TimeDimens
       setTimeIndex(data.target._currentTimeIndex);
     }
   });
-  (map as any).timeDimension.on('availabletimeschanged', (data: any) => {
+  (map as any).timeDimension.on('availabletimeschanged', () => {
     (map as any).timeDimension.setCurrentTime(0);
     setTimeIndex(0);
     (map as any).timeDimensionControl._player.stop();
@@ -282,15 +282,17 @@ const TimeDimensionLayer: React.FC<TimeDimensionLayerProps> = (props: TimeDimens
   }, [timeIndex, geoJsonData, setTimeDimensionHasNoMore, map, setTimeDimensionNeedsMore, timeDimensionTotalLength]);
 
   const surfaceId = useMemo(() => (currentSurface as any)?.features[0]?.id, [currentSurface]);
+  const firstId = useMemo(() => (geoJsonData[0] as any)?.features[0]?.id, [geoJsonData]);
 
   const timeArray = useMemo(() => {
     return (
       timeDimensionTotalLength &&
+      firstId &&
       Array(timeDimensionTotalLength)
         .fill(0)
-        .map((_, i) => i + 1)
+        .map((_, i) => i + 1 + Math.random() / 10)
     );
-  }, [timeDimensionTotalLength]);
+  }, [timeDimensionTotalLength, firstId]);
 
   useEffect(() => {
     if (timeArray && timeArray.length > 0) {