timeline: sorting data by period begin

src/components/Timeline/Timeline.jsx

@@ -12,7 +12,9 @@ export const Timeline = (props) => {
     const [dimensions, setDimensions] = useState({width: 0, height: 0, margin: {top: 0, right: 0, left: 0, bottom: 0}});
 
     const { timelineObjectsData } = props;
-    const filteredTimelineData = timelineObjectsData&&timelineObjectsData.filter( datapoint => datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);
+    const filteredTimelineData = timelineObjectsData&&timelineObjectsData
+        .filter( datapoint =>
+            datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);
 
     useEffect( () => {
         let currentDimensions = getDimensions("timelineContainer");

src/components/Timeline/TimelineChart.jsx

@@ -14,12 +14,16 @@ export const TimelineChart = (props) => {
     //const filteredTimelineData = props.filteredTimelineData;
     console.log("dimensions", props.dimensions)
     const xDomain = getTimeRangeOfTimelineData(props.filteredTimelineData,"period");
-    const data = newGroupByPeriods(props.filteredTimelineData);
+    const dataUnsorted = newGroupByPeriods(props.filteredTimelineData);
+    const data = dataUnsorted && new Map([...dataUnsorted.entries()]
+        .sort( (a,b) =>
+            a[1].periodSpan[0] - b[1].periodSpan[0] ));
 
     const timelineData = { xDomain, data, svgRef };
 
-    //console.log(timelineObjectsData);
-    console.log("filteredTimelineData: ", props.filteredTimelineData);
+    //console.log("filteredTimelineData: ", props.filteredTimelineData);
+    //console.log("grouped by periods: ", data)
+    //console.log("sorted data: ", dataUnsorted)
 
     //setting up the svg after first render
     useEffect(() => {