unchartedsoftware / grafer Goto Github PK
View Code? Open in Web Editor NEWLarge graph rendering library.
License: Apache License 2.0
Large graph rendering library.
License: Apache License 2.0
Allow for dynamic expand/collapse interaction of nodes that are in a hierarchical grouping. This is an alternate mode to zoom as the viewport should automatically change to fill to the full visible graph.
Some decisions and unknowns at the moment
When Grafer view is not at the top of window, hover on/off events are misaligned. Clicking events are aligned correctly.
I have attached a minimal example to reproduce:
Add performance metrics so that bottlenecks and limitations can be identified.
Right now the near and far planes are either static or need to to be modified manually, which either cause the graph to go off the far plane and disappear or forces users to set a far plane that is way too far and messes up with rendering depth distances.
A better solution would be to get the camera to modify the near and far rendering distances to always fall within the graph itself, this would result in the best depth rendering while keeping the graph visible at all times.
In the interim, I am using a threshold for the far plane in GraferController
Using a color set should not prevent using color options in layer data (ie. rgb values or hex codes).
// Passing in color mapping here
const colors = [
'#5e81ac',
'#d08770',
'#ebcb8b',
'#81a1c1',
];
new GraferController(canvas, { points, colors layers });
// Prevents ability to change colors in layer data without using mapping
layer.edges.data.push(Object.assign({}, edge, {
sourceColor: '#ebcb8b',
targetColor: '#ebcb8b',
}));
When implementing the ring labels I created a contrastingColor
function that creates a shade of a colour based on a desired contrast level, if the colour passed is dark, the contrasting colour will be light and vice versa.
The current nodes use a static multiplication to define a contrasting colour, they should be switched to use the new method.
When using points
, if you update the layout / positions of the nodes and call GraphController.render(), it does not recognize the changed positions.
There is a viewport.md
file documenting it's API, but it's not linked the API docs / readme
for narrow characters the distortion of a character placed on a ring causes significant visual artifacts. This is less noticeable when using a mono-spaced fonts but it still exists then as well.
Right now the label atlas bakes the background in the texture when enabled. This should not be the case as the same text can't be re-used when it has different background options.
Main thread should remain unblocked while graph is rendering.
// The below code blocks main thread
new GraferController(canvas, { points, layers });
Add support for setting and rendering varying edge widths.
On larger graphs it becomes hard to see the directionality of edges in-flight. There are too many edges and nodes that being able to trace each edges source/target is very difficult.
A possible approach is to support a variation of this animated trip edge type as it provides directionality without the requirement of seeing the source/target.
See (https://deck.gl/examples/trips-layer/):
This issue is opened to discuss possible ways of displaying directionality on larger graphs
Currently when creating a new DebugMenu there is no way to pass TweakPane config arguments:
new DebugMenu(viewport: Viewport);
The tweakpane config is hard coded, preventing users from passing in the HTMLElement container the debug pane should render within:
this.pane = new Tweakpane({ title: 'Debug Menu', expanded: false });
I was testing around grafer on my home computers and I found that on some systems the edges are rendered as single pixel lines, this disables antialias completely and breaks some of the effects that rely on both antialias and bold lines.
This bug happens because much of the implementation of OpenGL (and thus, WebGL) is left to video card vendors and their drivers, so some (most) video cards do not support using GL_LINES
with width higher than 1px.
A plausible solution that I have implemented in the past is pixel projected lines, more info here:
https://mattdesl.svbtle.com/drawing-lines-is-hard
Presently you cannot subscribe to the 'emptyClick' event directly from the GraferController, as with other events (hover, hoverOff, click). Rather you have to dig deep in the controller internals, e.g.:
controller.viewport.graph.picking.on(UX.picking.PickingManager.events.emptyClick, someCallback))
This is not very clear / obvious. Would be simpler and more congruent with other events to do so directly from the controller:
controller.on(UX.picking.PickingManager.events.emptyClick, this.onBackgroundClick.bind(this));
In GraferController API doc (grafer-controller.md), link to GraferControllerOptions is broken:
https://github.com/uncharted-aske/grafer/blob/main/docs/api/grafer-controller.options.md
the docs say it's optional, but don't say what happens if you leave it out.
When you have node labels (point, circle or ring) and to a browser zoom they get lost. In the case of ring labels the whole ring disappears as well.
To support another mode of selection identification want to support a glow effect on a per node basis.
Currently there is no way to draw or remove layers once a graph has been rendered without redrawing all layers. However, this feature would be useful for highlighting nodes/edges.
The following is an example interface:
const controller = new GraferController(canvas, { points, colors, layers });
controller.addLayer(newLayer);
controller.removeLayer(newLayer);
The example previously known as /simple/basic
is now /playground
.
The example used to allow users to load files as nodes/edges layers and display them in grafer + a debug menu. After the last refactor the example is not working anymore, it would be nice to get it working again.
A list of relevant details:
A good new feature would be to allow users to specify data mappings through the UI, but that doesn't need to happen right away.
A problem that occurs with simple blending is that when there is a lot of overdraw the alpha values of the edges need to be lowered too much, this makes the parts with overdraw stand out but the rest of the edges basically disappear. This can create a visually pleasant effect (like smoke) in some areas but hides edge information.
My proposed solution is to take advantage of the double pass rendering implemented for RenderingMode.HIGH
and use the first pass to render to a single channel data texture with pure additive blending (GL_ONE, GL_ONE)
this should create an overdraw texture. The second pass uses this overdraw texture to render the edges in a color selected form a configurable color palette, effectively making the render result of overdraw configurable.
The texture can be cached for use in the other RenderMode
s so depth testing can remail enabled, ovedraw is one of the biggest performance hits when rendering large number of edges, so this would also improve performance.
When used in components, there doesn't appear to be a way to detach and destroy the controller when a surrounding component wants to get destroyed.
If you create a grafer instance with the debug menu enabled, then create another to replace it, the original debug and now a second one overlaid on the first are present. Ideally the first menu should be removed automatically, or we should have an API method to remove / destroy it.
See comments on PR #24
Add ability to get hover events over edges, for e.g. highlighting edges or showing tooltips.
Passing in points argument with NodeIds layer as follows: new GraferController(canvas, { points: nodes, layers })
yields unexpected behaviour. See below:
See attached code snippet to reproduce (can be run in Grafer examples by replacing original nodeID.ts file):
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.