improve commits performance

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "dnaVersion": "0.11.0",
   "scripts": {
     "start": "vite --clearScreen false",

ui/src/CommitItem.svelte

@@ -2,27 +2,30 @@
   import { type AsyncReadable } from "@holochain-open-dev/stores";
   import { EntryRecord } from "@holochain-open-dev/utils";
   import { type Commit } from "@holochain-syn/core";
-  import { getContext } from "svelte";
+  import { createEventDispatcher, getContext } from "svelte";
   import type { KanDoStore } from "./stores/kando";
   import Avatar from "./Avatar.svelte";
   import { stateFromCommit } from "@holochain-syn/core";
   import {
     decodeHashFromBase64,
-    encodeHashToBase64,
-    type ActionHash,
   } from "@holochain/client";
-  import { hashEqual } from "./utils/util";
-  import { _getCard } from "./board";
+  import { _getCard, type BoardState } from "./board";
   import { exportBoard } from "./export";
   import SvgIcon from "./SvgIcon.svelte";
   import '@shoelace-style/shoelace/dist/components/button/button.js';
+  const dispatch = createEventDispatcher()
 
   const { getStore }: any = getContext("store");
   let store: KanDoStore = getStore();
 
   export let commit: AsyncReadable<EntryRecord<Commit>>;
   $: commitEntry = commit;
-  let showCommit = {};
+  export let showCommit = false;
+
+  const getState = (entry: EntryRecord<Commit>): BoardState => {
+    const state = stateFromCommit(entry.entry) as BoardState
+    return state
+  }
 </script>
 
 {#if $commitEntry.status == "pending"}
@@ -31,19 +34,16 @@
   err:{$commitEntry.error}
 {:else if $commitEntry.status == "complete"}
   {@const entry = $commitEntry.value}
-  {@const state = stateFromCommit(entry.entry)}
   <div
     class="commit"
-    on:click={() => {
-      const h = encodeHashToBase64(entry.actionHash);
-      if (!showCommit[h]) showCommit[h] = true;
-      else showCommit[h] = undefined;
-    }}
+    on:click={() => dispatch("toggle-commit")}
   >
 
     <Avatar size={20} agentPubKey={entry.action.author} />
     {store.timeAgo.format(new Date(entry.action.timestamp))}
-    {#if showCommit[encodeHashToBase64(entry.actionHash)]}
+    {#if showCommit}
+      {@const state = getState(entry)}
+
     <sl-button size="small" title="Export"
     on:click={(e) => {
       e.stopPropagation()

ui/src/KanDoPane.svelte

@@ -21,7 +21,7 @@
   } from "./board";
   import EditBoardDialog from "./EditBoardDialog.svelte";
   import Avatar from "./Avatar.svelte";
-  import { decodeHashFromBase64, type Timestamp } from "@holochain/client";
+  import { type ActionHash, decodeHashFromBase64, encodeHashToBase64, type Timestamp } from "@holochain/client";
   import { cloneDeep, isEqual } from "lodash";
   import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
   import "@shoelace-style/shoelace/dist/components/textarea/textarea.js";
@@ -37,6 +37,7 @@
   import DisableForOs from "./DisableForOs.svelte";
   import FeedElement from "./FeedElement.svelte";
   import CommitItem from "./CommitItem.svelte";
+  import { HoloHashMap } from "@holochain-open-dev/utils";
 
   onMount(async () => {
     onVisible(columnNameElem, () => {
@@ -478,6 +479,8 @@
   }
 
   let rightPane = RightPane.None;
+
+  let showCommits = {}
 </script>
 
 <div class="background">
@@ -698,8 +701,17 @@
           {#if $commits.status=="complete"}
             <div class="commit-items">
               {#each Array.from($commits.value.entries()).reverse() as [commitHash,commit]}
-                <CommitItem 
-                  commit={commit}></CommitItem>
+                {@const commitHashB64=encodeHashToBase64(commitHash)}
+                <CommitItem showCommit={showCommits[commitHashB64]}
+                on:toggle-commit = {()=>{
+                  if (showCommits[commitHashB64]) {
+                    showCommits[commitHashB64] = false
+                  } else {
+                    showCommits[commitHashB64] = true
+                  }
+                }}
+                  commit={commit}>
+                </CommitItem>
               {/each}
             </div>
           {/if}