timeline, dimensions: fixed adjusting timeline to current grid dimensions

src/components/Timeline/Timeline.jsx

@@ -9,10 +9,19 @@ export const Timeline = (props) => {
     const { t, i18n } = useTranslation();
 
     const classes = useStyles();
+    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);
 
+    useEffect( () => {
+        let currentDimensions = getDimensions("timelineContainer");
+        if (currentDimensions&&currentDimensions.width!==dimensions?.width)
+            setDimensions(currentDimensions);
+        console.log("state dimensions", dimensions)
+
+    }, []);
+
     return (
         <>
             <Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
@@ -22,7 +31,7 @@ export const Timeline = (props) => {
             </Grid>
             <Grid id="timelineContainer" className={classes.dashboardTileContent} item container direction="column" spacing={2}>
                 <Grid item>
-                    <TimelineChart filteredTimelineData={filteredTimelineData} dimensions={getDimensions("timelineContainer")} />
+                    <TimelineChart filteredTimelineData={filteredTimelineData} dimensions={dimensions/*getDimensions("timelineContainer")*/} />
                 </Grid>
             </Grid>
         </>

src/components/Timeline/TimelineChart.jsx

 import React, {useEffect, useRef, useState} from "react";
-import { Card, Grid } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 import { useStyles } from "../../styles";
 import { select, scaleBand, axisBottom, scaleLinear, zoom } from "d3";
-//import {select, scaleBand, axisBottom, axisLeft, scaleLinear, max, min, ascending, descending} from "d3";
 import {getTimeRangeOfTimelineData, newGroupByPeriods} from "../../utils";
 
 export const TimelineChart = (props) => {
@@ -24,16 +22,6 @@ export const TimelineChart = (props) => {
     //console.log(timelineObjectsData);
     console.log("filteredTimelineData: ", props.filteredTimelineData);
 
-    /*useEffect( () => {
-        if (filteredTimelineData) {
-            setData(newGroupByPeriods(filteredTimelineData));
-            //data&&data.size>0&&console.log([...data.values()].sort( (a,b) => a.periodSpan?.[0]-b.periodSpan?.[0] ));
-        }
-        //const byPeriodData = newGroupByPeriods(filteredTimelineData)
-
-        }, [props.filteredTimelineData]
-    )*/
-
     //setting up the svg after first render
     useEffect(() => {
         console.log("width", width)
@@ -47,15 +35,16 @@ export const TimelineChart = (props) => {
 
     //draw timeline everytime filteredTimelineData changes
     useEffect( () => {
-        console.log("dims: ",props.dimensions.height)
-        if(props.filteredTimelineData&&props.dimensions.width)
-        drawTimeline(timelineData)
-    }, [props.filteredTimelineData] );
+        /*console.log("dims: ",props.dimensions.height)
+        if(props.filteredTimelineData&&props.dimensions.width)*/
+        drawTimeline(timelineData, props.dimensions)
+    }, [props.filteredTimelineData, props.dimensions] );
 
 //todo: still depending on outer scope for height, width, margin
-    const drawTimeline = (timelineConfig) => {
+    const drawTimeline = (timelineConfig, dimensions) => {
 
         const { data, svgRef, xDomain } = timelineConfig;
+        const { width, height } = dimensions;
         const svg = select(svgRef.current);
 
         if(!data||data.size===0) {
@@ -65,9 +54,8 @@ export const TimelineChart = (props) => {
         }
         //console.log([...data.values()]);
 
-
         const selection = svg.select(".timelineGroup").selectAll("rect").data([...data.values()], data => data.periodId);
-        console.log("initial selection", selection);
+        //console.log("initial selection", selection);
         const selectionLabels = svg.select(".timelineGroup").selectAll(".label").data([...data.values()], data => data.periodId);
         const periodIds = [...data.keys()];
 
@@ -141,6 +129,10 @@ export const TimelineChart = (props) => {
         console.log("selection - ", selection)
     }
 
+    const updateTimeline = () => {
+
+    }
+
     /*
     useEffect(() => {