Add script to check performance

tests/peformance2.py

@@ -0,0 +1,121 @@
+"""
+A test application to test the performance of a minimal example that allows
+slicing through a volume using a slider.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Slider(id="slider", min=0, max=256, step=1, value=128, updatemode="drag"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(index) {
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("slider", "value")],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, ori_figure, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (true) {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else {
+ // unfavorable y-axis
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [
+ # Input("index", "data")],
+ Input("slider", "value")
+ ],
+ [
+ State("graph", "figure"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/performance1.py

@@ -0,0 +1,149 @@
+"""
+A test application to test the performance of a few methods to display an image.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+OPTIONS = ["noop", "empty", "heatmap", "heatmapgl", "png", "png not reversed"]
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ dcc.Dropdown(
+ id="dropdown",
+ options=[{"label": name, "value": name} for name in OPTIONS],
+ value="noop",
+ ),
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Interval(id="interval", interval=1),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_list", data=vol),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(_, index) {
+ index += 1;
+ if (index > 200) index = 50;
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("interval", "n_intervals")],
+ [
+ State("index", "data"),
+ ],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, option, ori_figure, data_list, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (!option || option == 'noop') {
+ // noop
+ } else if (option == 'sleep') {
+ while (performance.now() < now + 500) {}
+ } else if (option == 'empty') {
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [];
+ } else if (option == 'heatmap') {
+ let trace = {type: 'heatmap', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'heatmapgl') {
+ let trace = {type: 'heatmapgl', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png not reversed') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ } else {
+ fps_result = "invalid option: " + option;
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [Input("index", "data")],
+ [
+ State("dropdown", "value"),
+ State("graph", "figure"),
+ State("data_list", "data"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/peformance2.py

@@ -0,0 +1,121 @@
+"""
+A test application to test the performance of a minimal example that allows
+slicing through a volume using a slider.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Slider(id="slider", min=0, max=256, step=1, value=128, updatemode="drag"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(index) {
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("slider", "value")],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, ori_figure, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (true) {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else {
+ // unfavorable y-axis
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [
+ # Input("index", "data")],
+ Input("slider", "value")
+ ],
+ [
+ State("graph", "figure"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/performance1.py

@@ -0,0 +1,149 @@
+"""
+A test application to test the performance of a few methods to display an image.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+OPTIONS = ["noop", "empty", "heatmap", "heatmapgl", "png", "png not reversed"]
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ dcc.Dropdown(
+ id="dropdown",
+ options=[{"label": name, "value": name} for name in OPTIONS],
+ value="noop",
+ ),
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Interval(id="interval", interval=1),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_list", data=vol),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(_, index) {
+ index += 1;
+ if (index > 200) index = 50;
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("interval", "n_intervals")],
+ [
+ State("index", "data"),
+ ],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, option, ori_figure, data_list, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (!option || option == 'noop') {
+ // noop
+ } else if (option == 'sleep') {
+ while (performance.now() < now + 500) {}
+ } else if (option == 'empty') {
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [];
+ } else if (option == 'heatmap') {
+ let trace = {type: 'heatmap', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'heatmapgl') {
+ let trace = {type: 'heatmapgl', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png not reversed') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ } else {
+ fps_result = "invalid option: " + option;
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [Input("index", "data")],
+ [
+ State("dropdown", "value"),
+ State("graph", "figure"),
+ State("data_list", "data"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/peformance2.py

@@ -0,0 +1,121 @@
+"""
+A test application to test the performance of a minimal example that allows
+slicing through a volume using a slider.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Slider(id="slider", min=0, max=256, step=1, value=128, updatemode="drag"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(index) {
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("slider", "value")],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, ori_figure, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (true) {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else {
+ // unfavorable y-axis
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [
+ # Input("index", "data")],
+ Input("slider", "value")
+ ],
+ [
+ State("graph", "figure"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/performance1.py

@@ -0,0 +1,149 @@
+"""
+A test application to test the performance of a few methods to display an image.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+OPTIONS = ["noop", "empty", "heatmap", "heatmapgl", "png", "png not reversed"]
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ dcc.Dropdown(
+ id="dropdown",
+ options=[{"label": name, "value": name} for name in OPTIONS],
+ value="noop",
+ ),
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Interval(id="interval", interval=1),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_list", data=vol),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(_, index) {
+ index += 1;
+ if (index > 200) index = 50;
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("interval", "n_intervals")],
+ [
+ State("index", "data"),
+ ],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, option, ori_figure, data_list, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (!option || option == 'noop') {
+ // noop
+ } else if (option == 'sleep') {
+ while (performance.now() < now + 500) {}
+ } else if (option == 'empty') {
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [];
+ } else if (option == 'heatmap') {
+ let trace = {type: 'heatmap', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'heatmapgl') {
+ let trace = {type: 'heatmapgl', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png not reversed') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ } else {
+ fps_result = "invalid option: " + option;
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [Input("index", "data")],
+ [
+ State("dropdown", "value"),
+ State("graph", "figure"),
+ State("data_list", "data"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/peformance2.py

@@ -0,0 +1,121 @@
+"""
+A test application to test the performance of a minimal example that allows
+slicing through a volume using a slider.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Slider(id="slider", min=0, max=256, step=1, value=128, updatemode="drag"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(index) {
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("slider", "value")],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, ori_figure, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (true) {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else {
+ // unfavorable y-axis
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [
+ # Input("index", "data")],
+ Input("slider", "value")
+ ],
+ [
+ State("graph", "figure"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/performance1.py

@@ -0,0 +1,149 @@
+"""
+A test application to test the performance of a few methods to display an image.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+OPTIONS = ["noop", "empty", "heatmap", "heatmapgl", "png", "png not reversed"]
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ dcc.Dropdown(
+ id="dropdown",
+ options=[{"label": name, "value": name} for name in OPTIONS],
+ value="noop",
+ ),
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Interval(id="interval", interval=1),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_list", data=vol),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(_, index) {
+ index += 1;
+ if (index > 200) index = 50;
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("interval", "n_intervals")],
+ [
+ State("index", "data"),
+ ],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, option, ori_figure, data_list, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (!option || option == 'noop') {
+ // noop
+ } else if (option == 'sleep') {
+ while (performance.now() < now + 500) {}
+ } else if (option == 'empty') {
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [];
+ } else if (option == 'heatmap') {
+ let trace = {type: 'heatmap', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'heatmapgl') {
+ let trace = {type: 'heatmapgl', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png not reversed') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ } else {
+ fps_result = "invalid option: " + option;
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [Input("index", "data")],
+ [
+ State("dropdown", "value"),
+ State("graph", "figure"),
+ State("data_list", "data"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/peformance2.py

@@ -0,0 +1,121 @@
+"""
+A test application to test the performance of a minimal example that allows
+slicing through a volume using a slider.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Slider(id="slider", min=0, max=256, step=1, value=128, updatemode="drag"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(index) {
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("slider", "value")],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, ori_figure, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (true) {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else {
+ // unfavorable y-axis
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [
+ # Input("index", "data")],
+ Input("slider", "value")
+ ],
+ [
+ State("graph", "figure"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/performance1.py

@@ -0,0 +1,149 @@
+"""
+A test application to test the performance of a few methods to display an image.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+OPTIONS = ["noop", "empty", "heatmap", "heatmapgl", "png", "png not reversed"]
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ dcc.Dropdown(
+ id="dropdown",
+ options=[{"label": name, "value": name} for name in OPTIONS],
+ value="noop",
+ ),
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Interval(id="interval", interval=1),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_list", data=vol),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(_, index) {
+ index += 1;
+ if (index > 200) index = 50;
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("interval", "n_intervals")],
+ [
+ State("index", "data"),
+ ],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, option, ori_figure, data_list, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (!option || option == 'noop') {
+ // noop
+ } else if (option == 'sleep') {
+ while (performance.now() < now + 500) {}
+ } else if (option == 'empty') {
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [];
+ } else if (option == 'heatmap') {
+ let trace = {type: 'heatmap', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'heatmapgl') {
+ let trace = {type: 'heatmapgl', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png not reversed') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ } else {
+ fps_result = "invalid option: " + option;
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [Input("index", "data")],
+ [
+ State("dropdown", "value"),
+ State("graph", "figure"),
+ State("data_list", "data"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/peformance2.py

@@ -0,0 +1,121 @@
+"""
+A test application to test the performance of a minimal example that allows
+slicing through a volume using a slider.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Slider(id="slider", min=0, max=256, step=1, value=128, updatemode="drag"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(index) {
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("slider", "value")],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, ori_figure, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (true) {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else {
+ // unfavorable y-axis
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [
+ # Input("index", "data")],
+ Input("slider", "value")
+ ],
+ [
+ State("graph", "figure"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/performance1.py

@@ -0,0 +1,149 @@
+"""
+A test application to test the performance of a few methods to display an image.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+OPTIONS = ["noop", "empty", "heatmap", "heatmapgl", "png", "png not reversed"]
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ dcc.Dropdown(
+ id="dropdown",
+ options=[{"label": name, "value": name} for name in OPTIONS],
+ value="noop",
+ ),
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Interval(id="interval", interval=1),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_list", data=vol),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(_, index) {
+ index += 1;
+ if (index > 200) index = 50;
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("interval", "n_intervals")],
+ [
+ State("index", "data"),
+ ],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, option, ori_figure, data_list, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (!option || option == 'noop') {
+ // noop
+ } else if (option == 'sleep') {
+ while (performance.now() < now + 500) {}
+ } else if (option == 'empty') {
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [];
+ } else if (option == 'heatmap') {
+ let trace = {type: 'heatmap', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'heatmapgl') {
+ let trace = {type: 'heatmapgl', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png not reversed') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ } else {
+ fps_result = "invalid option: " + option;
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [Input("index", "data")],
+ [
+ State("dropdown", "value"),
+ State("graph", "figure"),
+ State("data_list", "data"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/peformance2.py

@@ -0,0 +1,121 @@
+"""
+A test application to test the performance of a minimal example that allows
+slicing through a volume using a slider.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Slider(id="slider", min=0, max=256, step=1, value=128, updatemode="drag"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(index) {
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("slider", "value")],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, ori_figure, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (true) {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else {
+ // unfavorable y-axis
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [
+ # Input("index", "data")],
+ Input("slider", "value")
+ ],
+ [
+ State("graph", "figure"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/performance1.py

@@ -0,0 +1,149 @@
+"""
+A test application to test the performance of a few methods to display an image.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+OPTIONS = ["noop", "empty", "heatmap", "heatmapgl", "png", "png not reversed"]
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ dcc.Dropdown(
+ id="dropdown",
+ options=[{"label": name, "value": name} for name in OPTIONS],
+ value="noop",
+ ),
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Interval(id="interval", interval=1),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_list", data=vol),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(_, index) {
+ index += 1;
+ if (index > 200) index = 50;
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("interval", "n_intervals")],
+ [
+ State("index", "data"),
+ ],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, option, ori_figure, data_list, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (!option || option == 'noop') {
+ // noop
+ } else if (option == 'sleep') {
+ while (performance.now() < now + 500) {}
+ } else if (option == 'empty') {
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [];
+ } else if (option == 'heatmap') {
+ let trace = {type: 'heatmap', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'heatmapgl') {
+ let trace = {type: 'heatmapgl', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png not reversed') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ } else {
+ fps_result = "invalid option: " + option;
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [Input("index", "data")],
+ [
+ State("dropdown", "value"),
+ State("graph", "figure"),
+ State("data_list", "data"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/peformance2.py

@@ -0,0 +1,121 @@
+"""
+A test application to test the performance of a minimal example that allows
+slicing through a volume using a slider.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Slider(id="slider", min=0, max=256, step=1, value=128, updatemode="drag"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(index) {
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("slider", "value")],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, ori_figure, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (true) {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else {
+ // unfavorable y-axis
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [
+ # Input("index", "data")],
+ Input("slider", "value")
+ ],
+ [
+ State("graph", "figure"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)

tests/performance1.py

@@ -0,0 +1,149 @@
+"""
+A test application to test the performance of a few methods to display an image.
+"""
+
+import plotly.graph_objects as go
+import dash
+import dash_html_components as html
+import dash_core_components as dcc
+from dash.dependencies import Input, Output, State
+import imageio
+from dash_slicer.utils import img_array_to_uri
+
+
+app = dash.Dash(__name__, update_title=None)
+server = app.server
+
+# Read volumes and create slicer objects
+vol = imageio.volread("imageio:stent.npz")
+
+slices_png = [img_array_to_uri(im) for im in vol]
+
+OPTIONS = ["noop", "empty", "heatmap", "heatmapgl", "png", "png not reversed"]
+
+##
+
+
+fig = go.Figure(data=[])
+fig.update_layout(
+ template=None,
+ margin={"l": 0, "r": 0, "b": 0, "t": 0, "pad": 4},
+ dragmode="pan", # user navigates by panning
+)
+fig.update_xaxes(
+ showgrid=False,
+ showticklabels=False,
+ zeroline=False,
+)
+fig.update_yaxes(
+ showgrid=False,
+ scaleanchor="x",
+ showticklabels=False,
+ zeroline=False,
+ range=[0, 128],
+)
+
+
+app.layout = html.Div(
+ children=[
+ dcc.Dropdown(
+ id="dropdown",
+ options=[{"label": name, "value": name} for name in OPTIONS],
+ value="noop",
+ ),
+ html.Div(id="fps"),
+ html.Br(),
+ dcc.Graph(id="graph", figure=fig),
+ dcc.Interval(id="interval", interval=1),
+ dcc.Store(id="index", data=0),
+ dcc.Store(id="data_list", data=vol),
+ dcc.Store(id="data_png", data=slices_png),
+ ]
+)
+
+##
+
+
+app.clientside_callback(
+ """
+function update_index(_, index) {
+ index += 1;
+ if (index > 200) index = 50;
+ return index;
+}
+""",
+ Output("index", "data"),
+ [Input("interval", "n_intervals")],
+ [
+ State("index", "data"),
+ ],
+)
+
+
+app.clientside_callback(
+ """
+function update_figure(index, option, ori_figure, data_list, data_png) {
+
+ // Get FPS
+ let fps_result = dash_clientside.no_update;
+ let now = performance.now();
+ let etime = now - (window.lasttime || 0);
+ if (etime > 1000) {
+ let nframes = (window.framecount || 0) + 1;
+ fps_result = Math.round(nframes * 1000 / etime) + " FPS";
+ window.lasttime = now;
+ window.framecount = 0;
+ } else {
+ window.framecount += 1;
+ }
+
+ // Get figure
+ let figure_result = dash_clientside.no_update;
+
+ if (!option || option == 'noop') {
+ // noop
+ } else if (option == 'sleep') {
+ while (performance.now() < now + 500) {}
+ } else if (option == 'empty') {
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [];
+ } else if (option == 'heatmap') {
+ let trace = {type: 'heatmap', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'heatmapgl') {
+ let trace = {type: 'heatmapgl', z: data_list[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [128, 0];
+ figure_result.data = [trace];
+ } else if (option == 'png not reversed') {
+ let trace = {type: 'image', source: data_png[index]};
+ figure_result = {...ori_figure};
+ figure_result.layout.yaxis.range = [0, 128];
+ figure_result.data = [trace];
+ } else {
+ fps_result = "invalid option: " + option;
+ }
+ return [figure_result, fps_result];
+}
+""",
+ [Output("graph", "figure"), Output("fps", "children")],
+ [Input("index", "data")],
+ [
+ State("dropdown", "value"),
+ State("graph", "figure"),
+ State("data_list", "data"),
+ State("data_png", "data"),
+ ],
+)
+
+
+if __name__ == "__main__":
+ app.run_server(debug=True)