Comments (5)
matt-sd-watson
commented on June 12, 2024
1
I have found a possible solution to the problem, which is to modify the truthy value for uirevision in the layout if it has already been set:
cur_canvas['layout']['uirevision'] = True if cur_canvas['layout']['uirevision'] not in [True] else "clear_shapes"
In subsequent updates to the canvas, the uirevision parameter is tracked if it is truthy, or set to True if it doesn't exist (i.e. fresh canvas). Using this, the phantom shape no longer appears when shapes are deleted and the ui status such as zoom is maintained on canvas edits.
from dash.
alexcjohnson
commented on June 12, 2024
Bizarre. The fact that this shape is covering the middle half of the plot in each direction implies that it has no x or y coordinates, so it gets 1/4->3/4 as defaults. But the blue color isn't a default unless it's in a template somewhere...
Perhaps the next step debugging is to open the JS console when you see this, and type:
gd = document.querySelector('.js-plotly-plot'); // assuming this is the only or at least first plot on the page
console.log(JSON.stringify(gd.layout.shapes, null, 2));
console.log(JSON.stringify(gd._fullLayout.shapes, null, 2));
from dash.
matt-sd-watson
commented on June 12, 2024
Here is the output for this graph state:
Console output of console.log(JSON.stringify(gd.layout.shapes, null, 2));:
[
{
"editable": true,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"label": {
"text": "",
"texttemplate": ""
},
"layer": "above",
"line": {
"color": "white",
"dash": "solid",
"width": 4
},
"opacity": 1,
"path": "M304.5304878048781,172.82317073170734L263.3719512195122,179.22560975609758L235.01829268292684,189.28658536585368L216.72560975609758,205.75000000000003L205.75000000000003,231.359756097561L203.9207317073171,255.14024390243904L211.23780487804882,271.6036585365854L232.27439024390247,286.2378048780488L256.0548780487805,292.640243902439L291.7256097560976,290.8109756097561L320.9939024390244,282.5792682926829L331.0548780487805,274.3475609756098Z",
"type": "path",
"xref": "x",
"yref": "y"
},
{
"editable": true,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"label": {
"text": "",
"texttemplate": ""
},
"layer": "above",
"line": {
"color": "white",
"dash": "solid",
"width": 4
},
"opacity": 1,
"path": "M455.4451219512195,153.6158536585366L420.6890243902439,163.6768292682927L398.7378048780488,174.65243902439028L385.0182926829268,191.11585365853662L382.2743902439025,204.83536585365857L389.5914634146342,221.2987804878049L416.1158536585366,244.16463414634146L439.8963414634147,256.969512195122L467.3353658536586,259.7134146341463L489.28658536585374,254.22560975609755L499.34756097560984,248.7378048780488Z",
"type": "path",
"xref": "x",
"yref": "y"
},
{
"editable": true,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"label": {
"text": "",
"texttemplate": ""
},
"layer": "above",
"line": {
"color": "white",
"dash": "solid",
"width": 4
},
"opacity": 1,
"path": "M388.5785530821918,344.70547945205476L417.345676369863,340.5958904109589L455.35937499999994,344.70547945205476L468.71553938356163,352.92465753424653L477.9621147260274,371.417808219178L472.8251284246575,389.9109589041096L455.35937499999994,410.458904109589L426.59225171232873,422.7876712328767L406.0443065068493,425.8698630136986L379.33197773972597,424.8424657534246L376.24978595890406,422.7876712328767Z",
"type": "path",
"xref": "x",
"yref": "y"
},
{
"editable": true,
"label": {
"text": "",
"texttemplate": ""
},
"layer": "above",
"opacity": 1,
"line": {
"dash": "solid"
},
"fillcolor": "rgba(0,0,0,0)",
"fillrule": "evenodd"
}
]
Console output of console.log(JSON.stringify(gd._fullLayout.shapes, null, 2));
[
{
"_input": {
"editable": true,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"label": {
"text": "",
"texttemplate": ""
},
"layer": "above",
"line": {
"color": "white",
"dash": "solid",
"width": 4
},
"opacity": 1,
"path": "M304.5304878048781,172.82317073170734L263.3719512195122,179.22560975609758L235.01829268292684,189.28658536585368L216.72560975609758,205.75000000000003L205.75000000000003,231.359756097561L203.9207317073171,255.14024390243904L211.23780487804882,271.6036585365854L232.27439024390247,286.2378048780488L256.0548780487805,292.640243902439L291.7256097560976,290.8109756097561L320.9939024390244,282.5792682926829L331.0548780487805,274.3475609756098Z",
"type": "path",
"xref": "x",
"yref": "y"
},
"_template": {
"line": {
"color": "#2a3f5f"
}
},
"_index": 0,
"visible": true,
"path": "M304.5304878048781,172.82317073170734L263.3719512195122,179.22560975609758L235.01829268292684,189.28658536585368L216.72560975609758,205.75000000000003L205.75000000000003,231.359756097561L203.9207317073171,255.14024390243904L211.23780487804882,271.6036585365854L232.27439024390247,286.2378048780488L256.0548780487805,292.640243902439L291.7256097560976,290.8109756097561L320.9939024390244,282.5792682926829L331.0548780487805,274.3475609756098Z",
"type": "path",
"editable": true,
"layer": "above",
"opacity": 1,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"line": {
"width": 4,
"color": "white",
"dash": "solid"
},
"xsizemode": "scaled",
"ysizemode": "scaled",
"xref": "x",
"yref": "y",
"label": {
"text": ""
},
"_extremes": {
"x": {
"min": [
{
"val": 203.9207317073171,
"pad": 2,
"extrapad": false
}
],
"max": [
{
"val": 331.0548780487805,
"pad": 2,
"extrapad": false
}
],
"opts": {
"ppad": 2
}
},
"y": {
"min": [
{
"val": 172.82317073170734,
"pad": 2,
"extrapad": false
}
],
"max": [
{
"val": 292.640243902439,
"pad": 2,
"extrapad": false
}
],
"opts": {
"ppad": 2
}
}
}
},
{
"_input": {
"editable": true,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"label": {
"text": "",
"texttemplate": ""
},
"layer": "above",
"line": {
"color": "white",
"dash": "solid",
"width": 4
},
"opacity": 1,
"path": "M455.4451219512195,153.6158536585366L420.6890243902439,163.6768292682927L398.7378048780488,174.65243902439028L385.0182926829268,191.11585365853662L382.2743902439025,204.83536585365857L389.5914634146342,221.2987804878049L416.1158536585366,244.16463414634146L439.8963414634147,256.969512195122L467.3353658536586,259.7134146341463L489.28658536585374,254.22560975609755L499.34756097560984,248.7378048780488Z",
"type": "path",
"xref": "x",
"yref": "y"
},
"_template": {
"line": {
"color": "#2a3f5f"
}
},
"_index": 1,
"visible": true,
"path": "M455.4451219512195,153.6158536585366L420.6890243902439,163.6768292682927L398.7378048780488,174.65243902439028L385.0182926829268,191.11585365853662L382.2743902439025,204.83536585365857L389.5914634146342,221.2987804878049L416.1158536585366,244.16463414634146L439.8963414634147,256.969512195122L467.3353658536586,259.7134146341463L489.28658536585374,254.22560975609755L499.34756097560984,248.7378048780488Z",
"type": "path",
"editable": true,
"layer": "above",
"opacity": 1,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"line": {
"width": 4,
"color": "white",
"dash": "solid"
},
"xsizemode": "scaled",
"ysizemode": "scaled",
"xref": "x",
"yref": "y",
"label": {
"text": ""
},
"_extremes": {
"x": {
"min": [
{
"val": 382.2743902439025,
"pad": 2,
"extrapad": false
}
],
"max": [
{
"val": 499.34756097560984,
"pad": 2,
"extrapad": false
}
],
"opts": {
"ppad": 2
}
},
"y": {
"min": [
{
"val": 153.6158536585366,
"pad": 2,
"extrapad": false
}
],
"max": [
{
"val": 259.7134146341463,
"pad": 2,
"extrapad": false
}
],
"opts": {
"ppad": 2
}
}
}
},
{
"_input": {
"editable": true,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"label": {
"text": "",
"texttemplate": ""
},
"layer": "above",
"line": {
"color": "white",
"dash": "solid",
"width": 4
},
"opacity": 1,
"path": "M388.5785530821918,344.70547945205476L417.345676369863,340.5958904109589L455.35937499999994,344.70547945205476L468.71553938356163,352.92465753424653L477.9621147260274,371.417808219178L472.8251284246575,389.9109589041096L455.35937499999994,410.458904109589L426.59225171232873,422.7876712328767L406.0443065068493,425.8698630136986L379.33197773972597,424.8424657534246L376.24978595890406,422.7876712328767Z",
"type": "path",
"xref": "x",
"yref": "y"
},
"_template": {
"line": {
"color": "#2a3f5f"
}
},
"_index": 2,
"visible": true,
"path": "M388.5785530821918,344.70547945205476L417.345676369863,340.5958904109589L455.35937499999994,344.70547945205476L468.71553938356163,352.92465753424653L477.9621147260274,371.417808219178L472.8251284246575,389.9109589041096L455.35937499999994,410.458904109589L426.59225171232873,422.7876712328767L406.0443065068493,425.8698630136986L379.33197773972597,424.8424657534246L376.24978595890406,422.7876712328767Z",
"type": "path",
"editable": true,
"layer": "above",
"opacity": 1,
"fillcolor": "rgba(0, 0, 0, 0)",
"fillrule": "evenodd",
"line": {
"width": 4,
"color": "white",
"dash": "solid"
},
"xsizemode": "scaled",
"ysizemode": "scaled",
"xref": "x",
"yref": "y",
"label": {
"text": ""
},
"_extremes": {
"x": {
"min": [
{
"val": 376.24978595890406,
"pad": 2,
"extrapad": false
}
],
"max": [
{
"val": 477.9621147260274,
"pad": 2,
"extrapad": false
}
],
"opts": {
"ppad": 2
}
},
"y": {
"min": [
{
"val": 340.5958904109589,
"pad": 2,
"extrapad": false
}
],
"max": [
{
"val": 425.8698630136986,
"pad": 2,
"extrapad": false
}
],
"opts": {
"ppad": 2
}
}
}
},
{
"_input": {
"editable": true,
"label": {
"text": "",
"texttemplate": ""
},
"layer": "above",
"opacity": 1,
"line": {
"dash": "solid"
},
"fillcolor": "rgba(0,0,0,0)",
"fillrule": "evenodd"
},
"_template": {
"line": {
"color": "#2a3f5f"
}
},
"_index": 3,
"visible": true,
"type": "rect",
"editable": true,
"layer": "above",
"opacity": 1,
"fillcolor": "rgba(0,0,0,0)",
"fillrule": "evenodd",
"line": {
"width": 2,
"color": "#2a3f5f",
"dash": "solid"
},
"xsizemode": "scaled",
"ysizemode": "scaled",
"xref": "x",
"x0": 149.5,
"x1": 449.5,
"yref": "y",
"y0": 449.5,
"y1": 149.5,
"label": {
"texttemplate": "",
"text": ""
},
"_extremes": {
"x": {
"min": [
{
"val": 149.5,
"pad": 1,
"extrapad": false
}
],
"max": [
{
"val": 449.5,
"pad": 1,
"extrapad": false
}
],
"opts": {
"ppad": 1
}
},
"y": {
"min": [
{
"val": 149.5,
"pad": 1,
"extrapad": false
}
],
"max": [
{
"val": 449.5,
"pad": 1,
"extrapad": false
}
],
"opts": {
"ppad": 1
}
}
}
}
]
It looks like the phantom shape could be represented by:
{'editable': True, 'label': {'text': '', 'texttemplate': ''}, 'layer': 'above', 'opacity': 1, 'line': {'dash': 'solid'}, 'fillcolor': 'rgba(0,0,0,0)', 'fillrule': 'evenodd'}
However, in a callback, I cannot see this shape, and filtering for correct shapes (such as those with defined types) does not fix the issue:
# invoked in callback before re-rendering: does not solve problem
canvas['layout']['shapes'] = [shape for shape in canvas['layout']['shapes'] if 'type' in shape]
from dash.
matt-sd-watson
commented on June 12, 2024
Pinging to see if there are any additional debugging tips for this. It continues to happen sporadically on shape updates to the canvas.
from dash.
matt-sd-watson
commented on June 12, 2024
This is the change in elements in fig['layout']['shapes'] after clearing, and re-parsing when the phantom shape appears:
# after clearing, right before the graph gets passed back to the client and the shape appears
[]
After the phantom shape appears, re-parsing the dictionary above:
[{'label': {'text': '', 'texttemplate': ''}}]
from dash.
Related Issues (20)
- [Feature Request] Exporting the dev tool callback graph in a standardized graph format
- [BUG] Use of `dash_duo` hangs Github Action until Timeout HOT 1
- [BUG] dbc.Modal(style) is passed to fade-modal-show layer instead modal HOT 1
- [BUG] Persistence failed in component type props
- [BUG] The dash component generation doesn't work for hyphenated props HOT 1
- [BUG] no_update is not allowed as an output to set_progress for background progress
- feat: show electrical ground symbol or similar for callbacks with no output
- [Feature Request] Is there any way to set the local and global effects of dash's callback? HOT 3
- Dropdown changes in Dash 2.17 causing page loading issues in Dash docs
- Dash 2.17.0 prevents some generated App Studio apps from running
- [BUG] set_props called multiple times only keep the last props.
- [BUG] Cannot get Dev Tools to work inside of ASGI / FastAPI application HOT 4
- [BUG] Patch += operation not working on the patch object.
- [BUG] Fix overlay_style in dcc.Loading
- Exception: Access Denied HOT 3
- [BUG] callback dataflow display flickers at certain sizes HOT 6
- [BUG] running does not support wildcards in ids HOT 1
- [Feature Request] Make it possible to disable docstring generation when generating components
- [BUG] No output callbacks with clientside_callback
- [BUG] Background/Long callback does not have access to imported modules when running inside jupyter notebook.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dash.