Conceptual Design - Solid better User Experience

#61

Would it be possible to make web components that do something like this?

<filechooser file-chosen=“the file chosen”>

<fileparser parse-file=“the file chosen” rdf-graph=“the graph chosen”>

<graphdisplayer1 rdf-graph=“the graph chosen”> <!-- d3 force graph -->

<graphdisplayer2 rdf-graph=“the graph chosen”> <!-- bar chart -->

<graphdisplayer3 rdf-graph=“the graph chosen”> <!-- pie chart -->

<grapheditor1 rdf-graph=“the graph chosen”> <!-- simple text editor -->

<grapheditor2 rdf-graph=“the graph chosen”> <!-- editor with fancy autocomplete -->

Where the matching attribute values are mapped to shared properties, and the properties are javascript objects.

Since this is declarative, they would all show at once, and the changes when choosing another file or editing in an editor would be reflected in the other elements.

Then lots of apps could be built with similar html tags, especially if templates for enumerating lists are also possible. @happybeing’s application generator could also be built this way.

#62

Yes it’s for a new version, that :

  • replace deprecated simpleMde editor with easymde
  • allow local install with node/express
  • try to make possible to post in a desired pod, not only on the same one
    …
    I’ll try with solid-local-pod-manager :+1::slightly_smiling_face:
    Thxs for your promptness

does it work on Windows ? as i have some errors

image
image.png2736x1824 414 KB

–> ok it works on localhost:2700, but not on 127.0.0.1:2700

#63

@tag42git it’s totally feasible, and it’s why I love webcomponent, although I don’t like the way they normally share data, with data-binding or other redux tools.

I prefer that they are totally autonomous, so that they talk to each other through the evejs agent system . (@dprat0821)

Each component has a ''named agent" that send data to the agent of another component.

When this agent receive data, he updates the components.

So an app can be build out independent reusable autonomous components as easily as every htmlTag.

Then it would also be easy to replace for example a component by another. If I want my graph to be made with d3js instead of visjs, just import the equivalent component, and use it’s tag & name of communicating agent…

I’d not really know what could be in a piechart component :thinking::crazy_face:, but I will give you a proto of your desired app, with components that exchange those data to each other
Or you can give a try by copying this folder https://github.com/scenaristeur/solidash/tree/master/compagent-spoggy.
It’s all you need to start that type of app ( just duplicate the component/modele-component.js and name it graph-editor ( carefully, dash is necessary) .
In this file change the name at the three place you find model-component or ModelComponent .
Then you can import it in component/component-app.js and use it as a new htmlTag …
Can’t be more simple and it works in the browser, don’t need webpack or other preparation… So could be directly installed on a Pod … :grin:

Edit :
using this components :

  <displayer-chooser name="Chooser"></displayer-chooser>
  <displayer-parser name="Parser"></displayer-parser>
  <displayer-graph name="D3Force" type="d3"></displayer-graph>
  <displayer-graph name="BarChart" type="bar"></displayer-graph>
  <displayer-graph name="PieChart" type="pie"></displayer-graph>
  <editor-component name="Editor" type="simple"></editor-component>
  <editor-component name="Editor" type="fancy"></editor-component>

on this page is an example https://scenaristeur.github.io/solidash/compagent-displayer/

and in the <displayer-chooser> i reuse the <browser-component>, the <tripledoc-profile> & the <explorer-component> that i used in my demo app…

#64

Fantastic! I will give it a try. I don’t have any specific data in mind, I just think making apps should be easy like you are making it possible.

#65

Hi @Smag0,

Can you put more than one displayer-chooser in a document? If so, how do you tell different displayer-graph elements which displayer-chooser they use?

Thanks

#66

Yes , for every component, I use a ‘name’ attribute.
Then I create an HelloAgent with that name. So the chooser ( in fact the tripledoc-profile that is part of the chooser use "this.agent.send(“recipient-agent”, {action: something, data:data) . And in the recipient I use the “receive” prototype to link a function to each type of action. That’s the way I use to make communication between components. Broadcast can also be used as in the login component

#67

Can I do that with just html, not using JavaScript?

#68

Well hum … If the component is well done, no need to write js for the end user.
For example just put a login-comp and a message-comp in a page, the login broadcast when you login and message-comp get the message.
But as a developer of module, you have to define the interface to interact with a component, the inputs & the outputs…

#69

What about putting the interface in the html attributes though? So you could have an attribute like ‘rdf-graph’ with a string value, and that string value would cause a property of that name to be defined for the first component that uses it. Then the next component that uses the same rdf-graph would also have an attribute named ‘rdf-graph’ with the same value as the rdf-graph in the first component and the second component would get a pointer to that property in the first component, and be notified if that property changes. That way the name of the ‘channel’ or interface between the two components would be in the html. The user could choose the channel name and have different channels for the same attribute. The user could put whatever components they wanted on a channel as long they consumed that type of property. Then they could have different sets of components share channels with different names. That way they could have multiple sets of the same kind of components.

If I remember correctly from my polymer period (a couple of years ago), you can do this with data binding, but maybe it could also be done with eventjs.

Just adding to my wish list :grin:

#70

I’m not a fan of Polymer’s data-binding system as explained here, but the idea of ‘channel’ is a way that we could explore, or the concept of groups.

#71

I don’t know Polymer or how other frameworks do this so I’m a bit of a noob but that never stopped me before :wink:…

…so just to mention that the way Svelte binds variables is neat. I don’t understand the full capabilities yet, but you can bind variables to a formula/expression and even a function. So if the inputs change the output is recalculated.

So that might be a way to build components, but specific to Sveltejs

I think I’ve already mentioned Holochain CEPTR, stop just a reminder about that!

#72

It would be useful for displaying different resources side by side, for example a resource and it’s .acl or it’s .meta., or different views or parts of the same resource side by side.

But I agree about polymer’s data binding not being ideal.

Found this which compares data binding code from 9 different frameworks, although it’s a few years old. I don’t know but maybe we need something custom made, but I don’t think it would have to be too fancy.