Comments (5)
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.
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.
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.
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.
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)
- 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 HOT 2
- [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 4
- [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 HOT 1
- [BUG] Background/Long callback does not have access to imported modules when running inside jupyter notebook.
- [BUG] dcc.Upload errors with big files HOT 3
- whitespace on DataTable when merge_duplicate_headers= True
- Address typing issues
- [BUG]: Pattern Matching Callback Renders All Components When Adding New One. HOT 2
- Can't build custom components with react-docgen 7
- CSS styling to dash debug button resets on refresh HOT 1
- [Feature Request] Add `outputs` and `outputs_list` to `window.dash_clientside.callback_context` HOT 1
- [BUG] `id` passed through `dcc.Loading` not visible in DOM HOT 4
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.