Fixed bugs

holochain-open-dev · Nov 7, 2023 · c03f6a9 · c03f6a9
1 parent 3da1e1a
commit c03f6a9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git a/packages/stores/demo/index.html b/packages/stores/demo/index.html
@@ -40,7 +40,10 @@
       class A {
         constructor() {
           this.m = new Map();
-          this.m.set("klj", 0);
+          this.m.set(
+            new Uint8Array([4, 42, 2, 4, 2, 4, 2, 23, 3, 4, 4, 55, 6]),
+            0
+          );
         }
       }
 

diff --git a/packages/stores/package.json b/packages/stores/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@holochain-open-dev/stores",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "description": "Re-export of svelte/store, with additional utilities to build reusable holochain-open-dev modules",
   "author": "[email protected]",
   "main": "dist/index.js",

diff --git a/packages/stores/src/elements/visualize-store-tree.ts b/packages/stores/src/elements/visualize-store-tree.ts
@@ -7,6 +7,7 @@ import cloneDeepWith from "lodash-es/cloneDeepWith.js";
 import "@scoped-elements/cytoscape";
 import { EdgeDefinition, NodeDefinition } from "cytoscape";
 import { encodeHashToBase64 } from "@holochain/client";
+import "@shoelace-style/shoelace/dist/components/relative-time/relative-time.js";
 
 import { Derived } from "../derived.js";
 import { deriveStore } from "../async-derived.js";
@@ -33,14 +34,15 @@ function getObjectId(object: any): number {
 
 export function buildAndJoinTree(
   store: Readable<any>
-): Readable<TreeNode<{ id: number; value: any }>> {
+): Readable<TreeNode<{ id: number; value: any; lastUpdated: number }>> {
   return deriveStore(store, (value) => {
     const deps = (store as Derived<any>).derivedFrom || [];
     const childStores = deps.map((c) => buildAndJoinTree(c));
     return derived(childStores, (children) => ({
       node: {
         id: getObjectId(store),
         value,
+        lastUpdated: Date.now(),
       },
       children,
     }));
@@ -90,21 +92,21 @@ export function valueTreeToElements(
       data: {
         id: `${valueTree.node.id.toString()}-content`,
         parent: valueTree.node.id.toString(),
-        label,
+        label: label.toString().slice(0, 20),
       },
     }
   );
 
   return elements;
 }
 
-export function findValueInTree(
-  tree: TreeNode<{ id: number; value: any }>,
+export function findNodeInTree(
+  tree: TreeNode<{ id: number; value: any; lastUpdated: number }>,
   id: number
-): any {
-  if (tree.node.id === id) return tree.node.value;
+): { id: number; value: any; lastUpdated: number } {
+  if (tree.node.id === id) return tree.node;
   for (const c of tree.children) {
-    const value = findValueInTree(c, id);
+    const value = findNodeInTree(c, id);
     if (value) {
       return value;
     }
@@ -129,7 +131,7 @@ export class VisualizeStoreTree extends LitElement {
 
   get selectedValue() {
     return cloneDeepWith(
-      findValueInTree(this._subscriber.value, this.selectedStore),
+      findNodeInTree(this._subscriber.value, this.selectedStore).value,
       (value) => {
         if (value instanceof Map) {
           return Object.fromEntries(value);
@@ -199,10 +201,25 @@ node > node {
         <div class="row" style="flex-basis: 300px">
           ${this.selectedStore
             ? html`
-                <json-viewer
-                  .data=${this.selectedValue}
-                  style="flex: 1;"
-                ></json-viewer>
+                <div
+                  style="display: flex; flex-direction: column; flex: 1; gap: 16px"
+                >
+                  <json-viewer
+                    style="flex: 1"
+                    .data=${this.selectedValue}
+                  ></json-viewer>
+                  <div style="display: flex; flex-direction: row;">
+                    <span>Last updated: </span>
+                    <sl-relative-time
+                      .date=${new Date(
+                        findNodeInTree(
+                          this._subscriber.value,
+                          this.selectedStore
+                        ).lastUpdated
+                      )}
+                    ></sl-relative-time>
+                  </div>
+                </div>
               `
             : html`
                 <span style="align-self: center"

diff --git a/packages/stores/src/holochain.ts b/packages/stores/src/holochain.ts
@@ -133,7 +133,7 @@ export function latestVersionOfEntryStore<
     const fetch = async () => {
       try {
         const nlatestVersion = await fetchLatestVersion();
-        if (latestVersion) {
+        if (nlatestVersion) {
           if (!isEqual(latestVersion, nlatestVersion)) {
             latestVersion = nlatestVersion;
             set({
@@ -155,7 +155,7 @@ export function latestVersionOfEntryStore<
       }
     };
     fetch();
-    const interval = setInterval(() => fetchLatestVersion(), 4000);
+    const interval = setInterval(() => fetch(), 4000);
     const unsubs = client.onSignal(async (signal) => {
       if (
         signal.type === "EntryUpdated" &&
@@ -275,7 +275,7 @@ export function deletesForEntryStore<S extends ActionCommittedSignal<any, any>>(
       }
     };
     await fetch();
-    const interval = setInterval(() => fetchDeletes(), 4000);
+    const interval = setInterval(() => fetch(), 4000);
     const unsubs = client.onSignal(async (signal) => {
       if (
         signal.type === "EntryDeleted" &&