Building the Google Timer

// @type {Object.<string, NodeJS.Timeout>}
let intentionIntervalIDs = {};

//@type {Object.<string, number>}
let intentionDurations = {};

// @function onMessage
// @param {MessageEvent<SetTimerDuration | StartTimer | StopTimer | ResetTimer>} e
function onMessage(e) {
        const {
                data: { action, packet },
        } = e;
        // handle message action
        switch (action) {
        case "setTimerDuration":
                intentionDurations[packet.intention] = packet.duration;
                break;
        case "startTimer":
        // create interval to invoke a callback every second; in the callback, decrement duration by one
        // and signal the tab thread via postMessage to update its duration state
                const intervalID = setInterval(() => {
                        const nextDuration = intentionDurations[packet.intention] - 1;
                        intentionDurations[packet.intention] = nextDuration;
                        self.postMessage({
                                intention: packet.intention,
                                duration: nextDuration,
                        });
                        if (!nextDuration) {
                                clearInterval(intentionIntervalIDs[packet.intention]);
                        }
                }, 1000);
                intentionIntervalIDs[packet.intention] = intervalID;
                break;
        case "stopTimer":
                clearInterval(intentionIntervalIDs[packet.intention]);
                break;
        case "resetTimer":
                clearInterval(intentionIntervalIDs[packet.intention]);
                intentionDurations[packet.intention] = packet.duration;
                break;
        }
}
self.onmessage = onMessage;

// State to hold reference to Web Worker            
const [worker, setWorker] = useState(null);

useEffect(() => {
        // Create a new Web Worker
        const myWorker = new Worker('worker.js');

        // Save the worker instance to state
        setWorker(myWorker);

        // Clean up the worker when the component unmounts
        return () => {
                myWorker.terminate();
        };
}, []); // Run this effect only once, when the component mounts

useEffect(() => {
    function onWorkerMessage(e: MessageEvent) {
    // When the timer card receives a message from the Web Worker, 
    // it checks to see if the intention in the data matches it's intention, and if it does, updates its duration state.
      if (e.data.intention === intention) {
        setActiveDuration(e.data.duration);
      }
    }
    worker.addEventListener("message", onWorkerMessage);
    return () => {
      worker.removeEventListener("message", onWorkerMessage);
    };
  }, [worker, intention]);

function makeBarsOutput(
  // PomodorosForDate is a map of date to Pomodoro, which is an object with properties id, seconds (length of interval), and intention
  pomodorosForDates: PomodorosForDate,
  allLabels: { [key: string]: string }
) {
  const mapFn = ([timeUnit, pomodoros]: [string, PomodorosForHour]) => {
    if (!pomodoros.length) return { timeUnit };
    // Helper function to add up all seconds associated with an intention
    const rects = rollup(pomodoros, timeUnit);
    // Index the data based on date and intention - this way d3 knows how to build the pieces of the stacked bar
    const dateIndex = index(
      rects,
      (r) => r.date,
      (r) => r.label
    );
    // Make a set of labels
    const labels = union(
      pomodorosForDates[timeUnit].map((d) => {
        allLabels[d.label] = d.label;
        return d.label;
      })
    );
    // d3 magic function that builds the pieces of the stacked bar
    const series = stack()
      .keys(labels)
      // @ts-ignore
      .value(([, group], key) => group.get(key).seconds)(dateIndex);
    const barHeight = series?.[series.length - 1]?.[0]?.[1];

    return {
      rects,
      dateIndex,
      series,
      barHeight,
      timeUnit,
    };
  };
  const bars = Object.entries(pomodorosForDates).map(mapFn);
  return { bars, allLabels: Object.keys(allLabels) };
}

// imagine this map is contained in an SVG element 
{bars.bars.map((b, i) => {
  if (!b.barHeight) return <Box component="g" key={b.timeUnit} />;
  const { series, timeUnit } = b;
  const barHeight = series[series.length - 1][0][1];
  return (
    <Box
      component="g"
      key={timeUnit}
      transform={"translate(x(Number(timeUnit))}, 
        svgHeight - y(barHeight) - marginBottom
      })"}
    >
      {series.map((d, i) => {
        const element = d[0];
        return (
          <Tooltip
            key={d.key}
            title={
              <>
                {d.key} {renderActiveTimer(element[1] - element[0])}
              </>
            }
            placement="right"
            arrow
          >
            <Box
              component="rect"
              height={y(element[1]) - y(element[0])}px
              y={y(element[0])}
              width={bands.bandwidth()}
              id={d.key}
              fill={colorInterpolator(d.key) as string}
            />
          </Tooltip>
        );
      })}
    </Box>
  );
})}