plotly / plotly/plotly.js

Hover info is sticky on touch interfaces even after the source graph is changed

Abierto
#6,783 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug cs P2 sev-2
Lenguaje dominante
JavaScript
Estrellas
18.3k
Forks
2k
Merge medio
2 d 12 h
PR fusionados (30 d)
28

Descripción

On touch interface, hover info displays when a data point is clicked. This is perfect. Although, the info seems to be sticky even after changing the source graph . I haven’t found a straightforward way to change this. I’ve tried using various parameters like clear_on_unhover, hoverData, hoverinfo, selectedpoints. Looks like the interaction gets captured as a click on touch so I tried to work with properties like clickData.

Below is a minimal working example and and some screenshots to illustrate. The app has a dropdown menu and an a graph. The graph changes with the dropdown selection. The hover info lingers even if the graph is change using the dropdown. Ideally, the label could disappear when the source graph is changed. This would be great for a touch interface friendly UX as the hover label is a nice way to pack in more info on a small display like mobile.

Thanks for looking into this! @Coding-with-Adam

minitest_screenshot

# Import modules
import plotly.graph_objs as go
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output

# App layout 
app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Graph 1', 'value': 1},
            {'label': 'Graph 2', 'value': 2}
        ],
        value=1
    ),
    dcc.Store(id='click-data-store'),
    dcc.Graph(id='graph')
])
  
# Dropdown graph callback
@app.callback(
  Output('graph', 'figure'),
  [Input('dropdown', 'value')]
)
def update_graph(selected_value):
  figure = go.Figure()

  if selected_value == 1:
      figure.add_trace(go.Bar(x=['ABCT','DEFR','GHIP'], y=[4, 5, 6], name='Graph 1'))
  elif selected_value == 2:
      figure.add_trace(go.Bar(x=['JKWW','STVP','CXYZ'], y=[3, 10, 4], name='Graph 2'))
  
  return figure

# Run app
if __name__ == '__main__':
    app.run_server(debug=False, host="0.0.0.0", port=1005)

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza ejecutando la app mínima de Dash del issue en una interfaz táctil, seleccionando un punto de datos y cambiando el gráfico fuente del dropdown. Sigue cómo la actualización del gráfico interactúa con el estado de click o hover capturado; se considera terminado cuando la etiqueta de hover anterior desaparece al cambiar el gráfico fuente sin romper el comportamiento de hover táctil.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript
Área
data-visualization, frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.