unchartedsoftware / grafer Goto Github PK

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

1. is the re-layout done on the fly within grafer? or externally?
2. can we support animated transition between the two
3. what are the performance considerations and possible issues

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:

index.html.zip

Add performance metrics so that bottlenecks and limitations can be identified.

1. How many nodes can be updated per second

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

Richard requested support for additional shape support.

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.

1. Gradient colour offset below the main node
2. support for the custom node types as well
3. Shader?

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:

• the example uses tweakpane for GUI, can be replaced, but the debug menu also uses it so it would need to be replaced there too
• all the loaders in their current iteration only support local files (should be ok for this example)
• the loaders were written with a specific data format in mind, they need to be updated to showcase the new flexible data loading system
• the debug menu has not been tested after the refactor so it might need fixing

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 RenderModes 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.

Provide support for arrow edge head types. See below image for possible types:

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):

nodeID.ts.zip