Skip to content

Commit cb4262e

Browse files
tsenonertsenoner
committed
style: update help menu
1 parent a3bbdfa commit cb4262e

File tree

4 files changed

+106
-225
lines changed

4 files changed

+106
-225
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ examples/out/final
3838
# --- scripts ---
3939
scripts
4040
src/protspace/assets/annotate.py
41+
src/protspace/assets/screenshot.png
4142

4243
# Byte-compiled / optimized / DLL files
4344
__pycache__/

‎src/protspace/assets/annotated_image.png

58.8 KB
Loading

‎src/protspace/assets/tmp.png

-450 KB
Binary file not shown.

‎src/protspace/layout_help.py

+105-225
Original file line numberDiff line numberDiff line change
@@ -1,230 +1,110 @@
11
from dash import html
22

3+
# Centralized styles for better maintainability
4+
HELP_MENU_STYLES = {
5+
"section": {"fontSize": "16px", "color": "#383838", "marginLeft": "20px"},
6+
"list": {"marginTop": "0px"},
7+
"overview_item": {"margin": "2px 0"},
8+
"detail_section": {"marginBottom": "20px"},
9+
"section_header": {"marginBottom": "-10px"},
10+
"container": {
11+
"maxHeight": "calc(100vh - 300px)",
12+
"overflowY": "auto"
13+
}
14+
}
315

