ca-d / oscd-tree-explorer Goto Github PK
View Code? Open in Web Editor NEWAn mwc-list based component for exploring tree shaped data structures
License: Apache License 2.0
An mwc-list based component for exploring tree shaped data structures
License: Apache License 2.0
I assume the use case for this is to create a Virtual IED with a pre-populated data model where the user can quickly find the bits they want and select their children.
Some of what is below may cover known bugs.
With the following initial selection:
selection='{"CILO":{"Beh":{"q":{},"t":{},"blkEna":{},"cdcName":{},"d":{},"dataNs":{},"dU":{},"stVal":{},"subEna":{},"subID":{},"subQ":{},"subVal":{}},"EnaCls":{"q":{},"stVal":{},"t":{},"blkEna":{},"cdcName":{},"d":{},"dataNs":{},"dU":{},"subEna":{},"subID":{},"subQ":{},"subVal":{}},"EnaOpn":{"q":{},"stVal":{},"t":{},"blkEna":{},"cdcName":{},"d":{},"dataNs":{},"dU":{},"subEna":{},"subID":{},"subQ":{},"subVal":{}}},"GGIO":{}}'
Should we align the tick boxes with the content so that it is centered?
It makes sense for the tick boxes to be on the right in my view but only for where the user can select "on the right things" which they can't once the "level" is already "open".
I'd also like the tick boxes at the top to be sticky so that as I scroll down they retain their position in case I do want a select all.
BUT I never want a "select all", because it has this broad impact across a level of the tree which is hard for users to remember and anticipate when it is "off screen" (one anxiously views the buttons and thinks, "Should I click that, what else might happen? Why don't I just do all of them slowly by hand"). I think what I want is more closely scoped "select all" to the items "at this level from this parent branch" ("Select the children from here") which we can't presently do.
What might help to address this corner is showing (e.g. in brackets) after each of the select all items a number currently selected. And within each tree depth I wonder if we could add a bracket and the number of selected direct children.
I could imagine a nice pane to the right where the nsdoc information showed up as any item was selected in future!
Broadly, I worry that it is still quite slow... I have a small attention span at the best of times and > 2 seconds means I've already switched tabs! By clicking the top buttons, I managed to put it into a "death loop" where the UI no longer updated in Firefox.
It never recovered from the "death loop" and while in it, the rendering of the first few items was all that could be seen and it kept looking different when I tried to scroll up and down (there was no content). There was no browser developer tab errors or any "This tab is consuming vast resources" errors which surprised me.
To get around this I've moved to testing in Chrome rather than Firefox.
The activated items that I have a choice over are shown in the same way as the ones I don't. So CILO > Beh > q, stVal must be selected and I have no ability to deselect. I think the UI should present these slightly differently way - a background or foreground color change perhaps.
What is the meaning of the un-clickable three dots -- does this just mean this is capable of being expanded? It seems a slightly odd metaphor to me and to double up on the expansion arrows.
When I fold back at the root level (by clicking the arrow up on the CILO root node shown here as activated) I would prefer if when losing the down and up arrows on the left everything didn't "jump" over to the left (and then jump back when I click on the up and down arrows on the right).
...More soon...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.