Circle, Rectangle, and Line annotations by mggower · Pull Request #98 · sayari-analytics/trellis

mggower · 2024-02-15T19:42:47Z

closes #90

mggower · 2024-02-15T19:44:40Z

src/renderers/webgl/annotations/CircleAnnotationRenderer.ts

would be nice to abstract some geometry render logic so there is less duplicative logic between annotations and nodes/edges

mggower · 2024-02-15T19:45:58Z

src/renderers/webgl/node.ts

+
+  node: Node
+  fill: Circle
+  strokes?: CircleStrokes


conditionally rendering strokes until an object is visible is a perf boost. should consider doing the same for fills

mggower · 2024-02-15T19:46:37Z

src/renderers/webgl/objects/circle/Circle.ts

replaces nodeFill

mggower · 2024-02-15T19:47:01Z

src/renderers/webgl/objects/circle/CircleStrokes.ts

replaces nodeStrokes

mggower · 2024-02-15T19:48:15Z

src/renderers/webgl/textures/RectangleTexture.ts

ended up not using this in favor of Texture.WHITE but kept it around in case there is use for it

mggower · 2024-02-15T19:48:42Z

src/renderers/webgl/utils.ts

moves to utils/webgl

mggower · 2024-02-15T19:50:24Z

src/types/api.ts

  style: AnnotationStyle
 }

-export type TextAnnotation = AnnotationBase<'text'> & {


modeling annotations by geometry and removed TextAnnotation. It is more straight forward to just allow shapes to be filled with text via a content prop if desired.

jameslaneconkling · 2024-03-18T05:08:33Z

src/renderers/webgl/annotations/AnnotationsRenderer.ts

+    }
+
+    for (const annotation of this.annotations) {
+      if (lookup[annotation.id] === undefined && this.lookup[annotation.id]) {


shouldn't the second this.lookup[annotation.id] condition not be necessary? e.g.

for (const annotation of this.annotations) { if (lookup[annotation.id] === undefined) { annotation.delete() } }

?

jameslaneconkling · 2024-03-18T05:38:28Z

src/renderers/webgl/annotations/LineAnnotationRenderer.ts

+  render() {
+    const isVisible = this.visible()
+
+    if (isVisible && this.annotation.content && !this.text) {


other renderer classes initialize and teardown objects in the update method, and only move/mount/unmount in the renderer. my hunch is that that's a better pattern than initialing Text here, and LineStrokes below. might be missing something, though.

In large graphs, there is a sizable effort put on the app to instantiate required objects in each object's renderer; in most of these renderers the resulting object is not visible so the load is unnecessary. There are cases where instantiating 5K+ PIXI.Text objects simultaneously actually leads to crashes. We gain a substantial boost in performance if we lazily create these objects until the moment they are first needed.

It makes sense to me to align this logic with the render's animation frame because this is where we apply the object's position (inclusive of any interpolation) as well as addressing culling/visibility. This allows us to reduce the times we are required to call the visible method.

There is potentially an argument for deferring this lazy instantiation to the RenderObject themselves (i.e. Text, LineStrokes, etc.). However, this would still require creating an internal class instance for every object yet this is likely less of a lift than instantiating any PIXI instance.

~~could rework visible to optionally accept arguments x, y similar to EdgeRenderer so this logic is moved to update~~

The issue with moving this lazy creation to update is that this only executes when the object changes, not when the viewport changes. This means sometimes the RenderObject will not be created on the frame it becomes visible.

jameslaneconkling · 2024-03-18T05:38:49Z

src/renderers/webgl/annotations/LineAnnotationRenderer.ts

+    const shouldStrokesMount = isVisible && this.renderer.zoom > MIN_STROKE_ZOOM
+
+    if (shouldStrokesMount && !this.strokes && this.annotation.style.stroke) {
+      this.strokes = new LineStrokes(this.renderer.annotationsContainer, this.fill, this.annotation.style.stroke).moveTo(this.x, this.y)


jameslaneconkling · 2024-03-18T05:43:34Z

src/renderers/webgl/annotations/RectangleAnnotationRenderer.ts

+    const isVisible = this.visible()
+
+    if (isVisible && this.annotation.content && !this.text) {
+      this.text = new Text(


ditto, feels like initializing (and tearing down) the Text object here, and the RectangleStrokes object below, should happen in the update method. and only mounting/unmounting/moving/resizing should happen at render time.

jameslaneconkling · 2024-03-18T05:52:16Z

src/renderers/webgl/edge.ts

+  private center: PointTuple = [0, 0]
+  private lineSegment: LineSegment
  private hitArea: EdgeHitArea
+  private strokes?: LineStrokes


Is the new LineStrokes object used to support edges with multiple strokes, so an extension of the edge style spec (which currently only supports a single line)? Cool if so.

yes exactly. There is probably some fine tuning to be done here, such as wrapping additional strokes around arrows etc.

jameslaneconkling · 2024-03-18T05:54:28Z

src/renderers/webgl/edge.ts

+    const strokesShouldMount = isVisible && this.renderer.zoom > MIN_STROKE_ZOOM
+
+    if (strokesShouldMount && !this.strokes && this.edge.style?.stroke) {
+      this.strokes = new LineStrokes(this.renderer.edgesContainer, this.lineSegment, this.edge.style.stroke).moveTo(this.x0, this.y0)


ditto, feels like this should be created/torn down in the update method, and only positioned here.

mggower added 11 commits February 13, 2024 10:57

RectangleTexture and createRenderTexture util

411ed39

standardize RenderObject type

0dc8304

replace nodeFill and nodeStrokes with Circle and CircleStrokes

7d10c91

geometry objects: Rectangle and RectangleStrokes

a821fcb

LineSegment, LineStrokes for edges

7aadaf0

begin implementing AnnotationsRenderer

3eb1d1e

RectangleAnnotationRenderer implemented w/o events

86b1d20

CircleAnnotationRenderer with text + no events

b024d7a

LineAnnotationRenderer without events

f9e937a

use basic texture for rectangles

39befbb

lazily instantiate strokes when visible

fe23965

mggower commented Feb 15, 2024

View reviewed changes

src/renderers/webgl/objects/circle/Circle.ts

Copy link
Copy Markdown

Collaborator Author

mggower Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replaces nodeFill

mggower commented Feb 15, 2024

View reviewed changes

src/renderers/webgl/objects/circle/CircleStrokes.ts

Copy link
Copy Markdown

Collaborator Author

mggower Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replaces nodeStrokes

mggower commented Feb 15, 2024

View reviewed changes

src/renderers/webgl/utils.ts

Copy link
Copy Markdown

Collaborator Author

mggower Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moves to utils/webgl

mggower commented Feb 15, 2024

View reviewed changes

Rename arrow.ts to Arrow.ts

a30b7bb

Base automatically changed from feature/assets to master February 26, 2024 11:39

jameslaneconkling reviewed Mar 18, 2024

View reviewed changes

Conversation

mggower commented Feb 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mggower Mar 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mggower commented Feb 15, 2024 •

edited

Loading

mggower Mar 18, 2024 •

edited

Loading