416
def create_help_menu():
5-
return html.Div(
6-
[
7-
html.H3("ProtSpace Help Guide"),
8-
html.Div(
9-
[
10-
html.H4("Interface Overview"),
11-
html.Div(
12-
[
13-
html.Img(
14-
src="assets/tmp.png",
15-
alt="ProtSpace Interface Overview",
16-
style={
17-
"width": "100%",
18-
"height": "auto",
19-
"cursor": "pointer",
20-
},
21-
),
22-
html.Div(
23-
[
24-
html.P(
25-
[
26-
html.Strong("A"),
27-
": Feature Selection - Choose protein properties for visualization",
28-
]
29-
),
30-
html.P(
31-
[
32-
html.Strong("B"),
33-
": Projection Method - Select dimensionality reduction view",
34-
]
35-
),
36-
html.P(
37-
[
38-
html.Strong("C"),
39-
": Search Bar - Find specific proteins",
40-
]
41-
),
42-
html.P(
43-
[
44-
html.Strong("D"),
45-
": Control Buttons - Settings, download, and help options",
46-
]
47-
),
48-
html.P(
49-
[
50-
html.Strong("E"),
51-
": Interactive Plot - Click, zoom, and explore data points",
52-
]
53-
),
54-
],
55-
# style={
56-
# "fontSize": "12px",
57-
# "backgroundColor": "#f8f9fa",
58-
# "padding": "10px",
59-
# "borderRadius": "5px",
60-
# },
61-
),
62-
],
63-
),
17+
# Define styles once
18+
section_style = HELP_MENU_STYLES["section"]
19+
list_style = HELP_MENU_STYLES["list"]
6420

65-
# Same content as before
66-
html.H4("Core Features"),
67-
html.Ul(
68-
[
69-
html.Li(
70-
[
71-
html.Strong("Feature Selection"),
72-
": Choose protein features from the dropdown to color-code data points. Features represent different protein properties or classifications.",
73-
]
74-
),
75-
html.Li(
76-
[
77-
html.Strong("Projection Views"),
78-
": Switch between different dimensionality reduction visualizations (PCA, UMAP, t-SNE, etc.). 2D and 3D projections available.",
79-
]
80-
),
81-
html.Li(
82-
[
83-
html.Strong("Protein Search"),
84-
": Use the search dropdown to find and highlight specific proteins. Multiple selections supported.",
85-
]
86-
),
87-
]
88-
),
89-
html.H4("Visualization Controls"),
90-
html.Ul(
91-
[
92-
html.Li(
93-
[
94-
html.Strong("Interactive Plots"),
95-
html.Ul(
96-
[
97-
html.Li(
98-
"Click on points to select/deselect proteins"
99-
),
100-
html.Li(
101-
"Hover over points to view protein details"
102-
),
103-
html.Li("Drag to pan, scroll to zoom"),
104-
html.Li("Double-click to reset view"),
105-
]
106-
),
107-
]
108-
),
109-
html.Li(
110-
[
111-
html.Strong("Style Customization (Settings ⚙️)"),
112-
html.Ul(
113-
[
114-
html.Li(
115-
"Change colors for specific feature values"
116-
),
117-
html.Li(
118-
"Modify marker shapes (circle, square, diamond, etc.)"
119-
),
120-
html.Li(
121-
"Styles are saved in the visualization state"
122-
),
123-
]
124-
),
125-
]
126-
),
127-
html.Li(
128-
[
129-
html.Strong("Plot Export"),
130-
html.Ul(
131-
[
132-
html.Li(
133-
"2D plots: SVG format with customizable dimensions"
134-
),
135-
html.Li("3D plots: Interactive HTML files"),
136-
html.Li(
137-
"Set width and height before downloading"
138-
),
139-
]
140-
),
141-
]
142-
),
143-
]
144-
),
145-
html.H4("Structure Visualization"),
146-
html.Ul(
147-
[
148-
html.Li(
149-
[
150-
html.Strong("PDB Viewer"),
151-
html.Ul(
152-
[
153-
html.Li(
154-
"Upload PDB files as ZIP to enable structure viewing"
155-
),
156-
html.Li(
157-
"Click data points to display corresponding structures"
158-
),
159-
html.Li(
160-
"Multiple structures can be viewed simultaneously"
161-
),
162-
html.Li(
163-
"Interactive 3D manipulation of protein structures"
164-
),
165-
]
166-
),
167-
]
168-
)
169-
]
170-
),
171-
html.H4("Data Management"),
172-
html.Ul(
173-
[
174-
html.Li(
175-
[
176-
html.Strong("File Operations"),
177-
html.Ul(
178-
[
179-
html.Li("Save visualization state as JSON"),
180-
html.Li("Load previously saved states"),
181-
html.Li(
182-
"Import new protein structures (ZIP of PDB files)"
183-
),
184-
]
185-
),
186-
]
187-
),
188-
html.Li(
189-
[
190-
html.Strong("Data Types"),
191-
html.Ul(
192-
[
193-
html.Li(
194-
"Supports continuous and categorical features"
195-
),
196-
html.Li(
197-
"Handles missing values (shown as <NaN>)"
198-
),
199-
html.Li(
200-
"Compatible with various dimensionality reduction methods"
201-
),
202-
]
203-
),
204-
]
205-
),
206-
]
207-
),
208-
html.H4("Tips & Shortcuts"),
209-
html.Ul(
210-
[
211-
html.Li(
212-
"Hold Shift while selecting to compare multiple proteins"
213-
),
214-
html.Li("Use browser refresh to reset all selections"),
215-
html.Li(
216-
"Export plots at high resolution by setting large dimensions"
217-
),
218-
html.Li(
219-
"Save visualization state frequently to preserve customizations"
220-
),
221-
]
222-
),
223-
],
224-
style={
225-
"maxHeight": "calc(100vh - 300px)",
226-
"overflowY": "auto",
227-
},
228-
),
229-
]
230-
)
21+
return html.Div([
22+
html.H3("ProtSpace Help Guide"),
23+
html.Div([
24+
html.H4("Interface Overview"),
25+
html.Div([
26+
html.Img(
27+
src="assets/annotated_image.png",
28+
alt="ProtSpace Interface Overview",
29+
style={"width": "100%", "height": "auto"}
30+
),
31+
html.Div([
32+
html.P([html.Strong("A: Feature Selection"), " - Choose between protein properties to visualize"], style=HELP_MENU_STYLES["overview_item"]),
33+
html.P([html.Strong("B: Projection Method"), " - Change between different precomputed projections"], style=HELP_MENU_STYLES["overview_item"]),
34+
html.P([html.Strong("C: Search Function"), " - Find and highlight specific proteins and its 3D structure if provided"], style=HELP_MENU_STYLES["overview_item"]),
35+
html.P([html.Strong("D: Utility Buttons"), " - Help menu, JSON download, JSON upload, zipped PDB upload, marker settings"], style=HELP_MENU_STYLES["overview_item"]),
36+
html.P([html.Strong("E: Interactive Plot"), " - Click, zoom, and explore protein relationships"], style=HELP_MENU_STYLES["overview_item"]),
37+
html.P([html.Strong("F: Export Graph"), " - Save visualization as SVG or HTML"], style=HELP_MENU_STYLES["overview_item"])
38+
], style=HELP_MENU_STYLES["detail_section"]),
39+
40+
# Detailed sections
41+
html.H4("A. Feature Selection", style=HELP_MENU_STYLES["section_header"]),
42+
html.Ul([
43+
html.Li("Switch between features"),
44+
html.Li("Color-code data points based on protein properties"),
45+
html.Li("Missing values shown as <NaN>"),
46+
html.Li("Customize colors and shapes for each feature group using the settings button")
47+
]),
48+
49+
html.H4("B. Projection Method", style=HELP_MENU_STYLES["section_header"]),
50+
html.Ul([
51+
html.Li("Toggle between 2D and 3D visualizations"),
52+
html.Li("PCA: Preserves global structure"),
53+
html.Li("UMAP: Emphasizes local relationships"),
54+
html.Li("PaCMAP: Can emphasizes local and global patterns, based on choosen parameters"),
55+
]),
56+
57+
html.H4("C. Search Functions", style=HELP_MENU_STYLES["section_header"]),
58+
html.Ul([
59+
html.Li("Search by protein identifier"),
60+
html.Li("Select multiple proteins simultaneously"),
61+
html.Li("Highlight selected proteins in plot"),
62+
html.Li("View corresponding 3D structures when available")
63+
]),
64+
65+
html.H4("D. Utility Buttons", style=HELP_MENU_STYLES["section_header"]),
66+
html.Ul([
67+
html.Li([html.Em("Help:"), " Access this guide"]),
68+
html.Li([html.Em("JSON Download:"), " Download JSON file to share with colleugues"]),
69+
html.Li([html.Em("JSON Upload:"), " Upload precomputed JSON file for visualization"]),
70+
html.Li([html.Em("PDB Upload:"), " Add protein structures as a zipped directory with PDB files named by protein identifier"]),
71+
html.Li([html.Em("Settings:"), " Customize marker shapes (circle, square, diamond, etc.) and colors"]),
72+
]),
73+
74+
html.H4("E. Interactive Plot", style={"marginBottom": "5px"}),
75+
html.Div([
76+
html.Strong("2D Plot Navigation", style=section_style),
77+
html.Ul([
78+
html.Li([html.Em("Select & Zoom:"), " Click and hold left mouse button to select an area"]),
79+
html.Li([html.Em("Reset View:"), " Double-click to return to full visualization"]),
80+
], style=list_style),
81+
82+
html.Strong("3D Plot Navigation", style=section_style),
83+
html.Ul([
84+
html.Li([html.Em("Orbital Rotation:"), " Click and hold left mouse button"]),
85+
html.Li([html.Em("Pan:"), " Click and hold right mouse button"]),
86+
html.Li([html.Em("Zoom:"), " Use mouse wheel while cursor is in graph"])
87+
], style=list_style),
88+
89+
html.Strong("Legend Interaction", style=section_style),
90+
html.Ul([
91+
html.Li([html.Em("Hide/Show Groups:"), " Click on a group in legend"]),
92+
html.Li([html.Em("Isolate Group:"), " Double-click on displayed group (double-click again for all groups)"])
93+
], style=list_style),
94+
95+
html.Strong("Data Interaction", style=section_style),
96+
html.Ul([
97+
html.Li([html.Em("View Details:"), " Mouse over points"]),
98+
html.Li([html.Em("Select Molecules:"), " Click on data points to select (shows protein structure if PDB structure provided)"])
99+
], style=list_style)
100+
]),
101+
102+
html.H4("F. Export Graph", style=HELP_MENU_STYLES["section_header"]),
103+
html.Ul([
104+
html.Li("2D plots: SVG format"),
105+
html.Li("3D plots: Interactive HTML files"),
106+
html.Li("Adjustable width and height"),
107+
])
108+
])
109+
], style=HELP_MENU_STYLES["container"])
110+
])

0 commit comments

Comments
 (0)