Only one plotly plot is showing despite many uploaded

[binbose]

I am trying to log a 3d scatter plotly plot every nth iteration. I followed this tutorial Log and Track Plots from W&B Experiments. to convert the plot into an HTML, add it to a table and then log it. However, in my wandb dashboard, only a single row shows up, so it seems like the table gets overwritten. Ideally, I would like a slider to go through the plots, but having them all in a table would already be better than what I have right now. Here is my code:

density_plot_wandb_table = wandb.Table(columns=["electron_densities"])
for step in trange(init_step, config.train.n_steps):
    ...
     if step%config.plotting.n_plotting_frequency==0:
            # Create plot
            fig = go.Figure(data=[go.Scatter3d(x=samples[:config.plotting.n_samples, 0],
                                           y=samples[:config.plotting.n_samples, 1],
                                           z=samples[:config.plotting.n_samples,  2],
                                           mode='markers',
                                           marker=dict(
                                             size=1,
                                             color='#636EFA',
                                             opacity=0.2
                                           )
                                           ),
                              go.Scatter3d(x=mol.nuclei_position[:, 0],
                                           y=mol.nuclei_position[:, 1],
                                           z=mol.nuclei_position[:, 2],
                                           mode='markers',
                                           marker=dict(
                                             size=7,
                                             color='crimson',
                                             opacity=1.0
                                           )
                                           )

                              ])
           fig.write_html('{}plots_{}'.format(workdir, step), auto_play=False)
           density_plot_wandb_table.add_data(wandb.Html('{}plots_{}'.format(workdir, step)))
           wandb.log({'Mol': density_plot_wandb_table})

[thanos-wandb]

Hi @binbose thanks for writing in, and the detailed information! Luckily both options are feasible so feel free to choose the one you prefer

The reason that the table rows are overwritten in your case, it’s because inside the loop you can add rows with add_data method, but you only need to log the table once (outside the loop). For the slider option, you will need to omit logging to the table and log the html object directly as: wandb.log({'Mol': wandb.Html(..))

I have adjusted our documentation example to be inside a loop, so that you could accordingly adapt your code:

# Initialize a new run
run = wandb.init(project="log-plotly-fig-tables", name="plotly_html")

# Create a table
table = wandb.Table(columns = ["plotly_figure"])

# Create path for Plotly figure
path_to_plotly_html = "./plotly_figure.html"

for i in range(10):

  # Example Plotly figure
  fig = px.scatter(x = [0, 1, 2, 3, 4], y = [0, 1, 4, 9, 16])

  # Write Plotly figure to HTML
  fig.write_html(path_to_plotly_html, auto_play = False) # Setting auto_play to False prevents animated Plotly charts from playing in the table automatically

  # Add Plotly figure as HTML file into Table
  table.add_data(wandb.Html(path_to_plotly_html))

# Log Table
run.log({"test_table": table})
wandb.finish()

Slider option:

# Initialize a new run
run = wandb.init(project="log-plotly-fig-tables", name="plotly_html")

# Create path for Plotly figure
path_to_plotly_html = "./plotly_figure.html"

for i in range(10):

  # Example Plotly figure
  fig = px.scatter(x = [0, 1, 2, 3, 4], y = [0, 1, 4, 9, 16])

  # Write Plotly figure to HTML
  fig.write_html(path_to_plotly_html, auto_play = False) # Setting auto_play to False prevents animated Plotly charts from playing in the table automatically

  # Log Table
  run.log({"test_slider": wandb.Html(path_to_plotly_html)})

wandb.finish()

I hope this helps, please let us know if you have any further issues or questions.

[binbose]

Hey, thank you for the quick response! With the latter solution, I do get a slider, but the plot is unfortunately not displayed. Instead, it just says: ‘results/plots’ (where I saved the HTML). See the image:

[binbose]

Hey @thanos-wandb , just wondering if you could take another look to see if you know what’s wrong here?

[thanos-wandb]

Hi @binbose thanks for the update, I’ve looked into this and it seems if you check the Files/media folder from the App that your html files are empty, or won’t include any data to be plotted. Could you please check the contents of the generated files in your local disk, do they contain the plot data?

[binbose]

Hey, sorry I found my bug; the file names didn’t end in .html
Thank you for the help!

[thanos-wandb]

Hey @binbose thanks for the update, glad to hear this is now fixed for you! I will close this ticket, and feel free to post here any further questions or issues.