Skip to content

Commit

Permalink
Implementing WeApplet
Browse files Browse the repository at this point in the history
  • Loading branch information
ddd-mtl committed May 26, 2023
1 parent ab713c0 commit 311b205
Show file tree
Hide file tree
Showing 8 changed files with 257 additions and 68 deletions.
2 changes: 1 addition & 1 deletion we-applet/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { ProfilesClient } from '@holochain-open-dev/profiles';
import { ProfilesZomeMock } from "@holochain-open-dev/profiles/dist/mocks.js";
import { weServicesMock } from "@lightningrodlabs/we-applet/dist/mocks.js";

import Applet from "../dist";

/** Define setup function */
Expand Down
134 changes: 134 additions & 0 deletions we-applet/src/applet-view.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import {AppAgentClient, AppAgentWebsocket, encodeHashToBase64, EntryHash} from "@holochain/client";
import {ProfilesClient} from "@holochain-open-dev/profiles";
import {AppletViews, WeServices} from "@lightningrodlabs/we-applet";
import {ThreadsApp} from "@threads/app";
import {
AppAgentClient, AppAgentWebsocket,
EntryHash,
} from "@holochain/client";
import { html, render} from "lit";
import { msg } from "@lit/localize";

import {
Hrl,
AppletViews,
CrossAppletViews,
WeApplet,
WeServices,
} from "@lightningrodlabs/we-applet";

import "@holochain-open-dev/profiles/dist/elements/profiles-context.js";
import "@lightningrodlabs/we-applet/dist/elements/we-services-context.js";
import "@lightningrodlabs/we-applet/dist/elements/hrl-link.js";

import {ProfilesClient, ProfilesStore} from "@holochain-open-dev/profiles";
import {ThreadsApp} from "@threads/app";
import {asCellProxy} from "./we-utils";
import {ThreadsProxy} from "@threads/elements/dist/bindings/threads.proxy";


// FIXME: Add threads-context in some way

/** */
export function appletViews(
client: AppAgentClient,
_appletId: EntryHash,
profilesClient: ProfilesClient,
weServices: WeServices
): AppletViews {
return {
main: (element) => {
const agentWs = client as AppAgentWebsocket;
console.log("ThreadsApplet.main()", client, agentWs.appWebsocket)
/** Link to styles */
const cssLink = document.createElement('link');
cssLink.href = "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/themes/light.css";
cssLink.rel = "stylesheet";
cssLink.media="(prefers-color-scheme:light)"
element.appendChild(cssLink);
/** Create and append <threads-app> */
const app = new ThreadsApp(agentWs.appWebsocket, undefined, true, "threads-applet");
element.appendChild(app);
},
blocks: {},
entries: {
rThreads: {
threads_integrity: {

/** Thread */
participation_protocol: {
info: async (hrl: Hrl) => {
const cellProxy = await asCellProxy(client, hrl, "threads-applet", "rThreads");
const proxy: ThreadsProxy = new ThreadsProxy(cellProxy);
const pp = await proxy.getPp(hrl[1]);
return {
icon_src: "",
name: pp[0].purpose,
};
},
view: async (element, hrl: Hrl, context) => {
//const cellProxy = await asCellProxy(client, hrl, "threads-applet", "rThreads");
//const proxy: ThreadsProxy = new ThreadsProxy(cellProxy);
const spaceElem = html`
<div>Before custom element</div>
<comment-thread-view .threadHash=${encodeHashToBase64(hrl[1])}></comment-thread-view>
<div>After custom element</div>
`;
render(spaceElem, element);
},
},


/** TextMessage */
text_message: {
info: async (hrl: Hrl) => {
const cellProxy = await asCellProxy(client, hrl, "threads-applet", "rThreads");
const proxy: ThreadsProxy = new ThreadsProxy(cellProxy);
const tuple = await proxy.getTextMessage(hrl[1]);
return {
icon_src: "",
name: tuple[2].value,
};
},
view: async (element, hrl: Hrl, context) => {
//const cellProxy = await asCellProxy(client, hrl, "threads-applet", "rThreads");
//const proxy: ThreadsProxy = new ThreadsProxy(cellProxy);
const spaceElem = html`
<div>Before custom element</div>
<chat-message-item .hash=${encodeHashToBase64(hrl[1])}></chat-message-item>
<div>After custom element</div>
`;
render(spaceElem, element);
},
},


// /** Path entry type */
// path: {
// info: async (hrl: Hrl) => {
// const cellProxy = await asCellProxy(client, hrl, "threads-applet", "rThreads");
// const proxy: ThreadsProxy = new ThreadsProxy(cellProxy);
// const tuple = await proxy.getSubjectsByType(hrl[1]);
// return {
// icon_src: "",
// name: tuple[2].value,
// };
// },
// view: async (element, hrl: Hrl, context: any) => {
// //const cellProxy = await asCellProxy(client, hrl, "threads-applet", "rThreads");
// //const proxy: ThreadsProxy = new ThreadsProxy(cellProxy);
// const spaceElem = html`
// <div>Before custom element</div>
//
// <div>After custom element</div>
// `;
// render(spaceElem, element);
// },
// },


}
}
},
};
}
32 changes: 32 additions & 0 deletions we-applet/src/attachment-types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import {AppAgentClient, decodeHashFromBase64, DnaHash} from "@holochain/client";
import {AttachmentType, Hrl} from "@lightningrodlabs/we-applet";
import {asCellProxy} from "./we-utils";
import {ThreadsProxy} from "@threads/elements/dist/bindings/threads.proxy";
import {CreatePpInput} from "@threads/elements/dist/bindings/threads.types";


