diff --git a/ui/package.json b/ui/package.json index c6acd23..963c644 100644 --- a/ui/package.json +++ b/ui/package.json @@ -1,6 +1,6 @@ { "name": "ui", - "version": "0.0.5", + "version": "0.0.6", "dnaVersion": "0.0.2", "scripts": { "start": "vite --clearScreen false --port $UI_PORT", diff --git a/ui/src/Bunch.svelte b/ui/src/Bunch.svelte index e016499..8776f0d 100644 --- a/ui/src/Bunch.svelte +++ b/ui/src/Bunch.svelte @@ -110,18 +110,18 @@ runGraph() createThings() }} - >Create Things + >Start Test {:else} { initialFound = "" runGraph() }} - >Wait For Things + >Watch Test {/if} {:else} {#if allFound} - All {expected} things found after {seconds} seconds. + All {expected} entries found after {seconds} seconds. {:else} {#if creatingThings}
Create Count: {creatingCount}
diff --git a/ui/src/Controller.svelte b/ui/src/Controller.svelte index b90bee2..469099b 100644 --- a/ui/src/Controller.svelte +++ b/ui/src/Controller.svelte @@ -82,23 +82,6 @@ let currentStream: string | undefined = undefined; $: liveStreams = store.streams; - $: timer = time; - - let fileinput; - const onFileSelected = (e) => { - let file = e.target.files[0]; - let reader = new FileReader(); - - reader.addEventListener( - "load", - async () => { - const b = JSON.parse(reader.result as string); - await store.makeThing(b); - }, - false - ); - reader.readAsText(file); - };
@@ -108,8 +91,8 @@
-
currentStream="_"}>Things
-
currentStream=""}>Streams
+
currentStream="_"}>Entries
+
currentStream=""}>Signals
diff --git a/ui/src/StreamPane.svelte b/ui/src/StreamPane.svelte index bf88f42..6ee67f8 100644 --- a/ui/src/StreamPane.svelte +++ b/ui/src/StreamPane.svelte @@ -15,7 +15,7 @@ import type { Stream, Payload, Message } from "./stream"; import type { AgentPubKey } from "@holochain/client"; import { HoloHashMap } from "@holochain-open-dev/utils"; - import { debounce } from "lodash-es"; + import { hashEqual } from "./util"; const { getStore }: any = getContext("store"); const store: ZipTestStore = getStore(); @@ -35,9 +35,10 @@ }; store.weaveClient?.walToPocket(attachment); }; - const SCROLL_THRESHOLD = 100; // How close to the bottom must the user be to consider it "at the bottom" type Results = { + from: AgentPubKey; + expected: number; count: number; acks: number; }; @@ -46,29 +47,31 @@ $: myProfile = get(store.profilesStore.myProfile).value; onMount(async () => { - conversationContainer.addEventListener("scroll", handleScroll); }); onDestroy(() => { - conversationContainer.removeEventListener("scroll", handleScroll); }); const getSources = ( messages: Message[], acks: { [key: number]: HoloHashMap } ) => { - const sources: HoloHashMap = new HoloHashMap(); + const sources: { [key: string]: Results } = {}; messages.forEach((m) => { - const fromB6 = encodeHashToBase64(m.from); - const r = sources.get(m.from); - const results: Results = r ? r : { count: 1, acks: 0 }; - if (r) { - results.count += 1; - } - if (fromB6 == store.myAgentPubKeyB64) { - results.acks += getAckCount(acks, m.payload.created); + if (m.payload.type == "Msg") { + const [test, expected, count] = m.payload.text.split("."); + const r = sources[test]; + const results: Results = r + ? r + : { expected: parseInt(expected), count: 1, acks: 0, from: m.from }; + if (r) { + results.count += 1; + } + if (hashEqual(m.from, store.myAgentPubKey)) { + results.acks += getAckCount(acks, m.payload.created); + } + sources[test] = results; } - sources.set(m.from, results); }); return sources; }; @@ -79,10 +82,17 @@ $: lastSeen = store.lastSeen; $: agentActive = store.agentActive; - let inputElement; + let currentTest; + let currentTestExpected; let inputCountElement; let inputDelayElement; let disabled; + const startTest = async () => { + const now = new Date(); + currentTest = `${now.getTime()}`; + currentTestExpected = parseInt(inputCountElement.value); + await sendMessage(); + }; const sendMessage = async () => { let count = parseInt(inputCountElement.value); let delay = parseInt(inputDelayElement.value); @@ -92,18 +102,19 @@ inputCountElement.value = `${count}`; if (count > 0) { sendMessage(); + } else { + currentTest = "" } }, delay); }; - const _sendMessage = async (text) => { + const _sendMessage = async (count) => { const payload: Payload = { type: "Msg", - text, + text: `${currentTest}.${currentTestExpected}.${count}`, created: Date.now(), }; console.log("SENDING TO", hashes); await store.sendMessage(stream.id, payload, hashes); - inputElement.value = ""; }; const getAckCount = ( acks: { [key: number]: HoloHashMap }, @@ -116,41 +127,7 @@ return 0; }; let confirmDialog; - const convertMessageText = (text: string): string => { - let formatted = text.replace( - /(https?:\/\/[^\s]+)/g, - '$1' - ); - formatted = formatted.replace( - /(we:\/\/[^\s]+)/g, - '$1' - ); - return formatted; - }; - - let conversationContainer: HTMLElement; - - let scrollAtBottom = true; - // Reactive update to scroll to the bottom every time the messages update, - // but only if the user is near the bottom already - $: if ($messages && $messages.length > 0) { - if (scrollAtBottom) { - setTimeout(scrollToBottom, 100); - } - } - - const handleScroll = debounce(() => { - scrollAtBottom = - conversationContainer.scrollHeight - conversationContainer.scrollTop <= - conversationContainer.clientHeight + SCROLL_THRESHOLD; - }, 100); - - function scrollToBottom() { - if (conversationContainer) { - conversationContainer.scrollTop = conversationContainer.scrollHeight; - scrollAtBottom = true; - } - } + let showRecipients = 0; @@ -165,18 +142,43 @@
- Total Messages: {$messages.length} - {#each Array.from(sources.entries()) as [key, results]} - {@const key64 = encodeHashToBase64(key)} +
+ + + + Start Test + +
+ {#each Object.entries(sources) as [test, results]}
- {results.count} - {#if key64 == store.myAgentPubKeyB64} - acks: {results.acks} + {(new Date(parseInt(test)) ).toISOString()}: + + {#if hashEqual(results.from, store.myAgentPubKey)} + {results.count} of {results.expected} sent with {results.acks} acks ({( + (results.acks / results.expected) * + 100 + ).toFixed(0)}%) + {:else} + {results.count} of {results.expected} received ({( + (results.count / results.expected) * + 100 + ).toFixed(0)}%) {/if}
{/each} @@ -209,107 +211,8 @@ {/each} -->
-
- {#each $messages as msg} - {@const isMyMessage = - encodeHashToBase64(msg.from) == store.myAgentPubKeyB64} -
- {#if msg.payload.type == "Msg"} - {#if !isMyMessage && showFrom} - - {/if} - {@html convertMessageText(msg.payload.text)} - {new Date(msg.payload.created).toLocaleTimeString()} - {#if isMyMessage} - {@const ackCount = getAckCount($acks, msg.payload.created)} - {#if ackCount == hashes.length} - ✓ - {:else if hashes.length > 1} - { - if (showRecipients !== msg.payload.created) { - showRecipients = msg.payload.created; - } - }}>{ackCount} -
{ - showRecipients = 0; - }} - > - {#if showRecipients === msg.payload.created} - {@const keys = Array.from($acks[msg.payload.created].keys())} -
-
- {"received by:"} -
-
- {#each keys as agent, i} - {#if i < keys.length - 1},{/if} - {/each} -
-
- {/if} -
- {/if} - {/if} - {/if} -
- {/each} -
-
- - - (disabled = !e.target.value || !inputElement.value)} - on:keydown={(e) => { - if (e.keyCode == 13) { - _sendMessage(inputElement.value); - e.stopPropagation(); - } - }} - label="Message" - > - - -
+
diff --git a/ui/src/ThingsPane.svelte b/ui/src/ThingsPane.svelte index c72e265..1bde2b9 100644 --- a/ui/src/ThingsPane.svelte +++ b/ui/src/ThingsPane.svelte @@ -113,12 +113,13 @@ createBunch()} - >New Bunch + >New Test
- Bunches Count: {bunches ? bunches.length : "?"} + Tests Count: {bunches ? bunches.length : "?"}
{#if !bunches}