) {
+ if (changedProperties.has("path")) {
+ this.bindValue();
+ }
+ }
+
+ override render() {
+ return html`
+
+ ${this.key}
+ ${this.getShortValue()}
+
+ ${this.showTooltip ? this.renderTooltip() : ""}
+ `;
+ }
+
+ isNavigable() {
+ return typeof this.value === "object" && this.value !== null;
+ }
+
+ handleNavigate() {
+ if (!this.isNavigable()) {
+ return;
+ }
+
+ this.dispatchEvent(
+ new CustomEvent("navigate", {
+ detail: { key: this.key, value: this.value },
+ bubbles: true,
+ composed: true
+ })
+ );
+ }
+
+ renderTooltip() {
+ return html`
+
+ ${this.getPrettyPrintedValue()}
+
+ `;
+ }
+
+ handleMouseMove(e: MouseEvent) {
+ this.tooltipX = e.clientX + 10; // Offset from cursor
+ this.tooltipY = e.clientY + 10;
+ this.requestUpdate();
+ }
+
+ handleMouseEnter() {
+ this.showTooltip = true;
+ }
+
+ handleMouseLeave() {
+ this.showTooltip = false;
+ }
+
+ getShortValue(): string {
+ if (typeof this.value === "object" && this.value !== null) {
+ return Array.isArray(this.value)
+ ? `[${this.value.length} items]`
+ : "{...}";
+ }
+ return String(this.value);
+ }
+
+ getPrettyPrintedValue(): string {
+ return JSON.stringify(this.value, null, 2).trim();
+ }
+}
+
+const initial = {
+ test: "hello"
+};
+
+type NavigationItem = {
+ key: string;
+};
+
+@customElement("inventory-view")
+export class InventoryView extends LitElement {
+ @state() private navigationStack: NavigationItem[] = [];
+
+ static override styles = css`
+ .inventory-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+ gap: 20px;
+ padding: 20px;
+ }
+ .breadcrumb {
+ margin-bottom: 10px;
+ }
+ .breadcrumb-item {
+ cursor: pointer;
+ color: blue;
+ text-decoration: underline;
+ }
+ `;
+
+ override connectedCallback() {
+ super.connectedCallback();
+ this.navigateTo({ key: "state" });
+ }
+
+ navigateTo(item: NavigationItem) {
+ this.navigationStack = [...this.navigationStack, item];
+ }
+
+ navigateBack(index: number) {
+ this.navigationStack = this.navigationStack.slice(0, index + 1);
+ }
+
+ renderBreadcrumbs() {
+ return html`
+
+ ${this.navigationStack.map(
+ (item, index) => html`
+ this.navigateBack(index)}
+ >
+ ${item.key}
+
+ ${index < this.navigationStack.length - 1 ? " > " : ""}
+ `
+ )}
+
+ `;
+ }
+
+ override render() {
+ const path = this.navigationStack.map((item) => item.key).join(".");
+ const currentValue = graphState.get(path);
+ console.log("Current value", currentValue);
+
+ const onRefresh = () => {
+ this.requestUpdate();
+ };
+
+ return html`
+ ${this.renderBreadcrumbs()}
+
+
+ ${Object.entries(currentValue).map(([key, _value]) => {
+ const fullPath = isNaN(Number(key))
+ ? `${path}.${key}`
+ : `${path}[${key}]`;
+ return html`
+ this.navigateTo(e.detail)}
+ >
+ `;
+ })}
+
+ `;
+ }
+}
diff --git a/typescript/packages/lookslike-prototype/src/gems.ts b/typescript/packages/lookslike-prototype/src/gems.ts
new file mode 100644
index 000000000..12c007dd2
--- /dev/null
+++ b/typescript/packages/lookslike-prototype/src/gems.ts
@@ -0,0 +1,77 @@
+import { createRxDatabase, addRxPlugin } from "rxdb";
+import { getRxStorageMemory } from "rxdb/plugins/storage-memory";
+import { RxDBDevModePlugin } from "rxdb/plugins/dev-mode";
+import { html } from "lit-html";
+import { RxDBStatePlugin } from "rxdb/plugins/state";
+import { Observable, Subscription } from "rxjs";
+import { LitElement, css } from "lit-element";
+import { customElement, property, state } from "lit-element/decorators.js";
+
+addRxPlugin(RxDBStatePlugin);
+addRxPlugin(RxDBDevModePlugin);
+
+// Create the database
+async function createDatabase() {
+ const db = await createRxDatabase({
+ name: "inventorydb",
+ storage: getRxStorageMemory()
+ });
+
+ return db;
+}
+
+const db = await createDatabase();
+export const graphState = await db.addState();
+
+setTimeout(async () => {
+ await graphState.set("state", (_) => ({}));
+}, 100);
+
+setTimeout(async () => {
+ document.body.appendChild(document.createElement("inventory-view"));
+}, 1000);
+
+export function gem(path: string): Gem {
+ const p = "state." + path;
+ const f: Observable = graphState.get$(p);
+ return {
+ path: p,
+ data: f
+ };
+}
+
+export async function read(gem: Gem) {
+ try {
+ return await graphState.get(gem.path);
+ } catch (e) {
+ console.warn(e);
+ return null;
+ }
+}
+
+export async function write(gem: Gem, value: T) {
+ try {
+ await graphState.set(gem.path, (_) => value);
+ await sleep(100);
+ } catch (e) {
+ console.warn(e);
+ }
+}
+
+export async function update(gem: Gem, fn: (value: T) => T) {
+ try {
+ await graphState.set(gem.path, fn);
+ await sleep(100);
+ } catch (e) {
+ console.warn(e);
+ }
+}
+
+async function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export type Gem = {
+ path: string;
+ data: Observable;
+};
diff --git a/typescript/packages/lookslike-prototype/src/graph.ts b/typescript/packages/lookslike-prototype/src/graph.ts
index 1d6483baa..72e5ea30e 100644
--- a/typescript/packages/lookslike-prototype/src/graph.ts
+++ b/typescript/packages/lookslike-prototype/src/graph.ts
@@ -2,7 +2,6 @@ import { createElement } from "./ui.js";
import { run } from "./eval.js";
import { Recipe, RecipeNode } from "./data.js";
-import { signal, config } from "@commontools/common-frp";
import { Context, storage } from "./state.js";
import {
CONTENT_TYPE_CLOCK,
@@ -14,8 +13,9 @@ import {
CONTENT_TYPE_STORAGE,
CONTENT_TYPE_UI
} from "./contentType.js";
-import { SignalSubject } from "../../common-frp/lib/signal.js";
-type Signal = signal.SignalSubject;
+import { combineLatest, Observable } from "rxjs";
+import { Gem, gem, read, write } from "./gems.js";
+import { generateImage, streamLlm } from "./agent/llm.js";
// config.debug = true;
@@ -28,27 +28,29 @@ export function collectSymbols(recipe: Recipe) {
}
// inflate the RxJS network from a JSON graph definition
-export function createRxJSNetworkFromJson(
+export async function createRxJSNetworkFromJson(
recipe: Recipe
-): Context> {
+): Promise>> {
// track all inputs and outputs
const context = {
- inputs: {} as { [key: string]: { [key: string]: Signal } },
- outputs: {} as { [key: string]: Signal },
+ inputs: {} as {
+ [key: string]: { [key: string]: Gem };
+ },
+ outputs: {} as { [key: string]: Gem },
cancellation: [] as (() => void)[]
};
// populate context namespace
- recipe.forEach((node) => {
+ recipe.forEach(async (node) => {
const nodeName = node.id;
- context.outputs[nodeName] = signal.state(null);
+ context.outputs[nodeName] = gem(nodeName);
// foreach input in the signature, create a placeholder cell
if (node.in) {
const inputs = node.in;
context.inputs[nodeName] = {};
for (const inputName in inputs) {
- context.inputs[nodeName][inputName] = signal.state(null);
+ context.inputs[nodeName][inputName] = undefined as any;
}
}
});
@@ -60,66 +62,40 @@ export function createRxJSNetworkFromJson(
for (const inputName in inputs) {
const [sourceContext, sourceNode] = inputs[inputName];
if (sourceContext !== ".") throw Error("remote refs not allowed (yet)");
- const source = context.outputs[sourceNode];
- const target = context.inputs[node.id][inputName];
-
- if (!source || !target) {
- debugger;
- throw Error(
- `source or target not found: ${sourceNode} -> ${node.id}.${inputName}`
- );
- }
-
- const cancel = signal.effect([source], (value) => {
- target.send(value);
- });
-
- context.cancellation.push(cancel);
+ context.inputs[node.id][inputName] = context.outputs[sourceNode];
}
}
});
console.log("EXECUTE NODE about to re-run entire graph");
// process node definitions and set up reactive logic
- recipe.forEach(async (node) => {
- const inputObservables: Signal[] = [];
- const inputSignals: { [key: string]: Signal } = {};
+ for (const node of recipe) {
+ const inputObservables: Observable[] = [];
+ const inputSignals: { [key: string]: Gem } = {};
for (const inputName in node.in) {
const outputName = node.in[inputName][1];
if (context.outputs[outputName]) {
- inputObservables.push(context.outputs[outputName]);
+ inputObservables.push(context.outputs[outputName].data);
inputSignals[inputName] = context.outputs[outputName];
}
}
if (inputObservables.length === 0) {
+ // const val = await read(gem(node.id));
+ // if (!val) {
console.log("EXECUTE NODE Running node on mount", node.id);
await executeNode(node, {}, context.outputs, inputSignals);
+ // }
if (node.contentType !== CONTENT_TYPE_JAVASCRIPT) {
- return;
+ continue;
}
}
- const allInputs = signal.computed(inputObservables, (...values) => {
- // make an object out of node.in and the values
- const inputs = Object.entries(node.in).reduce(
- (acc, [k, [_, v]], idx) => {
- acc[k] = values[idx];
- return acc;
- },
- {} as { [key: string]: any }
- );
-
- return inputs;
- });
-
- console.log("BOUND INPUTS", node.id, node.in, allInputs);
+ console.log("BOUND INPUTS", node.id, node.in);
- const cancel = signal.effect([allInputs], async (values) => {
- // do not execute if any of the inputs are null
- // TODO: this is a symptom of modelling some invalid states
- if (Object.values(values).some((v) => v === null)) {
+ const sub = combineLatest(inputObservables).subscribe(async (values) => {
+ if (values.some((v) => v === null)) {
return;
}
@@ -130,8 +106,9 @@ export function createRxJSNetworkFromJson(
);
await executeNode(node, values, context.outputs, inputSignals);
});
- context.cancellation.push(cancel);
- });
+
+ // context.cancellation.push(sub.unsubscribe);
+ }
return context;
}
@@ -141,8 +118,8 @@ const intervals = {} as { [key: string]: NodeJS.Timeout };
async function executeNode(
node: RecipeNode,
inputs: { [key: string]: any },
- outputs: { [key: string]: SignalSubject },
- inputSignals: { [key: string]: Signal }
+ outputs: { [key: string]: Gem },
+ inputSignals: { [key: string]: Gem }
) {
console.log("EXECUTE NODE", node.id, inputs);
const { contentType } = node;
@@ -153,12 +130,12 @@ async function executeNode(
throw new Error("Expected a string");
}
const result = await run(node.id, node.body, inputs, node.evalMode);
- outputs[node.id].send(result);
+ await write(outputs[node.id], result);
break;
}
case CONTENT_TYPE_UI: {
const template = createElement(node.body, inputSignals);
- outputs[node.id].send(template);
+ await write(outputs[node.id], template);
break;
}
case CONTENT_TYPE_FETCH: {
@@ -168,19 +145,19 @@ async function executeNode(
const url = node.body;
const response = await fetch(url);
const data = await response.json();
- outputs[node.id].send(data);
+ await write(outputs[node.id], data);
break;
}
case CONTENT_TYPE_EVENT: {
- outputs[node.id].send(inputs);
+ await write(outputs[node.id], inputs);
break;
}
case CONTENT_TYPE_CLOCK: {
clearInterval(intervals[node.id]);
let x = 0;
- intervals[node.id] = setInterval(() => {
+ intervals[node.id] = setInterval(async () => {
x++;
- outputs[node.id].send(x);
+ await write(outputs[node.id], x);
}, 1000);
break;
}
@@ -188,16 +165,16 @@ async function executeNode(
const response = await streamLlm(
JSON.stringify(inputs.prompt),
"",
- (preview) => {
- outputs[node.id].send(preview);
+ async (preview) => {
+ await write(outputs[node.id], preview);
}
);
- outputs[node.id].send(response);
+ await write(outputs[node.id], response);
break;
}
case CONTENT_TYPE_IMAGE: {
const response = await generateImage(JSON.stringify(inputs.prompt));
- outputs[node.id].send(response);
+ await write(outputs[node.id], response);
break;
}
case CONTENT_TYPE_STORAGE: {
@@ -214,7 +191,7 @@ async function executeNode(
value = await storage.get(node.body);
}
- outputs[node.id].send(value);
+ await write(outputs[node.id], value);
break;
}
}
diff --git a/typescript/packages/lookslike-prototype/src/main.ts b/typescript/packages/lookslike-prototype/src/main.ts
index 144cc0a93..f8a330a98 100644
--- a/typescript/packages/lookslike-prototype/src/main.ts
+++ b/typescript/packages/lookslike-prototype/src/main.ts
@@ -23,6 +23,7 @@ export * as ComModuleImage from "./components/modules/com-module-image.js";
export * as ComModuleShader from "./components/modules/com-module-shader.js";
export * as ComModuleEvent from "./components/modules/com-module-event.js";
export * as ComModuleStorage from "./components/modules/com-module-storage.js";
+export * as GemUi from "./components/gems.js";
export * as ComApp from "./components/com-app.js";