1
1
<!DOCTYPE html>
2
2
< html lang ="en ">
3
+
3
4
< head >
4
5
< meta charset ="UTF-8 " />
5
6
< title > CellMap Flow Dashboard</ title >
6
7
<!-- Bootstrap 5 (optional, for styling) -->
7
- < link
8
- href ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css "
9
- rel ="stylesheet "
10
- />
8
+ < link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css " rel ="stylesheet " />
11
9
< link rel ="icon " href ="{{ url_for('static', filename='img/favicon.ico') }} " type ="image/x-icon " />
12
10
< link rel ="stylesheet " href ="{{ url_for('static', filename='css/dark.css') }} " />
13
11
</ head >
12
+
14
13
< body >
15
14
< nav class ="navbar navbar-expand-lg navbar-dark bg-dark ">
16
15
< div class ="container-fluid ">
17
- < img
18
- src ="https://raw.githubusercontent.com/janelia-cellmap/cellmap-flow/refs/heads/main/img/CMFLOW_dark.png "
19
- alt ="CellMap Flow "
20
- width ="200 "
21
- />
22
- < button
23
- class ="btn btn-outline-light "
24
- type ="button "
25
- onclick ="toggleDashboard() "
26
- >
16
+ < img src ="https://raw.githubusercontent.com/janelia-cellmap/cellmap-flow/refs/heads/main/img/CMFLOW_dark.png "
17
+ alt ="CellMap Flow " width ="200 " />
18
+ < button class ="btn btn-outline-light " type ="button " onclick ="toggleDashboard() ">
27
19
Toggle Dashboard
28
20
</ button >
29
21
</ div >
30
22
</ nav >
31
23
32
24
< div class ="row bg-dark text-light " style ="height: 100vh; ">
33
25
< div class ="col-9 " id ="iframe-column ">
34
- < iframe src ="{{ neuroglancer_url }} " style ="width:100%;height:100vh; " title ="Example IFrame " id ="my_iframe ">
26
+ < iframe src ="{{ neuroglancer_url }} " style ="width:100%;height:100vh; " title ="Neuroglancer Data Viewer "
27
+ id ="my_iframe ">
35
28
Your browser does not support iframes.
36
29
</ iframe >
37
30
</ div >
38
31
< div class ="col-3 " id ="dashboard-column ">
39
32
{% include "_dashboard.html" %}
40
33
</ div >
41
-
34
+
42
35
</ div >
43
36
44
- < script
45
- src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js "
46
- > </ script >
47
- < script src ="{{ url_for('static', filename='js/dashboard_script.js') }} "> </ script >
48
- < script src ="https://cdn.jsdelivr.net/npm/skulpt@1.2.0/dist/skulpt.min.js "> </ script >
49
- < script src ="https://cdn.jsdelivr.net/npm/skulpt@1.2.0/dist/skulpt-stdlib.js "> </ script >
50
- <!-- shared_submit.js or inside a <script> tag in your base layout -->
37
+ < script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js "> </ script >
38
+ < script src ="{{ url_for('static', filename='js/dashboard_script.js') }} "> </ script >
39
+ < script src ="https://cdn.jsdelivr.net/npm/skulpt@1.2.0/dist/skulpt.min.js "> </ script >
40
+ < script src ="https://cdn.jsdelivr.net/npm/skulpt@1.2.0/dist/skulpt-stdlib.js "> </ script >
41
+ <!-- shared_submit.js or inside a <script> tag in your base layout -->
51
42
< script >
52
- document . addEventListener ( 'keydown' , function ( event ) {
43
+ document . addEventListener ( 'keydown' , function ( event ) {
53
44
// Check if the key pressed is "Enter"
54
45
if ( event . key === "Enter" ) {
55
46
// Trigger a click event on the button
59
50
document . addEventListener ( "DOMContentLoaded" , function ( ) {
60
51
// Find all elements with id="submitAll" (there could be 2 if both partials exist)
61
52
const submitAllButtons = document . querySelectorAll ( "#submitAll" ) ;
62
-
53
+
63
54
// A single function that merges data & sends the fetch
64
55
function handleSubmitAll ( ) {
65
56
// 1) Gather data from input_norm partial
66
57
const inputNorm = ( window . gatherInputNormData )
67
58
? window . gatherInputNormData ( )
68
59
: { } ;
69
-
60
+
70
61
// 2) Gather data from postprocess partial
71
62
const postprocess = ( window . gatherPostProcessData )
72
63
? window . gatherPostProcessData ( )
73
64
: { } ;
74
-
65
+
75
66
// 3) Build final combined payload
76
67
const finalPayload = {
77
68
input_norm : inputNorm ,
78
69
postprocess : postprocess ,
79
70
} ;
80
-
71
+
81
72
console . log ( "Combined Payload:" , finalPayload ) ;
82
-
73
+
83
74
// 4) Submit via fetch
84
75
fetch ( "/api/process" , {
85
76
method : "POST" ,
94
85
if ( logAreaNorm ) {
95
86
logAreaNorm . value += "Server response:\n" + JSON . stringify ( data , null , 2 ) + "\n" ;
96
87
}
97
-
88
+
98
89
const logAreaPost = document . getElementById ( "submissionLog_postProcess" ) ;
99
90
if ( logAreaPost ) {
100
91
logAreaPost . value += "Server response:\n" + JSON . stringify ( data , null , 2 ) + "\n" ;
105
96
alert ( "Error submitting combined data" ) ;
106
97
} ) ;
107
98
}
108
-
99
+
109
100
// Attach the same handler to each #submitAll
110
101
submitAllButtons . forEach ( ( btn ) => {
111
102
btn . addEventListener ( "click" , handleSubmitAll ) ;
112
103
} ) ;
113
104
} ) ;
114
- </ script >
115
-
105
+ </ script >
106
+
116
107
</ body >
108
+
117
109
</ html >
0 commit comments