magjac / discourse-d3-graphviz Goto Github PK

DOT source code should be hidden by default, but visible if enabled with an option, e.g. by:[dot showDot=true]...[/dot].

systematic reproduction sequence, happens in both Chrome and Firefox

1. Copy paste following empty text in post

[dot]
[code]

[/code]
[/dot]

I think, from there onward, the preview engine is broken, to prove that in two steps
2. copy paste the dot graph inside the previously pasted blocks

digraph G {
node [shape=rect];

subgraph cluster_0 {
style=filled;
color=lightgrey;
node [style=filled,color=white];
a0 -> a1 -> a2 -> a3;
label = "Hello";
}

subgraph cluster_1 {
node [style=filled];
b0 -> b1 -> b2 -> b3;
label = "World";
color=blue
}

start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;

start [shape=Mdiamond];
end [shape=Msquare];
}

nothing appears on the preview, now last step to show that it has nothing to do with what entered, without touching the edited content, open the middle mouse click on the post page link to

3. open the same post page in a new browser window : The preview appears correctly

So a workaround until this is solved is

• Do not type your graph step by step by hand on the post edit with preview window, unless you're aware of the issue and not care about the preview
• do not create an empty graph items
• copy paste the whole characters at once in the edit window [dot][code]graph_text[/code][/dot]

examples :
browser page in a broken state

new browser window

• reproduced on : Firefox 77.0.1 (64-bit) / Chrome Version 83.0.4103.97 (Official Build) (64-bit)

The animated transitions becomes incorrect after events such as:

• Visiting another tab in the browser
• Minimizing the browser

The console shows error messages like:

• TypeError: d is undefined ... render.js:52:14
• TypeError: undefined has no properties ... render.js:52:14
• TypeError: Cannot read property 'key' of undefined ... render.js:52:14

The referenced line is https://github.com/magjac/d3-graphviz/blob/cad62e703d51729d7ec5c5c323fc8abb550b6802/src/render.js#L52

The implementation of #13 considers the whole paragraph when deciding if the graph is visible and animated transitions should run. It should only consider the graph itself. Furthermore, it should run animations if the graph is larger than the visible area and occupies the whole area.

Hi,
I used this theme component in this post
https://forum.graphviz.org/t/d3-graphviz-monitoring-a-smart-home-zigbee-network/180

1. edit preview
   and I some of the issues I had is that the post edit preview did not show the rendered graph, which is not a big deal in itself. I don't remember if the first time on another post, the preview did work or not, but independent from myself, this might lead any user to think that the theme component is not working unless the info is known that the rendering is not to be expected in the post edit preview window.
   I had many other points but partly covered with

• #25
• #22
• #16

an additional one is the

2. user focus
   when scrolling with post with the mouse, and the mouse hits the rendered graph, it steels the mouse wheel focus and start zooming in or out, which is not expected by the user and might decrease the forum usage experience.
   One possibility I can think of is to keep the graph passive by default, maybe a highlight on hover to give a hint about potential interactivity, and then give the focus to the mouse on click, not simply on hover or move.
   I think menu buttons to enable / disable the source code (verbose mode) could be helpful, as whatever the user sets, another viewer could expect it the other way around. even an export svg could be thought of.

The width is also increased through an animated transition. I some cases the rightmost parts of the graph may fade in while temporarily being outside the visible area.

A solution could be to set the SVG width to the same as the rest of the paragraph.

Example of such DOT sources:

[dot]
digraph {
a -> b
}
[/dot]
[dot]
digraph {
a -> b
a -> c
}
[/dot]
[dot]
digraph {
a -> b
a -> c
b -> c
}
[/dot]

Instead, the text is shown without any interpretation.

This problem actually started to happen with a new Discourse version introduced just before 2021-04-13. At that time Discourse showed no error message and rendered nothing in the posts if the discourse-d3-graphviz theme component was used.

At the Graphviz forum, this was discovered 2021-04-13 and then the theme component was simply disabled.

Unfortunately there were other users that were affected by this too. See https://meta.discourse.org/t/d3-graphviz-theme-component/153031/2.

When scrolling through a topic with many posts, some posts stops displaying. The developer console shows this error message:

TypeError: cookedParent.parentElement is null

One such topic is https://forum.graphviz.org/t/node-location-in-diagrammer/176/16.

This warning message is displayed in the console:

decorateCooked` should be supplied with an `id` option to avoid memory leaks. 3 

See https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L228.

Currently, new graphs are rendered for each keystroke which is quite annoying and can cause lagging.

The reason is than DOT source code extraction currently only works within a paragraph.

Today, it's possible to stop the animated transition in the editor, but as soon as you start typing it starts again. This can be quite annoying. All animations shall be paused when the editor is opened and resumed when closed.

E.g. [dot verbose] ... should be the same as [dot verbose=true] ...

This is the same problem as #9, which re-appeared after commit 518ece0 which makes also width increase animated.

I don't remember why I did this. Just reverting it does however not work well because of other changes made in commit f09e91c that fixed a problem with fit and scale not preserved for animated graphs.

I really need to create tests for all these cases.

The width should be relative to the maximum width of a paragraph. The height should be relative to the maximum visible portion of a paragraph.

The animated transitions can sometimes be quite CPU intensive. When the graph is not visible there's no need to continue doping them.

Cases that should be handled:

• The browser window is minimized
• The browser tab is not visible
• The graph has been scrolled out of the visible area