/** */
export async function attachmentTypes(client: AppAgentClient): Promise<Record<string, AttachmentType>> {
return {
thread: {
label: "Thread",
icon_src: "",
async create(attachToHrl: Hrl) {
const cellProxy = await asCellProxy(client, attachToHrl, "threads-applet", "rThreads");
const proxy: ThreadsProxy = new ThreadsProxy(cellProxy);
const input: CreatePpInput = {
purpose: "comment",
rules: "FFA",
dnaHash: attachToHrl[0],
subjectHash: attachToHrl[1],
subjectType: "unknown",
};
const ppPair = await proxy.createParticipationProtocol(input);
return {
hrl: [decodeHashFromBase64(cellProxy.cell.dnaHash), ppPair[0]],
context: {},
};
}
}
};
}
27 changes: 27 additions & 0 deletions we-applet/src/cross-applet-view.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {AppAgentClient, EntryHash} from "@holochain/client";
import {ProfilesClient} from "@holochain-open-dev/profiles";
import {CrossAppletViews, WeServices} from "@lightningrodlabs/we-applet";
import {html, render} from "lit";


/** */
export function crossAppletViews(
applets: ReadonlyMap<EntryHash, { profilesClient: ProfilesClient; appletClient: AppAgentClient }>, // Segmented by groupId
weServices: WeServices,
): CrossAppletViews {
// .store=${new ProfilesStore(applets[random].profilesClient)}
return {
main: (element) =>
render(
html`
<we-services-context .services=${weServices}>
<!-- <profiles-context> -->
<cross-applet-main .applets=${applets}></cross-applet-main>
<!-- </profiles-context> -->
</we-services-context>
`,
element
),
blocks: {},
};
}
70 changes: 4 additions & 66 deletions we-applet/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,19 @@
import {
AppAgentClient, AppAgentWebsocket,
EntryHash,
AppAgentClient
} from "@holochain/client";
import { html, render} from "lit";
import { msg } from "@lit/localize";

import {
Hrl,
AppletViews,
CrossAppletViews,
WeApplet,
WeServices,
} from "@lightningrodlabs/we-applet";

import "@holochain-open-dev/profiles/dist/elements/profiles-context.js";
import "@lightningrodlabs/we-applet/dist/elements/we-services-context.js";
import "@lightningrodlabs/we-applet/dist/elements/hrl-link.js";

import {ProfilesClient, ProfilesStore} from "@holochain-open-dev/profiles";
import {ThreadsApp} from "@threads/app";
import {appletViews} from "./applet-view";
import {crossAppletViews} from "./cross-applet-view";
import {attachmentTypes} from "./attachment-types";

// import "./applet-main";
// import "./cross-applet-main";


