with recoil. Feels wrong

Author: David Buezas

src/Card.tsx

@@ -4,9 +4,16 @@ import { HomeAssistant } from "custom-card-helpers"; // This is a community main
 import * as themes from "./themes";
 import StyleHack from "./StyleHack";
 import merge from "lodash-es/merge";
-import { useData, useWidth } from "./hooks";
+import { dataAtom, useWidth, isLoadingAtom, rangeAtom } from "./hooks";
 import { Config, DateRange } from "./types";
 import sub from "date-fns/sub";
+import {
+  atom,
+  useRecoilState,
+  useRecoilValue,
+  useSetRecoilState,
+} from "recoil";
+import { WithCache } from "./cache";
 
 declare module "preact/src/jsx" {
   namespace JSXInternal {
@@ -34,15 +41,35 @@ type Props = {
   hass?: HomeAssistant;
   config: Config;
 };
+
+export const EntitiesAtom = atom<Config["entities"]>({
+  key: "ConfigEntitiesAtom",
+  default: [],
+});
+export const HassAtom = atom<HomeAssistant | undefined>({
+  key: "HassAtom",
+  default: undefined,
+  dangerouslyAllowMutability: true,
+});
+
 const Plotter = ({ config, hass }: Props) => {
+  config = JSON.parse(JSON.stringify(config));
+  const [entities, setEntities] = useRecoilState(EntitiesAtom);
+  if (JSON.stringify(config.entities) !== JSON.stringify(entities))
+    setEntities(config.entities);
+  const [storedHass, setStoredHass] = useRecoilState(HassAtom);
+  if (!storedHass && hass) setStoredHass(hass);
+
   const layoutRef = useRef<Partial<Plotly.Layout>>({});
   const container = useRef<HTMLDivElement>(null);
   const width = useWidth(container.current);
-  const [range, setRange] = useState<DateRange>(() => {
+  const [range, setRange] = useRecoilState(rangeAtom);
+  useEffect(() => {
     const minutes = Number(config.hours_to_show) * 60; // if add hours is used, decimals are ignored
-    return [sub(new Date(), { minutes }), new Date()];
-  });
-  const { data, isLoading } = useData(hass, config, range);
+    setRange([sub(new Date(), { minutes }), new Date()]);
+  }, []);
+  const isLoading = useRecoilValue(isLoadingAtom);
+  const data = useRecoilValue(dataAtom);
   const resetRange = useCallback(() => {
     const minutes = Number(config.hours_to_show) * 60; // if add hours is used, decimals are ignored
     setRange([sub(new Date(), { minutes }), new Date()]);
@@ -60,7 +87,6 @@ const Plotter = ({ config, hass }: Props) => {
   useEffect(() => {
     if (!container.current || width === 0) return;
     const element = container.current;
-    console.log("layoutRef.current", layoutRef.current);
     layoutRef.current = merge(
       extractRanges(layoutRef.current),
       themes[config.theme!] || themes.dark,
@@ -87,7 +113,6 @@ const Plotter = ({ config, hass }: Props) => {
         resetRange();
       }
       if (eventdata["xaxis.range[0]"]) {
-        console.log("layout event");
         setRange([
           new Date(eventdata["xaxis.range[0]"]),
           new Date(eventdata["xaxis.range[1]"]),
@@ -110,13 +135,14 @@ const Plotter = ({ config, hass }: Props) => {
     try {
       Plotly.relayout(container.current, {
         // 'yaxis.range': TODO:
-        "xaxis.range": range,
+        "xaxis.range": range.slice(),
       });
     } catch (e) {}
   }, [range, container.current]);
   return (
     <ha-card>
       <StyleHack />
+      <WithCache />
       <div ref={container}></div>
     </ha-card>
   );

src/cache.ts

@@ -0,0 +1,113 @@
+import { memo, useEffect, useRef } from "preact/compat";
+
+import { atom, useRecoilValue, useSetRecoilState } from "recoil";
+import { EntitiesAtom, HassAtom } from "./Card";
+import { compactRanges, subtractRanges } from "./date-ranges";
+import { rangeAtom } from "./hooks";
+import { DateRange, History } from "./types";
+
+export type Cache = {
+  ranges: DateRange[];
+  histories: Record<string, History>;
+};
+
+export const cacheAtom = atom<Cache>({
+  key: "cacheAtom",
+  default: {
+    ranges: [],
+    histories: {},
+  },
+});
+
+// @todo: implement with recoil snapshots or st.
+export const WithCache = memo(() => {
+  const range = useRecoilValue(rangeAtom);
+  const entities = useRecoilValue(EntitiesAtom);
+  const hass = useRecoilValue(HassAtom);
+  let setCache = useSetRecoilState(cacheAtom);
+  const promise = useRef(Promise.resolve());
+  const updatedData = useRef({ range, entities });
+  updatedData.current = { range, entities };
+  const lastCacheRef = useRef<Cache>({
+    // @TODO: find way to avoid this hack that solves the cyclic dependency
+    ranges: [],
+    histories: {},
+  });
+
+  useEffect(() => {
+    if (!hass) return;
+    console.log("fetchiing");
+    const fetch = async () => {
+      const { range, entities } = updatedData.current;
+      const entityNames = entities.map(({ entity }) => entity) || [];
+      let cache = lastCacheRef.current;
+      if (
+        JSON.stringify(Object.keys(cache.histories)) !=
+        JSON.stringify(entityNames)
+      ) {
+        // entity names changed, clear cache
+        cache = {
+          ranges: [],
+          histories: {},
+        };
+      }
+      const rangesToFetch = subtractRanges([range], cache.ranges);
+      const fetchedHistories = await Promise.all(
+        rangesToFetch.map(async ([start, end]) => {
+          const uri =
+            `history/period/${start.toISOString()}?` +
+            `filter_entity_id=${entityNames}&` +
+            `significant_changes_only=1&` +
+            `minimal_response&end_time=${end.toISOString()}`;
+          const r: History[] = (await hass.callApi("GET", uri)) || [];
+          // @TODO: hass doesn't return an empty array for empty histories, so data is out of order!!!!
+          console.log("added:", r[0]?.length);
+          console.log(
+            start.toTimeString().split(" ")[0] +
+              "-" +
+              end.toTimeString().split(" ")[0]
+          );
+          return r.map((history) =>
+            history?.map((entry) => ({
+              ...entry,
+              last_changed: new Date(entry.last_changed),
+            }))
+          );
+        })
+      );
+
+      const histories: Cache["histories"] = {};
+      entityNames.forEach((name, i) => {
+        histories[name] = cache.histories[name]?.slice() || [];
+        for (const history of fetchedHistories) {
+          history[i] = history[i] || [];
+          histories[name] = [...histories[name], ...history[i]];
+        }
+      });
+      let lastKnwonTimestamp = 0;
+      entityNames.forEach((name) => {
+        histories[name].sort(
+          (a, b) => a.last_changed.getTime() - b.last_changed.getTime()
+        );
+        const timestamp = +histories[name].slice(-1)[0].last_changed + 1;
+        lastKnwonTimestamp = Math.max(lastKnwonTimestamp, timestamp);
+      });
+
+      let ranges = [...cache.ranges, ...rangesToFetch];
+      var MAX_TIMESTAMP = 8640000000000000;
+      ranges = subtractRanges(ranges, [
+        [new Date(lastKnwonTimestamp), new Date(MAX_TIMESTAMP)],
+      ]);
+
+      const newCache = {
+        ranges: compactRanges(ranges),
+        histories,
+        entityNames,
+      };
+      lastCacheRef.current = newCache;
+      setCache(newCache);
+    };
+    promise.current = promise.current.then(fetch);
+  }, [{}]);
+  return <></>;
+});

src/cache.tsx

@@ -1,52 +1,38 @@
-import { useEffect, useRef, useState } from "preact/hooks";
-import { HomeAssistant } from "custom-card-helpers"; // This is a community maintained npm module with common helper functions/types. https://github.com/custom-cards/custom-card-helpers
-import { Config, DateRange } from "./types";
-import { Cache, addToCache } from "./cache";
+import { useEffect, useState } from "preact/hooks";
+import { DateRange } from "./types";
+import { cacheAtom } from "./cache";
 
-const useHistory = (
-  hass: HomeAssistant | undefined,
-  config: Config,
-  range: DateRange
-) => {
-  const [cache, setCache] = useState<Cache>({
-    ranges: [],
-    histories: {},
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  const entityNames = config.entities?.map(({ entity }) => entity) || [];
-  useEffect(() => {
-    if (!hass) return;
-    const fetch = async () => {
-      setIsLoading(true);
-      setCache(await addToCache(cache, range, hass, entityNames));
-      setIsLoading(false);
-    };
-    fetch();
-  }, [!!hass, range, entityNames.toString()]);
-  return { history: cache.histories, isLoading };
-};
+import { atom, selector } from "recoil";
+import { EntitiesAtom } from "./Card";
 
-export const useData = (
-  hass: HomeAssistant | undefined,
-  config: Config,
-  range: DateRange
-) => {
-  const { history, isLoading } = useHistory(hass, config, range);
-  const [data, setData] = useState<Plotly.Data[]>([]);
-  useEffect(() => {
-    const data: Plotly.Data[] = config.entities.map((trace) => {
+export const isLoadingAtom = atom({
+  key: "isLoadingAtom",
+  default: false,
+});
+
+export const rangeAtom = atom<DateRange>({
+  key: "rangeAtom",
+  default: [new Date(), new Date()],
+});
+
+export const dataAtom = selector<Plotly.Data[]>({
+  key: "dataAtom",
+  get: ({ get }) => {
+    const entities = get(EntitiesAtom);
+    const { histories } = get(cacheAtom);
+
+    const data: Plotly.Data[] = entities.map((trace) => {
       const name = trace.entity;
       return {
         name,
         ...trace,
-        x: history[name]?.map(({ last_changed }) => last_changed),
-        y: history[name]?.map(({ state }) => state),
+        x: histories[name]?.map(({ last_changed }) => last_changed),
+        y: histories[name]?.map(({ state }) => state),
       };
     });
-    setData(data);
-  }, [history, JSON.stringify(config.entities)]);
-  return { data, isLoading };
-};
+    return data;
+  },
+});
 
 export const useWidth = (element: HTMLDivElement | null) => {
   const [width, setWidth] = useState(0);

src/hooks.ts

@@ -11,7 +11,7 @@ function App(props) {
   );
 }
 
-register(Card, "plotly-graph", ["config", "hass"]);
+register(App, "plotly-graph", ["config", "hass"]);
 
 console.info(
   `%c PLOTLY-GRAPH-CARD %c ${version} `,