@neighbourhoods/client
v0.0.10
Published
This package provides an API for interacting with a sensemaker-lite instance along with typescript type definitions of sensemaker-lite primitives, IO payloads, other utility types and functions, along with a reactive state objects for declarative binding
Downloads
63
Keywords
Readme
@neighbourhoods/client
This package provides an API for interacting with a sensemaker-lite instance along with typescript type definitions of sensemaker-lite primitives, IO payloads, other utility types and functions, along with a reactive state objects for declarative binding UI components to the state.
Currently compatible with holochain v0.1
.
Sensemaker Store API
The main way to interact with the API is by spawning an instance of SensemakerStore
:
const installedAppId = "applet_name"; //this would change to whatever app ID your NH happ is given
const roleName = "nh_role_name"; // this would change to whatever role name your NH happ is given
const appAgentWebsocket: AppAgentWebsocket = await AppAgentWebsocket.connect(``, installedAppId);
const sensemakerService = new SensemakerService(appAgentWebsocket, roleName)
const sensemakerStore = new SensemakerStore(sensemakerService);
Then you can use any of the methods on the sensemakerStore
object to interact with the sensemaker-lite instance.
See the API Documentation for implementation details.
Stateful properties use svelte/store
to provide a reactive interface to the data. To subscribe to the store, you can use lit-svelte-store
to create a reactive property in a lit-element component:
export class ContextSelector extends ScopedElementsMixin(LitElement) {
@contextProvided({ context: sensemakerStoreContext, subscribe: true })
@state()
public sensemakerStore!: SensemakerStore
contexts: StoreSubscriber<AppletConfig> = new StoreSubscriber(this, () => this.sensemakerStore.appletConfig());
render() {
return html`
<div class="list-list-container">
<mwc-list>
${Object.keys(this.contexts?.value?.cultural_contexts).map((contextName) => html`
<list-item listName=${contextName}></list-item>
`)}
<mwc-list>
</div>
`
}
}
In this example, if this.contexts.value
changes, the component will re-render. For example, if this.sensemakerStore.createCulturalContext(...)
is called, it updates the applet config store, which triggers a re-render of the component with the new value.
Widget Registration
Part of the NH framework is being able to define your own widgets which are used to assess resources and display dimensions. This is the core of enabling the full configurability of your NH applets and exploring various forms of assessing and the cascading feedback-loop effects of those assessments.
There are two main types of widgets:
- create assessment widgets: used to create an assessment along a specific dimension for a resource
- display assessment widgets: used to display the value of an assessment along an output dimension of a method (for example, the total "likes" on a resource)
To define your own custom component for each type of widget, there are two abstract classes which you will extend respectively, AssessDimensionWidget
and DisplayDimensionWidget
. For example,
export class ImportanceDimensionAssessment extends AssessDimensionWidget {
and
export class ImportanceDimensionDisplay extends DisplayDimensionWidget {
Then you would implement the render()
function to return the HTML template for your widget.
You can then register these widgets in the widget registry using the registerWidget
function, which is used to register a pair of widgets (assessment and display) for a list of dimensions.
Assessing resources
There is a wrapper component sensemake-resource
that you can use to wrap your resource components, which will handle rendering dimension and assessment widgets based on the current sensemaker store state. To use it, you can include it in your html code and wrap the resource component, like so:
<sensemake-resource
.resourceEh=${task.entry_hash}
.resourceDefEh=${get(this.sensemakerStore.appletConfig()).resource_defs["task_item"]}
>
<task-item
.task=${task}
.completed=${('Complete' in task.entry.status)}
></task-item>
</sensemake-resource>
All you need to do is provide the component with the resource entry hash and the resource def entry hash.