wbreeze / poui Goto Github PK
View Code? Open in Web Editor NEWReact user interface component for specifying partial orders
Home Page: https://wbreeze.github.io/poui/
License: Other
React user interface component for specifying partial orders
Home Page: https://wbreeze.github.io/poui/
License: Other
In the Parto component view implemented by the Poui component, provide a right-aligned area for additional content.
One example would be information about the preference graph, such as counts of outgoing and incoming directed links.
Another example is the button groups asked for by the interaction wrapper of issue #11
Given a parto that contains all of the item keys in one group:
console.log src/tests/PartialOrder/PartialOrderEncompass.test.js:39
PARTO [ [ 'Z', 'R', 'C', 'T', 'L', 'M', 'P', 'A' ] ]
The return from PartialOrder.encompassItems(items, parto);
contains an extra, empty item group:
console.log src/tests/PartialOrder/PartialOrderEncompass.test.js:41
ORDER [ [ 'Z', 'R', 'C', 'T', 'L', 'M', 'P', 'A' ], [] ]
It should return the parto unchanged.
Dragging an item all of the way below the bottom and releasing it causes the item to disappear.
On mobile browsers the drag and drop does not work so well. It's also essentially a hidden feature on desktop browsers that might not be intuitively discovered. (The second is a UI issue that might benefit from some intearction hint.) To provide something visible, and which works on mobile, add buttons to the items that move them up and/or down in the order.
There are two types of up/down. One moves the item into a group with the item or group following it. The other moves the item below the item or group following it. Thus:
On an individual item somewhere in the middle there are four buttons:
If there is no item following (as in the last item) the last two listed buttons ought to appear disabled (not disappear entirely) so as to maintain alignment with the buttons in other items.
Likewise if there is no item preceding (as in the first item) the first two listed buttons ought to appear disabled.
For an item already in a group, which group is somewhere in the middle, there are four buttons: (These might have different appearance; however that is not a requirement.)
The first or last of these ought likewise to be disabled for a group which is first or last in the partial order.
The original sketch-in of usage needs expansion, perhaps with a source code example.
The drag and drop ought not allow reordering within a group. By allowing it, it makes it seem as if the items are changing place of preference when in fact they are not.
Further, it shouldn't allow drop at a particular place in the group, only on the group itself. Fixing this half fixes the first provided an item picked from a group and then dropped in the group causes no change to the sequence of items in the group.
I'm having trouble using the npm published package in another project:
$ parcel watch src/index.js --out-dir app/assets/javascript/parceled
๐จ /Users/dcl/Documents/p.rails/socelect/node_modules/poui/src/index.js:4:16: Unexpected token (4:16)
2 | import ReactDOM from "react-dom";
3 | import App from "./App.js";
> 4 | ReactDOM.render(<App />, document.getElementById("root"));
Make a adjustments to get that straightened out, if needed here.
The PartoWithSelection component doesn't provide means to access the partial ordering. Provide a callback that enables a client to get ordering updates when the ordering changes.
Provide means to present an optional hover "tooltip" that contains additional information about the item. The tooltip ought not to appear (empty) if there is no additional information present.
PR #16 removed drag and drop entirely.
Find an implementation of drag and drop that works well and I can integrate. One possibility that works on mobile https://github.com/clauderic/react-sortable-hoc
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.