Comments (2)
alexcjohnson
commented on May 27, 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 May 27, 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.
Related Issues (20)
- [Feature Request] `dash.callback` should utilize `functools.wraps` HOT 4
- Dangerous link detected Error in Dash Debug Window after upgrading from 2.14.2 to 2.15.0 HOT 17
- [BUG] Duplicate callback outputs HOT 4
- [Feature Request] Allow background callbacks to run in the same process as the main app
- [Feature Request] Ability to prevent newer background callbacks from cancelling older ones if desired HOT 3
- [BUG] Dropdown options not rendering on the UI even though it is generated HOT 1
- [Feature Request] More documentaion for new dash-auth 2.2.0 package
- [BUG] dcc.Tooltip children isn't clickable even with targetable=True HOT 3
- [BUG] extending a trace in callback using extendData property doesn't work for a figure with multi-level axis HOT 1
- [BUG] Callback will not render new data until a delay is introduced HOT 6
- Dangerous link detected error after upgrading to Dash 2.15.0 HOT 3
- When moving the cursor, it will sometimes get stuck
- dash incorrectly marked as vulnerable to GHSA-547x-748v-vp6p via dash-html-components HOT 3
- [BUG] Breaking change for chained callbacks in dash>=2.9.0 HOT 4
- [BUG] DataTable Dropdown Text Deletion Issue HOT 3
- dcc.Input type="color" raises error HOT 4
- [BUG] Weird component redraw issue in dash 2.16 HOT 2
- Add documentation/examples using CeleryManager as background_callback_manager together with Dash Pages HOT 2
- Create Desktop Application
- [BUG] dash_mantine_components can't be found in dash 2.16.0 HOT 6
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.