/** */
Expand All @@ -34,58 +26,4 @@ const applet: WeApplet = {
export default applet;


/** */
async function attachmentTypes(appletClient: AppAgentClient) {
return {}
}


/** */
function appletViews(
client: AppAgentClient,
_appletId: EntryHash,
profilesClient: ProfilesClient,
weServices: WeServices
): AppletViews {
return {
main: (element) => {
const agentWs = client as AppAgentWebsocket;
console.log("ThreadsApplet.main()", client, agentWs.appWebsocket)
/** Link to styles */
const cssLink = document.createElement('link');
cssLink.href = "https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/themes/light.css";
cssLink.rel = "stylesheet";
cssLink.media="(prefers-color-scheme:light)"
element.appendChild(cssLink);
/** Create and append <threads-app> */
const app = new ThreadsApp(agentWs.appWebsocket, undefined, true, "threads-applet");
element.appendChild(app);
},
blocks: {},
entries: {},
};
}


function crossAppletViews(
applets: ReadonlyMap<EntryHash, { profilesClient: ProfilesClient; appletClient: AppAgentClient }>, // Segmented by groupId
weServices: WeServices,
): CrossAppletViews {
// .store=${new ProfilesStore(applets[random].profilesClient)}
return {
main: (element) =>
render(
html`
<we-services-context .services=${weServices}>
<!-- <profiles-context> -->
<cross-applet-main .applets=${applets}></cross-applet-main>
<!-- </profiles-context> -->
</we-services-context>
`,
element
),
blocks: {},
};
}


25 changes: 25 additions & 0 deletions we-applet/src/mock.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@

// export const weServicesMock: WeServices = {
// openViews: OpenViews;
// attachmentTypes: ReadonlyMap<EntryHash, Record<string, AttachmentType>>; // Segmented by groupId
//
// groupProfile(groupId: DnaHash): Promise<GroupProfile | undefined>;
// appletInfo(appletId: EntryHash): Promise<AppletInfo | undefined>;
// entryInfo(hrl: Hrl): Promise<EntryLocationAndInfo | undefined>;
// search(filter: string): Promise<Array<HrlWithContext>>;
// };
//
//
// export const weServicesMock: WeServices = {
// appletInfo: async () => undefined,
// attachmentTypes: new HoloHashMap<EntryHash, Record<string, AttachmentType>>(),
// entryInfo: async () => undefined,
// groupProfile: async () =>
// openViews: {
// openAppletBlock: () => {},
// openCrossAppletBlock: () => {},
// openHrl: () => {},
// },
// search: async () => [],
// };

32 changes: 32 additions & 0 deletions we-applet/src/we-utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import {asCell, BaseRoleName, Cell, CellProxy, ConductorAppProxy} from "@ddd-qc/cell-proxy";
import {AppAgentClient, AppAgentWebsocket, CellInfo, encodeHashToBase64, InstalledAppId} from "@holochain/client";
import {Hrl} from "@lightningrodlabs/we-applet";


/** */
export async function getCellInfo(client: AppAgentClient, hrl: Hrl, baseRoleName: BaseRoleName): Promise<CellInfo | null> {
const appInfo = await client.appInfo();
const cells = appInfo.cell_info[baseRoleName];
for (const cellInfo of cells) {
const cell = asCell(cellInfo);
if (!cell) {
continue;
}
const cellId = cell.cell_id;
if (encodeHashToBase64(cellId[0]) == encodeHashToBase64(hrl[0])) {
return cellInfo;
}
}
return null;
}


/** */
export async function asCellProxy(client: AppAgentClient, hrl: Hrl, appId: InstalledAppId, baseRoleName: BaseRoleName): Promise<CellProxy> {
const agentWs = client as AppAgentWebsocket;
const appProxy = await ConductorAppProxy.new(agentWs.appWebsocket);
const cellInfo = await getCellInfo(client, hrl, baseRoleName);
const cell = Cell.from(cellInfo, appId, baseRoleName)
const cellProxy = new CellProxy(appProxy, cell);
return cellProxy;
}
3 changes: 2 additions & 1 deletion webcomponents/src/elements/comment-thread-view.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import "@ui5/webcomponents/dist/Avatar.js"
import List from "@ui5/webcomponents/dist/List"
import "@ui5/webcomponents/dist/StandardListItem.js";
import {ThreadsProfile} from "../viewModels/profiles.proxy";
import {ActionHashB64} from "@holochain/client";
// import "@ui5/webcomponents/dist/CustomListItem.js";
// import "@ui5/webcomponents/dist/GroupHeaderListItem.js"

Expand All @@ -28,7 +29,7 @@ export class CommentThreadView extends DnaElement<unknown, ThreadsDvm> {
/** -- Properties -- */

/** Hash of Thread to display */
@property() threadHash: string = ''
@property() threadHash: ActionHashB64 = ''
/** View beads in chronological order, otherwise use timeReference as end-time and display older beads only. */
@property()
startFromBeginning: boolean = false;
Expand Down

0 comments on commit 311b205

Please sign in to comment.