improve UX for things

dnas/ziptest/zomes/coordinator/ziptest/src/utils.rs

@@ -7,6 +7,55 @@ pub fn create_link_relaxed<T, E>(
     tag: impl Into<LinkTag>
 )  -> ExternResult<ActionHash>
 where 
+ScopedLinkType: TryFrom<T, Error = E>,
+    WasmError: From<E>,
+{
+    let ScopedLinkType {
+        zome_index,
+        zome_type: link_type,
+    } = link_type.try_into()?;
+    HDK.with(|h| {
+        h.borrow().create_link(CreateLinkInput::new(
+            base_address.into(),
+            target_address.into(),
+            zome_index,
+            link_type,
+            tag.into(),
+            ChainTopOrdering::Relaxed,
+        ))
+    })
+}
+
+// pub fn create_entry_relaxed<I, E, E2>(input: I) -> ExternResult<ActionHash>
+// where
+//     ScopedEntryDefIndex: for<'a> TryFrom<&'a I, Error = E2>,
+//     EntryVisibility: for<'a> From<&'a I>,
+//     Entry: TryFrom<I, Error = E>,
+//     WasmError: From<E> + From<E2>,
+// {
+//     let ScopedEntryDefIndex {
+//         zome_index,
+//         zome_type: entry_def_index,
+//     } = (&input).try_into()?;
+//     let i = CreateInput {
+//         entry_location: EntryDefLocation::app(zome_index, entry_def_index),
+//         entry_visibility:EntryVisibility::Public,
+//         entry: input.try_into()?,
+//         chain_top_ordering:ChainTopOrdering::Relaxed,
+//     };
+//     HDK.with(|h| {
+//         h.borrow().create(i
+//         )
+//     })
+// }
+
+pub fn create_entryrelaxed<T, E>(
+    base_address: impl Into<AnyLinkableHash>,
+    target_address: impl Into<AnyLinkableHash>,
+    link_type: T,
+    tag: impl Into<LinkTag>
+)  -> ExternResult<ActionHash>
+where 
 ScopedLinkType: TryFrom<T, Error = E>,
     WasmError: From<E>,
 {

ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui",
-  "version": "0.0.3",
-  "dnaVersion": "0.0.1",
+  "version": "0.0.4",
+  "dnaVersion": "0.0.2",
   "scripts": {
     "start": "vite --clearScreen false --port $UI_PORT",
     "build": "vite build",

ui/src/Bunch.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
-  import { createEventDispatcher, getContext, onDestroy, onMount } from "svelte";
+  import {
+    createEventDispatcher,
+    getContext,
+    onDestroy,
+    onMount,
+  } from "svelte";
   import type { ZipTestStore } from "./store";
-  import type { EntryHash } from "@holochain/client";
+  import type { encodeHashToBase64, EntryHash } from "@holochain/client";
   import "@shoelace-style/shoelace/dist/components/skeleton/skeleton.js";
+  import { init } from "svelte/internal";
+  import { hashEqual } from "./util";
 
   const dispatch = createEventDispatcher();
   const { getStore }: any = getContext("store");
@@ -11,87 +18,161 @@
   export let bunchHash: EntryHash;
   export let bunch: string;
 
-    type Moment = {
-        count: number,
-        date: Date,
-    }
+  type Moment = {
+    count: number;
+    date: Date;
+  };
+
+  let creatingThings = false;
+  let creatingCount = 0;
+
+  const createThings = async () => {
+    setTimeout(async () => {
+      await store.client.createThing(
+        bunch,
+        bunchContent.reps,
+        `${creatingCount}`,
+        undefined
+      );
+      creatingCount += 1;
+      if (creatingCount < bunchContent.count) {
+        createThings();
+      }
+    }, bunchContent.delay);
+  };
 
-  let bunchRecord
-  let bunchContent
+  let bunchRecord;
+  let bunchContent;
 
-  const GRAPH_HEIGHT = 200
-  let start
-  let unit = 10
-  let expected = 0
-  let moments = []
-  let allFound = false
-  let seconds = 0
+  const GRAPH_HEIGHT = 200;
+  let start;
+  let unit = 10;
+  let expected = 0;
+  let moments = [];
+  let allFound = false;
+  let initialFound = undefined;
+  let seconds = 0;
 
-  let interval
-  onMount(async ()=>{
-    bunchRecord = await store.client.getThing(bunchHash)
-    bunchContent = JSON.parse(bunchRecord.entry.content)
-    start = new Date
-    expected = bunchContent.count*bunchContent.reps
-    unit = GRAPH_HEIGHT/expected
+  let interval;
+
+  const runGraph = () => {
+    start = new Date();
+    expected = bunchContent.count * bunchContent.reps;
+    unit = GRAPH_HEIGHT / expected;
     interval = setInterval(async () => {
-        const things = await store.client.getThings(bunch)
-        const count  = things.length
-        moments.push(count)
-        moments = moments
-        if (expected == count) {
-            allFound=true
-            clearInterval(interval)
-            interval = undefined
-        }
-        seconds +=1 
+      const things = await store.client.getThings(bunch);
+      const count = things.length;
+      moments.unshift(count);
+      moments = moments;
+      if (expected == count) {
+        allFound = true;
+        clearInterval(interval);
+        interval = undefined;
+      }
+      seconds += 1;
     }, 1000);
-  })
-  onDestroy(()=>{
+  };
+
+  onMount(async () => {
+    bunchRecord = await store.client.getThing(bunchHash);
+    bunchContent = JSON.parse(bunchRecord.entry.content);
+    const things = await store.client.getThings(bunch);
+    if (things.length >0) {
+      moments.unshift(things.length);
+      moments = moments;
+      initialFound = "found"
+      expected = bunchContent.count * bunchContent.reps;
+    } else {
+      initialFound = "notFound"
+    }
+  });
+  onDestroy(() => {
     if (interval) {
-        clearInterval(interval)
+      clearInterval(interval);
     }
-  })
+  });
 </script>
 
 <div class="wrapper">
   {#if bunchRecord}
     <div class="bunch-content">
+      {#if initialFound === undefined}
+        <sl-skeleton effect="pulse" style="height: 10px; width: 100%"></sl-skeleton>
+      {:else if initialFound === "found"}
+        Expected: {expected}; Total found: {moments[0]}
+      {:else if initialFound === "notFound"}
+        <div>Reps: {bunchContent.reps}; Count: {bunchContent.count}; Delay: {bunchContent.delay}</div>
+        {#if hashEqual(bunchRecord.action.author, store.myAgentPubKey)}
+          <sl-button
+            on:click={()=>{
+              creatingThings = true
+              initialFound = ""
+              runGraph()
+              createThings()
+            }}
+          >Create Things</sl-button>
+        {:else}
+          <sl-button
+          on:click={()=>{
+            initialFound = ""
+            runGraph()
+          }}
+          >Wait For Things</sl-button>
+        {/if}
+      {:else}
         {#if allFound}
-            All {expected} things found after {seconds} seconds.
+          All {expected} things found after {seconds} seconds.
         {:else}
-            Seconds elapsed: : {seconds}
+          {#if creatingThings}
+          <div>Create Count: {creatingCount}</div>
+          {/if}
+          <div>Seconds elapsed: : {seconds}</div>
         {/if}
-      <div>
-        Start: {start}
-      </div>
-      <div class="graph">
-        <div class="units" style={`height:${GRAPH_HEIGHT+40}px`}><span>{expected}</span></div>
-        {#each moments as moment,i}
+        <div>
+          Start: {start}
+        </div>
+        <div class="graph">
+          <div class="units" style={`height:${GRAPH_HEIGHT + 38}px`}>
+            <span>{expected}</span>
+          </div>
+          {#each moments as moment, i}
             <div style="display:flex;flex-direction:column;align-items:center">
-                <span style="font-size:80%;padding-left:3px;padding-right:3px">{moment}</span>
-                <div title={moment} class="bar" style={`height:${moment*unit}px;width:5px`}></div>
-                <span style="font-size:80%;padding-left:3px;padding-right:3px">{i}</span>
-
+              <span class="bar-num">{moment}</span>
+              <div
+                title={moment}
+                class="bar"
+                style={`height:${moment * unit}px;width:5px`}
+              ></div>
+              <span class="bar-num">{moments.length - i}</span>
             </div>
-        {/each}
-        <div class="units" style={`height:${GRAPH_HEIGHT+40}px`}><span>{expected}</span></div>
+          {/each}
+          <div class="units" style={`height:${GRAPH_HEIGHT + 38}px`}>
+            <span>{expected}</span>
+          </div>
         </div>
+      {/if}
     </div>
   {:else}
     <sl-skeleton effect="pulse" style="height: 10px; width: 100%"></sl-skeleton>
   {/if}
 </div>
 
 <style>
-  .graph{
+  .graph {
     display: flex;
     align-items: end;
+    width: 800px;
+    overflow-x: scroll;
   }
   .bar {
     background-color: red;
     justify-content: flex-end;
   }
+  .bar-num {
+    font-size: 70%;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
   .units {
     display: flex;
     flex-direction: column;