syd 1.1.0__tar.gz → 1.2.1__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- {syd-1.1.0 → syd-1.2.1}/PKG-INFO +18 -5
- {syd-1.1.0 → syd-1.2.1}/README.md +17 -4
- syd-1.2.1/syd/__init__.py +4 -0
- {syd-1.1.0 → syd-1.2.1}/syd/flask_deployment/deployer.py +107 -23
- {syd-1.1.0 → syd-1.2.1}/syd/flask_deployment/static/css/styles.css +77 -62
- syd-1.2.1/syd/flask_deployment/static/css/viewer.css +48 -0
- syd-1.2.1/syd/flask_deployment/static/js/modules/api.js +89 -0
- syd-1.2.1/syd/flask_deployment/static/js/modules/config.js +22 -0
- syd-1.2.1/syd/flask_deployment/static/js/modules/plot.js +75 -0
- syd-1.2.1/syd/flask_deployment/static/js/modules/state.js +89 -0
- syd-1.2.1/syd/flask_deployment/static/js/modules/system_controls.js +191 -0
- syd-1.2.1/syd/flask_deployment/static/js/modules/ui_controls.js +812 -0
- syd-1.2.1/syd/flask_deployment/static/js/modules/utils.js +49 -0
- syd-1.2.1/syd/flask_deployment/static/js/viewer.js +58 -0
- {syd-1.1.0 → syd-1.2.1}/syd/flask_deployment/templates/index.html +1 -1
- {syd-1.1.0 → syd-1.2.1}/syd/support.py +26 -1
- {syd-1.1.0 → syd-1.2.1}/syd/viewer.py +4 -0
- syd-1.1.0/syd/__init__.py +0 -3
- syd-1.1.0/syd/flask_deployment/static/css/viewer.css +0 -90
- {syd-1.1.0 → syd-1.2.1}/.gitignore +0 -0
- {syd-1.1.0 → syd-1.2.1}/LICENSE +0 -0
- {syd-1.1.0 → syd-1.2.1}/pyproject.toml +0 -0
- {syd-1.1.0 → syd-1.2.1}/syd/flask_deployment/__init__.py +0 -0
- {syd-1.1.0 → syd-1.2.1}/syd/flask_deployment/static/__init__.py +0 -0
- /syd-1.1.0/syd/flask_deployment/static/js/viewer.js → /syd-1.2.1/syd/flask_deployment/static/js/old_viewer.js +0 -0
- {syd-1.1.0 → syd-1.2.1}/syd/flask_deployment/templates/__init__.py +0 -0
- {syd-1.1.0 → syd-1.2.1}/syd/flask_deployment/testing_principles.md +0 -0
- {syd-1.1.0 → syd-1.2.1}/syd/notebook_deployment/__init__.py +0 -0
- {syd-1.1.0 → syd-1.2.1}/syd/notebook_deployment/deployer.py +0 -0
- {syd-1.1.0 → syd-1.2.1}/syd/notebook_deployment/widgets.py +0 -0
- {syd-1.1.0 → syd-1.2.1}/syd/parameters.py +0 -0
{syd-1.1.0 → syd-1.2.1}/PKG-INFO
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Metadata-Version: 2.4
|
|
2
2
|
Name: syd
|
|
3
|
-
Version: 1.1
|
|
3
|
+
Version: 1.2.1
|
|
4
4
|
Summary: A Python package for making GUIs for data science easy.
|
|
5
5
|
Project-URL: Homepage, https://github.com/landoskape/syd
|
|
6
6
|
Author-email: Andrew Landau <andrew+tyler+landau+getridofthisanddtheplusses@gmail.com>
|
|
@@ -201,7 +201,21 @@ This project is licensed under the GNU General Public License v3.0 - see the [LI
|
|
|
201
201
|
|
|
202
202
|
## Contributing
|
|
203
203
|
|
|
204
|
-
Contributions are welcome!
|
|
204
|
+
Contributions are welcome! If you have an idea for an improvement or a bug report, please let us know by opening an
|
|
205
|
+
issue on the [github issues page](https://github.com/landoskape/syd/issues). You can also contribute code by submitting
|
|
206
|
+
a pull request. Here are some guidelines for contributing:
|
|
207
|
+
|
|
208
|
+
### 1. Reporting Bugs
|
|
209
|
+
If you find a bug, (e.g. any error or strange behavior that is not expected), please let us know by opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
|
|
210
|
+
|
|
211
|
+
### 2. Suggesting Features
|
|
212
|
+
If you have an idea for a feature or improvement, please let tell us. Opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
|
|
213
|
+
|
|
214
|
+
### 3. Improvements to the Documentation
|
|
215
|
+
A package is only as good as its documentation. If you think the documentation is missing something, confusing, or could be improved in any way, please let us know by opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
|
|
216
|
+
|
|
217
|
+
### 4. Contributing Code
|
|
218
|
+
If you want to contribute code (good for you!), here's how you can do it:
|
|
205
219
|
|
|
206
220
|
1. Fork the repository
|
|
207
221
|
2. Create a new branch (`git checkout -b feature/amazing-feature`)
|
|
@@ -211,7 +225,7 @@ Contributions are welcome! Here's how you can help:
|
|
|
211
225
|
6. Push to the branch (`git push origin feature/amazing-feature`)
|
|
212
226
|
7. Open a Pull Request online
|
|
213
227
|
|
|
214
|
-
Please make sure to update tests as appropriate and adhere to the existing coding style (black, line-length=88, other style guidelines not capture by black, generally following pep8 guidelines). Try to make the code coverage report improve or stay the same rather than decrease (right now the deployment system isn't covered by tests).
|
|
228
|
+
Please make sure to update tests as appropriate and adhere to the existing coding style (black, line-length=88, other style guidelines not capture by black, generally following pep8 guidelines). Try to make the code coverage report improve or stay the same rather than decrease (right now the deployment system isn't covered by tests). There aren't any precommit hooks or anything so you're responsible for checking this yourself. You can process the code with black as follows:
|
|
215
229
|
```bash
|
|
216
230
|
pip install black
|
|
217
231
|
black . # from the root directory of the repo
|
|
@@ -228,5 +242,4 @@ black . # from the root directory of the repo
|
|
|
228
242
|
- [ ] Export lite: export the viewer as a HTML/Java package that contains an incomplete set of renderings of figures -- using a certain set of parameters.
|
|
229
243
|
- [ ] Export full: export the viewer in a way that contains the data to give full functionality.
|
|
230
244
|
- [ ] Idea for sharing: https://github.com/analyticalmonk/awesome-neuroscience, https://github.com/fasouto/awesome-dataviz
|
|
231
|
-
- [ ] The handling of value in Selection parameters is kind of weird.... I think we need to think more about what to do for fails!!!!
|
|
232
|
-
- [ ] Range parameters render poorly in browser mode.
|
|
245
|
+
- [ ] The handling of value in Selection parameters is kind of weird.... I think we need to think more about what to do for fails!!!!
|
|
@@ -171,7 +171,21 @@ This project is licensed under the GNU General Public License v3.0 - see the [LI
|
|
|
171
171
|
|
|
172
172
|
## Contributing
|
|
173
173
|
|
|
174
|
-
Contributions are welcome!
|
|
174
|
+
Contributions are welcome! If you have an idea for an improvement or a bug report, please let us know by opening an
|
|
175
|
+
issue on the [github issues page](https://github.com/landoskape/syd/issues). You can also contribute code by submitting
|
|
176
|
+
a pull request. Here are some guidelines for contributing:
|
|
177
|
+
|
|
178
|
+
### 1. Reporting Bugs
|
|
179
|
+
If you find a bug, (e.g. any error or strange behavior that is not expected), please let us know by opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
|
|
180
|
+
|
|
181
|
+
### 2. Suggesting Features
|
|
182
|
+
If you have an idea for a feature or improvement, please let tell us. Opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
|
|
183
|
+
|
|
184
|
+
### 3. Improvements to the Documentation
|
|
185
|
+
A package is only as good as its documentation. If you think the documentation is missing something, confusing, or could be improved in any way, please let us know by opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
|
|
186
|
+
|
|
187
|
+
### 4. Contributing Code
|
|
188
|
+
If you want to contribute code (good for you!), here's how you can do it:
|
|
175
189
|
|
|
176
190
|
1. Fork the repository
|
|
177
191
|
2. Create a new branch (`git checkout -b feature/amazing-feature`)
|
|
@@ -181,7 +195,7 @@ Contributions are welcome! Here's how you can help:
|
|
|
181
195
|
6. Push to the branch (`git push origin feature/amazing-feature`)
|
|
182
196
|
7. Open a Pull Request online
|
|
183
197
|
|
|
184
|
-
Please make sure to update tests as appropriate and adhere to the existing coding style (black, line-length=88, other style guidelines not capture by black, generally following pep8 guidelines). Try to make the code coverage report improve or stay the same rather than decrease (right now the deployment system isn't covered by tests).
|
|
198
|
+
Please make sure to update tests as appropriate and adhere to the existing coding style (black, line-length=88, other style guidelines not capture by black, generally following pep8 guidelines). Try to make the code coverage report improve or stay the same rather than decrease (right now the deployment system isn't covered by tests). There aren't any precommit hooks or anything so you're responsible for checking this yourself. You can process the code with black as follows:
|
|
185
199
|
```bash
|
|
186
200
|
pip install black
|
|
187
201
|
black . # from the root directory of the repo
|
|
@@ -198,5 +212,4 @@ black . # from the root directory of the repo
|
|
|
198
212
|
- [ ] Export lite: export the viewer as a HTML/Java package that contains an incomplete set of renderings of figures -- using a certain set of parameters.
|
|
199
213
|
- [ ] Export full: export the viewer in a way that contains the data to give full functionality.
|
|
200
214
|
- [ ] Idea for sharing: https://github.com/analyticalmonk/awesome-neuroscience, https://github.com/fasouto/awesome-dataviz
|
|
201
|
-
- [ ] The handling of value in Selection parameters is kind of weird.... I think we need to think more about what to do for fails!!!!
|
|
202
|
-
- [ ] Range parameters render poorly in browser mode.
|
|
215
|
+
- [ ] The handling of value in Selection parameters is kind of weird.... I think we need to think more about what to do for fails!!!!
|
|
@@ -6,7 +6,6 @@ from dataclasses import dataclass
|
|
|
6
6
|
import matplotlib as mpl
|
|
7
7
|
import matplotlib.pyplot as plt
|
|
8
8
|
import io
|
|
9
|
-
import time
|
|
10
9
|
import webbrowser
|
|
11
10
|
import threading
|
|
12
11
|
import socket
|
|
@@ -20,7 +19,7 @@ from flask import (
|
|
|
20
19
|
jsonify,
|
|
21
20
|
render_template,
|
|
22
21
|
)
|
|
23
|
-
from werkzeug.serving import
|
|
22
|
+
from werkzeug.serving import make_server
|
|
24
23
|
|
|
25
24
|
# Use Deployer base class
|
|
26
25
|
from ..viewer import Viewer
|
|
@@ -43,6 +42,55 @@ from ..support import ParameterUpdateWarning, plot_context
|
|
|
43
42
|
mpl.use("Agg")
|
|
44
43
|
|
|
45
44
|
|
|
45
|
+
class ServerManager:
|
|
46
|
+
def __init__(self):
|
|
47
|
+
self.servers: dict[int, "ServerThread"] = {}
|
|
48
|
+
|
|
49
|
+
def register_server(self, server: "ServerThread", port: int):
|
|
50
|
+
self.servers[port] = server
|
|
51
|
+
|
|
52
|
+
def close_app(self, port: int | None = None):
|
|
53
|
+
if port is None:
|
|
54
|
+
for server in self.servers.values():
|
|
55
|
+
server.shutdown()
|
|
56
|
+
self.servers.clear()
|
|
57
|
+
else:
|
|
58
|
+
if port in self.servers:
|
|
59
|
+
self.servers[port].shutdown()
|
|
60
|
+
del self.servers[port]
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
server_manager = ServerManager()
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
class ServerThread(threading.Thread):
|
|
67
|
+
def __init__(self, host: str, port: int, app, debug: bool):
|
|
68
|
+
super().__init__(daemon=True)
|
|
69
|
+
self.server = make_server(host, port, app, threaded=True)
|
|
70
|
+
self.port = port
|
|
71
|
+
self.debug = debug
|
|
72
|
+
self.ready = threading.Event()
|
|
73
|
+
|
|
74
|
+
num_open_servers = len(server_manager.servers)
|
|
75
|
+
if num_open_servers >= 10:
|
|
76
|
+
open_servers = "\n".join([f"{port}" for port in server_manager.servers])
|
|
77
|
+
print(
|
|
78
|
+
f"\nYou have {num_open_servers} open servers!\n"
|
|
79
|
+
f"Open servers:\n{open_servers}\n"
|
|
80
|
+
"You can close them with syd.close_servers() or a particular one with syd.close_servers(port).\n"
|
|
81
|
+
"To see a list, use: syd.show_open_servers()."
|
|
82
|
+
)
|
|
83
|
+
|
|
84
|
+
def run(self):
|
|
85
|
+
server_manager.register_server(self, self.port)
|
|
86
|
+
self.ready.set()
|
|
87
|
+
self.server.serve_forever()
|
|
88
|
+
|
|
89
|
+
def shutdown(self):
|
|
90
|
+
# Call this to stop the server cleanly
|
|
91
|
+
self.server.shutdown()
|
|
92
|
+
|
|
93
|
+
|
|
46
94
|
@dataclass
|
|
47
95
|
class FlaskLayoutConfig:
|
|
48
96
|
"""Configuration for the Flask viewer layout."""
|
|
@@ -80,6 +128,7 @@ class FlaskDeployer:
|
|
|
80
128
|
port: Optional[int] = None,
|
|
81
129
|
open_browser: bool = True,
|
|
82
130
|
update_threshold: float = 1.0,
|
|
131
|
+
timeout_threshold: float = 10.0,
|
|
83
132
|
):
|
|
84
133
|
"""
|
|
85
134
|
Initialize the Flask deployer.
|
|
@@ -110,11 +159,14 @@ class FlaskDeployer:
|
|
|
110
159
|
Whether to open the web application in a browser tab (default: True).
|
|
111
160
|
update_threshold : float, optional
|
|
112
161
|
Time in seconds to wait before showing the loading indicator (default: 1.0)
|
|
162
|
+
timeout_threshold : float, optional
|
|
163
|
+
Time in seconds to wait for the browser to open (default: 10.0).
|
|
113
164
|
"""
|
|
114
165
|
self.viewer = viewer
|
|
115
166
|
self.suppress_warnings = suppress_warnings
|
|
116
167
|
self._updating = False # Flag to check circular updates
|
|
117
168
|
self.update_threshold = update_threshold # Store update threshold
|
|
169
|
+
self.timeout_threshold = timeout_threshold # Store timeout threshold
|
|
118
170
|
|
|
119
171
|
# Flask specific configurations
|
|
120
172
|
self.config = FlaskLayoutConfig(
|
|
@@ -324,7 +376,6 @@ class FlaskDeployer:
|
|
|
324
376
|
host: str = "127.0.0.1",
|
|
325
377
|
port: Optional[int] = None,
|
|
326
378
|
open_browser: bool = True,
|
|
327
|
-
**kwargs,
|
|
328
379
|
) -> None:
|
|
329
380
|
"""Starts the Flask development server."""
|
|
330
381
|
if not self.app:
|
|
@@ -338,26 +389,59 @@ class FlaskDeployer:
|
|
|
338
389
|
self.url = f"http://{self.host}:{self.port}"
|
|
339
390
|
print(f" * Syd Flask server running on {self.url}")
|
|
340
391
|
|
|
341
|
-
if open_browser:
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
#
|
|
350
|
-
#
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
392
|
+
# if open_browser:
|
|
393
|
+
|
|
394
|
+
# def wait_until_responsive(url, timeout=self.timeout_threshold):
|
|
395
|
+
# start_time = time.time()
|
|
396
|
+
# while time.time() - start_time < timeout:
|
|
397
|
+
# try:
|
|
398
|
+
# r = requests.get(url, timeout=0.5)
|
|
399
|
+
# if r.status_code == 200:
|
|
400
|
+
# return True
|
|
401
|
+
# except requests.exceptions.RequestException:
|
|
402
|
+
# pass
|
|
403
|
+
# time.sleep(0.1)
|
|
404
|
+
# return False
|
|
405
|
+
|
|
406
|
+
# def open_browser_tab_when_ready():
|
|
407
|
+
# if wait_until_responsive(self.url):
|
|
408
|
+
# out = webbrowser.open(self.url, new=1, autoraise=True)
|
|
409
|
+
# else:
|
|
410
|
+
# print(
|
|
411
|
+
# f"Could not open browser: server at {self.url} not responding."
|
|
412
|
+
# f"Increase the timeout_threshold to fix this! It's set to {self.timeout_threshold} seconds."
|
|
413
|
+
# "You can do this from viewer.show(timeout_threshold=...) or in the FlaskDeployer constructor."
|
|
414
|
+
# "Also, this is unexpected so please report this issue on GitHub."
|
|
415
|
+
# )
|
|
416
|
+
|
|
417
|
+
# threading.Thread(target=open_browser_tab_when_ready, daemon=True).start()
|
|
418
|
+
|
|
419
|
+
# # Run the Flask server using Werkzeug's run_simple
|
|
420
|
+
# # Pass debug status to run_simple for auto-reloading
|
|
421
|
+
# run_simple(
|
|
422
|
+
# self.host,
|
|
423
|
+
# self.port,
|
|
424
|
+
# self.app,
|
|
425
|
+
# use_reloader=False,
|
|
426
|
+
# use_debugger=self.debug,
|
|
427
|
+
# )
|
|
428
|
+
|
|
429
|
+
# 1) Spin up the server thread
|
|
430
|
+
srv_thread = ServerThread(self.host, self.port, self.app, debug=self.debug)
|
|
431
|
+
srv_thread.start()
|
|
432
|
+
|
|
433
|
+
# 2) Wait for the socket‐bind event (not for an HTTP 200)
|
|
434
|
+
if not srv_thread.ready.wait(timeout=self.timeout_threshold):
|
|
435
|
+
print(
|
|
436
|
+
f"[!] Server did not bind within {self.timeout_threshold:.1f}s; it may already be in use."
|
|
437
|
+
)
|
|
438
|
+
else:
|
|
439
|
+
# 3) Now we know the app is truly listening; open a focused window
|
|
440
|
+
if open_browser:
|
|
441
|
+
webbrowser.open(self.url, new=1, autoraise=True)
|
|
359
442
|
|
|
360
|
-
|
|
443
|
+
# 4) Keep the thread handle around so you can call srv_thread.shutdown()
|
|
444
|
+
self._server_thread = srv_thread
|
|
361
445
|
|
|
362
446
|
def deploy(self) -> None:
|
|
363
447
|
"""
|
|
@@ -607,7 +691,7 @@ class FlaskDeployer:
|
|
|
607
691
|
)
|
|
608
692
|
|
|
609
693
|
|
|
610
|
-
def _find_available_port(start_port=5000, max_attempts=
|
|
694
|
+
def _find_available_port(start_port=5000, max_attempts=1000):
|
|
611
695
|
"""
|
|
612
696
|
Find an available port starting from start_port.
|
|
613
697
|
(Identical to original)
|
|
@@ -92,33 +92,8 @@ input[type="number"] {
|
|
|
92
92
|
box-sizing: border-box;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
/* Range inputs */
|
|
96
95
|
input[type="range"] {
|
|
97
96
|
width: 100%;
|
|
98
|
-
height: 12px;
|
|
99
|
-
background: #ddd;
|
|
100
|
-
border-radius: 3px;
|
|
101
|
-
outline: none;
|
|
102
|
-
margin: 5px 0;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
input[type="range"]::-webkit-slider-thumb {
|
|
106
|
-
-webkit-appearance: none;
|
|
107
|
-
width: 18px;
|
|
108
|
-
height: 18px;
|
|
109
|
-
border-radius: 50%;
|
|
110
|
-
background: #3f51b5;
|
|
111
|
-
cursor: pointer;
|
|
112
|
-
border: 1px solid #2c3e90;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
input[type="range"]::-moz-range-thumb {
|
|
116
|
-
width: 18px;
|
|
117
|
-
height: 18px;
|
|
118
|
-
border-radius: 50%;
|
|
119
|
-
background: #3f51b5;
|
|
120
|
-
cursor: pointer;
|
|
121
|
-
border: 1px solid #2c3e90;
|
|
122
97
|
}
|
|
123
98
|
|
|
124
99
|
/* Checkbox styling */
|
|
@@ -184,6 +159,49 @@ button.active {
|
|
|
184
159
|
font-style: italic;
|
|
185
160
|
}
|
|
186
161
|
|
|
162
|
+
/* Style all numeric controls consistently */
|
|
163
|
+
.numeric-control {
|
|
164
|
+
display: flex;
|
|
165
|
+
align-items: center;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.numeric-control input[type="range"] {
|
|
169
|
+
flex: 1;
|
|
170
|
+
-webkit-appearance: none;
|
|
171
|
+
appearance: none;
|
|
172
|
+
height: 6px;
|
|
173
|
+
background: #ddd;
|
|
174
|
+
outline: none;
|
|
175
|
+
border-radius: 3px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.numeric-control input[type="range"]::-webkit-slider-thumb {
|
|
179
|
+
-webkit-appearance: none;
|
|
180
|
+
appearance: none;
|
|
181
|
+
width: 16px;
|
|
182
|
+
height: 16px;
|
|
183
|
+
background: #4a90e2;
|
|
184
|
+
cursor: pointer;
|
|
185
|
+
border-radius: 50%;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.numeric-control input[type="range"]::-moz-range-thumb {
|
|
189
|
+
width: 16px;
|
|
190
|
+
height: 16px;
|
|
191
|
+
background: #4a90e2;
|
|
192
|
+
cursor: pointer;
|
|
193
|
+
border-radius: 50%;
|
|
194
|
+
border: none;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.numeric-control input[type="number"] {
|
|
198
|
+
width: 60px;
|
|
199
|
+
padding: 4px 1px;
|
|
200
|
+
border: 1px solid #ddd;
|
|
201
|
+
border-radius: 1px;
|
|
202
|
+
margin-left: 6px;
|
|
203
|
+
}
|
|
204
|
+
|
|
187
205
|
/* Range slider styles */
|
|
188
206
|
.range-container {
|
|
189
207
|
display: flex;
|
|
@@ -204,79 +222,76 @@ button.active {
|
|
|
204
222
|
|
|
205
223
|
.range-slider-container {
|
|
206
224
|
position: relative;
|
|
207
|
-
margin:
|
|
208
|
-
background: linear-gradient(
|
|
225
|
+
margin: 10px 0 15px 0;
|
|
226
|
+
background: linear-gradient(
|
|
227
|
+
to right,
|
|
209
228
|
#ddd 0%,
|
|
210
229
|
#ddd var(--min-pos, 0%),
|
|
211
|
-
#
|
|
212
|
-
#
|
|
230
|
+
#4a90e2 var(--min-pos, 0%),
|
|
231
|
+
#4a90e2 var(--max-pos, 100%),
|
|
213
232
|
#ddd var(--max-pos, 100%),
|
|
214
233
|
#ddd 100%);
|
|
215
|
-
border-radius:
|
|
216
|
-
height:
|
|
234
|
+
border-radius: 4px;
|
|
235
|
+
height: 6px;
|
|
236
|
+
width: 100%;
|
|
217
237
|
}
|
|
218
238
|
|
|
219
239
|
.range-slider {
|
|
220
240
|
position: absolute;
|
|
221
|
-
top:
|
|
222
|
-
transform: translateY(-50%);
|
|
241
|
+
top: 0;
|
|
223
242
|
left: 0;
|
|
224
243
|
width: 100%;
|
|
225
|
-
|
|
226
|
-
-webkit-appearance: none;
|
|
244
|
+
height: 100%;
|
|
227
245
|
appearance: none;
|
|
228
|
-
|
|
246
|
+
-webkit-appearance: none;
|
|
229
247
|
cursor: pointer;
|
|
248
|
+
background: none;
|
|
230
249
|
margin: 0;
|
|
231
|
-
|
|
250
|
+
padding: 0;
|
|
251
|
+
pointer-events: none;
|
|
232
252
|
}
|
|
233
253
|
|
|
234
254
|
/* Transparent Track for Webkit */
|
|
235
|
-
.range-slider::-webkit-slider-runnable-track {
|
|
255
|
+
.range-slider-container .range-slider::-webkit-slider-runnable-track {
|
|
236
256
|
background: transparent;
|
|
237
|
-
border:
|
|
238
|
-
|
|
257
|
+
border-radius: 2px;
|
|
258
|
+
height: 8px;
|
|
239
259
|
}
|
|
240
260
|
|
|
241
261
|
/* Transparent Track for Firefox */
|
|
242
|
-
.range-slider::-moz-range-track {
|
|
262
|
+
.range-slider-container .range-slider::-moz-range-track {
|
|
243
263
|
background: transparent;
|
|
244
|
-
border:
|
|
245
|
-
|
|
264
|
+
border-radius: 2px;
|
|
265
|
+
height: 8px;
|
|
246
266
|
}
|
|
247
267
|
|
|
248
|
-
.range-slider.
|
|
249
|
-
z-index: 2;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.range-slider::-webkit-slider-thumb {
|
|
268
|
+
.range-slider-container .range-slider::-webkit-slider-thumb {
|
|
253
269
|
pointer-events: auto;
|
|
254
270
|
-webkit-appearance: none;
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
border-radius: 50%;
|
|
259
|
-
background: #3f51b5;
|
|
271
|
+
width: 16px;
|
|
272
|
+
height: 16px;
|
|
273
|
+
background: #4a90e2;
|
|
260
274
|
cursor: pointer;
|
|
261
|
-
border:
|
|
275
|
+
border-radius: 50%;
|
|
276
|
+
margin-top: -4px; /* center on track */
|
|
262
277
|
}
|
|
263
278
|
|
|
264
|
-
.range-slider::-moz-range-thumb {
|
|
279
|
+
.range-slider-container .range-slider::-moz-range-thumb {
|
|
265
280
|
pointer-events: auto;
|
|
266
|
-
width:
|
|
267
|
-
height:
|
|
268
|
-
|
|
269
|
-
background: #3f51b5;
|
|
281
|
+
width: 16px;
|
|
282
|
+
height: 16px;
|
|
283
|
+
background: #4a90e2;
|
|
270
284
|
cursor: pointer;
|
|
271
|
-
border:
|
|
285
|
+
border-radius: 50%;
|
|
286
|
+
margin-top: -4px; /* center on track */
|
|
272
287
|
}
|
|
273
288
|
|
|
274
289
|
.min-slider {
|
|
275
|
-
z-index:
|
|
290
|
+
z-index: 5;
|
|
276
291
|
}
|
|
277
292
|
|
|
278
293
|
.max-slider {
|
|
279
|
-
z-index:
|
|
294
|
+
z-index: 5;
|
|
280
295
|
}
|
|
281
296
|
|
|
282
297
|
#status-display {
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
#viewer-container {
|
|
2
|
+
width: 100%;
|
|
3
|
+
max-width: 100%;
|
|
4
|
+
margin: 0;
|
|
5
|
+
padding: 0;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
display: flex;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
#controls-container {
|
|
11
|
+
padding: 15px;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
overflow-y: auto;
|
|
14
|
+
max-height: 100vh;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#plot-container {
|
|
18
|
+
padding: 15px;
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
#plot-container img {
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
height: auto;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.system-controls {
|
|
31
|
+
margin: 10px 0px;
|
|
32
|
+
padding: 10px;
|
|
33
|
+
background-color: #ffffff;
|
|
34
|
+
border: 1px solid #e5e7eb;
|
|
35
|
+
border-radius: 4px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.parameter-controls {
|
|
39
|
+
padding: 10px;
|
|
40
|
+
background-color: #ffffff;
|
|
41
|
+
border: 1px solid #e5e7eb;
|
|
42
|
+
border-radius: 4px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.section-header {
|
|
46
|
+
margin-bottom: 15px;
|
|
47
|
+
font-size: 16px;
|
|
48
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { updateStatus } from './utils.js';
|
|
2
|
+
import { initializeState, updateStateFromServer } from './state.js';
|
|
3
|
+
import { updatePlot } from './plot.js';
|
|
4
|
+
import { setUpdateThreshold } from './config.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Fetch initial parameter information from the server.
|
|
8
|
+
* Initializes the state and gets configuration.
|
|
9
|
+
*/
|
|
10
|
+
export async function fetchInitialData() {
|
|
11
|
+
try {
|
|
12
|
+
const response = await fetch('/init-data');
|
|
13
|
+
if (!response.ok) {
|
|
14
|
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
15
|
+
}
|
|
16
|
+
const data = await response.json();
|
|
17
|
+
|
|
18
|
+
setUpdateThreshold(data.config.update_threshold); // Set initial threshold
|
|
19
|
+
initializeState(data); // Initialize state
|
|
20
|
+
|
|
21
|
+
return data; // Return data in case the caller needs it
|
|
22
|
+
} catch (error) {
|
|
23
|
+
console.error('Error initializing viewer:', error);
|
|
24
|
+
updateStatus('Error initializing viewer');
|
|
25
|
+
throw error; // Re-throw the error to signal failure
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Send parameter update to the server.
|
|
31
|
+
* @param {string} name - The name of the parameter.
|
|
32
|
+
* @param {*} value - The new value of the parameter.
|
|
33
|
+
* @param {boolean} [action=false] - Whether this is a button action.
|
|
34
|
+
*/
|
|
35
|
+
export async function updateParameterOnServer(name, value, action = false) {
|
|
36
|
+
try {
|
|
37
|
+
const response = await fetch('/update-param', {
|
|
38
|
+
method: 'POST',
|
|
39
|
+
headers: {
|
|
40
|
+
'Content-Type': 'application/json',
|
|
41
|
+
},
|
|
42
|
+
body: JSON.stringify({
|
|
43
|
+
name: name,
|
|
44
|
+
value: value,
|
|
45
|
+
action: action
|
|
46
|
+
}),
|
|
47
|
+
});
|
|
48
|
+
if (!response.ok) {
|
|
49
|
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
50
|
+
}
|
|
51
|
+
return await response.json(); // Return the server response (likely includes updated state)
|
|
52
|
+
} catch (error) {
|
|
53
|
+
console.error('Error updating parameter:', error);
|
|
54
|
+
updateStatus('Error updating parameter');
|
|
55
|
+
throw error; // Re-throw error
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Handles button click actions by sending to the server.
|
|
61
|
+
* @param {string} name - The name of the button parameter.
|
|
62
|
+
*/
|
|
63
|
+
export function handleButtonClick(name) {
|
|
64
|
+
const button = document.getElementById(`${name}-button`);
|
|
65
|
+
if (!button) return;
|
|
66
|
+
|
|
67
|
+
button.classList.add('active'); // Show button as active
|
|
68
|
+
updateStatus(`Processing ${name}...`);
|
|
69
|
+
|
|
70
|
+
updateParameterOnServer(name, null, true) // Send action=true
|
|
71
|
+
.then(data => {
|
|
72
|
+
button.classList.remove('active');
|
|
73
|
+
if (data.error) {
|
|
74
|
+
console.error('Error:', data.error);
|
|
75
|
+
updateStatus(`Error processing ${name}`);
|
|
76
|
+
} else {
|
|
77
|
+
// Update state with any changes from callbacks
|
|
78
|
+
updateStateFromServer(data.state, data.params);
|
|
79
|
+
// Update plot if needed (plot.js handles this now)
|
|
80
|
+
updatePlot();
|
|
81
|
+
updateStatus('Ready!');
|
|
82
|
+
}
|
|
83
|
+
})
|
|
84
|
+
.catch(error => {
|
|
85
|
+
button.classList.remove('active');
|
|
86
|
+
console.error('Error during button action:', error);
|
|
87
|
+
updateStatus(`Error processing ${name}`);
|
|
88
|
+
});
|
|
89
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export let updateThreshold = 1.0; // Default update threshold
|
|
2
|
+
|
|
3
|
+
// Config object parsed from HTML data attributes
|
|
4
|
+
export const config = {
|
|
5
|
+
controlsPosition: document.getElementById('viewer-config')?.dataset.controlsPosition || 'left',
|
|
6
|
+
controlsWidthPercent: parseInt(document.getElementById('viewer-config')?.dataset.controlsWidthPercent || 20),
|
|
7
|
+
plotMarginPercent: parseInt(document.getElementById('viewer-config')?.dataset.plotMarginPercent || 15)
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// Function to update threshold, needed by system controls
|
|
11
|
+
export function setUpdateThreshold(value) {
|
|
12
|
+
updateThreshold = value;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Function to update config values, needed by system controls
|
|
16
|
+
export function setConfigValue(key, value) {
|
|
17
|
+
if (key in config) {
|
|
18
|
+
config[key] = value;
|
|
19
|
+
} else {
|
|
20
|
+
console.warn(`Attempted to set unknown config key: ${key}`);
|
|
21
|
+
}
|
|
22
|
+
}
|