Skip to content

Commit 8ed8f06

Browse files
weber8thomasweber8thomas
committed
refactor: Refactor Dash components to use updated props and styling conventions
1 parent c231f28 commit 8ed8f06

File tree

18 files changed

+826
-200
lines changed

18 files changed

+826
-200
lines changed

‎depictio/dash/assets/app.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,71 @@
1010
font-family: 'Virgil' !important; /* Override any existing font styles */
1111
font-size: '20px' !important; /* Add font size */
1212
}
13+
14+
/* Triangle particle animations for auth background */
15+
@keyframes triangleParticle0 {
16+
0% { transform: translate(0, 0) rotate(0deg); }
17+
25% { transform: translate(20px, -30px) rotate(90deg); }
18+
50% { transform: translate(-10px, -60px) rotate(180deg); }
19+
75% { transform: translate(-30px, -30px) rotate(270deg); }
20+
100% { transform: translate(0, 0) rotate(360deg); }
21+
}
22+
23+
@keyframes triangleParticle1 {
24+
0% { transform: translate(0, 0) rotate(0deg); }
25+
25% { transform: translate(-25px, 15px) rotate(-90deg); }
26+
50% { transform: translate(10px, 40px) rotate(-180deg); }
27+
75% { transform: translate(35px, 10px) rotate(-270deg); }
28+
100% { transform: translate(0, 0) rotate(-360deg); }
29+
}
30+
31+
@keyframes triangleParticle2 {
32+
0% { transform: translate(0, 0) rotate(0deg); }
33+
25% { transform: translate(15px, 25px) rotate(45deg); }
34+
50% { transform: translate(-20px, 50px) rotate(90deg); }
35+
75% { transform: translate(-35px, 25px) rotate(135deg); }
36+
100% { transform: translate(0, 0) rotate(180deg); }
37+
}
38+
39+
@keyframes triangleParticle3 {
40+
0% { transform: translate(0, 0) rotate(0deg); }
41+
25% { transform: translate(30px, -15px) rotate(-45deg); }
42+
50% { transform: translate(60px, 10px) rotate(-90deg); }
43+
75% { transform: translate(30px, 35px) rotate(-135deg); }
44+
100% { transform: translate(0, 0) rotate(-180deg); }
45+
}
46+
47+
@keyframes triangleParticle4 {
48+
0% { transform: translate(0, 0) rotate(0deg); }
49+
25% { transform: translate(-15px, -25px) rotate(120deg); }
50+
50% { transform: translate(5px, -50px) rotate(240deg); }
51+
75% { transform: translate(25px, -25px) rotate(360deg); }
52+
100% { transform: translate(0, 0) rotate(480deg); }
53+
}
54+
55+
@keyframes triangleParticle5 {
56+
0% { transform: translate(0, 0) rotate(0deg); }
57+
25% { transform: translate(-10px, 20px) rotate(-60deg); }
58+
50% { transform: translate(-30px, -10px) rotate(-120deg); }
59+
75% { transform: translate(-10px, -40px) rotate(-180deg); }
60+
100% { transform: translate(0, 0) rotate(-240deg); }
61+
}
62+
63+
.triangle-particle {
64+
animation-timing-function: ease-in-out;
65+
animation-iteration-count: infinite;
66+
}
67+
68+
.auth-modal-content {
69+
position: relative;
70+
z-index: 10000;
71+
backdrop-filter: blur(10px);
72+
background: rgba(255, 255, 255, 0.95);
73+
border-radius: 16px;
74+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
75+
}
76+
77+
/* Dash debug menu styling - no interference with functionality */
78+
.dash-debug-menu__outer {
79+
/* Let Dash handle the debug menu behavior naturally */
80+
}

‎depictio/dash/assets/debug-menu-control.js‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
// Auto-collapse Dash debug menu on page load with better debugging
2+
(function() {
3+
let hasBeenCollapsed = false;
4+
let attempts = 0;
5+
const maxAttempts = 20;
6+
7+
function logDebugInfo() {
8+
console.log('=== DASH DEBUG MENU CONTROL ===');
9+
console.log('Looking for debug menu...');
10+
11+
const debugMenu = document.querySelector('.dash-debug-menu__outer');
12+
console.log('Debug menu found:', !!debugMenu);
13+
14+
if (debugMenu) {
15+
console.log('Debug menu classes:', debugMenu.className);
16+
17+
const toggleButton = debugMenu.querySelector('.dash-debug-menu__toggle');
18+
console.log('Toggle button found:', !!toggleButton);
19+
20+
if (toggleButton) {
21+
console.log('Toggle button classes:', toggleButton.className);
22+
}
23+
24+
const isExpanded = debugMenu.classList.contains('dash-debug-menu__outer--expanded');
25+
console.log('Is expanded:', isExpanded);
26+
}
27+
28+
// Also try alternative selectors
29+
const alternativeSelectors = [
30+
'[class*="dash-debug-menu"]',
31+
'[class*="debug-menu"]',
32+
'[class*="dash-debug"]'
33+
];
34+
35+
alternativeSelectors.forEach(selector => {
36+
const elements = document.querySelectorAll(selector);
37+
if (elements.length > 0) {
38+
console.log(`Found ${elements.length} elements with selector:`, selector);
39+
elements.forEach((el, i) => {
40+
console.log(` Element ${i}:`, el.className);
41+
});
42+
}
43+
});
44+
}
45+
46+
function tryCollapseDebugMenu() {
47+
attempts++;
48+
console.log(`Attempt ${attempts}/${maxAttempts} to collapse debug menu`);
49+
50+
if (hasBeenCollapsed || attempts > maxAttempts) {
51+
return;
52+
}
53+
54+
logDebugInfo();
55+
56+
// Try multiple selectors
57+
const selectors = [
58+
'.dash-debug-menu__outer',
59+
'[class*="dash-debug-menu__outer"]',
60+
'div[class*="debug-menu"]'
61+
];
62+
63+
let debugMenu = null;
64+
for (const selector of selectors) {
65+
debugMenu = document.querySelector(selector);
66+
if (debugMenu) {
67+
console.log('Found debug menu with selector:', selector);
68+
break;
69+
}
70+
}
71+
72+
if (debugMenu) {
73+
const isExpanded = debugMenu.classList.contains('dash-debug-menu__outer--expanded') ||
74+
debugMenu.className.includes('expanded');
75+
76+
console.log('Debug menu expanded state:', isExpanded);
77+
78+
if (isExpanded) {
79+
// Try multiple toggle button selectors
80+
const toggleSelectors = [
81+
'.dash-debug-menu__toggle',
82+
'[class*="dash-debug-menu__toggle"]',
83+
'button[class*="toggle"]'
84+
];
85+
86+
let toggleButton = null;
87+
for (const selector of toggleSelectors) {
88+
toggleButton = debugMenu.querySelector(selector);
89+
if (toggleButton) {
90+
console.log('Found toggle button with selector:', selector);
91+
break;
92+
}
93+
}
94+
95+
if (toggleButton) {
96+
console.log('Clicking toggle button to collapse menu');
97+
toggleButton.click();
98+
hasBeenCollapsed = true;
99+
console.log('Debug menu collapse attempted');
100+
return;
101+
} else {
102+
console.log('No toggle button found');
103+
}
104+
} else {
105+
console.log('Debug menu already collapsed or not expanded');
106+
hasBeenCollapsed = true;
107+
return;
108+
}
109+
} else {
110+
console.log('Debug menu not found yet');
111+
}
112+
113+
// Continue trying if we haven't succeeded
114+
if (!hasBeenCollapsed && attempts < maxAttempts) {
115+
setTimeout(tryCollapseDebugMenu, 250);
116+
}
117+
}
118+
119+
// Start trying when DOM is ready
120+
if (document.readyState === 'loading') {
121+
document.addEventListener('DOMContentLoaded', function() {
122+
setTimeout(tryCollapseDebugMenu, 100);
123+
});
124+
} else {
125+
setTimeout(tryCollapseDebugMenu, 100);
126+
}
127+
128+
// Also try when window loads
129+
window.addEventListener('load', function() {
130+
setTimeout(tryCollapseDebugMenu, 200);
131+
});
132+
133+
// Try with MutationObserver to catch dynamic loading
134+
if (typeof MutationObserver !== 'undefined') {
135+
const observer = new MutationObserver(function(mutations) {
136+
mutations.forEach(function(mutation) {
137+
if (mutation.type === 'childList') {
138+
const addedNodes = Array.from(mutation.addedNodes);
139+
const hasDebugMenu = addedNodes.some(node =>
140+
node.nodeType === 1 &&
141+
(node.className && node.className.includes('dash-debug-menu') ||
142+
node.querySelector && node.querySelector('[class*="dash-debug-menu"]'))
143+
);
144+
145+
if (hasDebugMenu && !hasBeenCollapsed) {
146+
console.log('Debug menu detected via MutationObserver');
147+
setTimeout(tryCollapseDebugMenu, 100);
148+
}
149+
}
150+
});
151+
});
152+
153+
observer.observe(document.body, {
154+
childList: true,
155+
subtree: true
156+
});
157+
158+
// Stop observing after 10 seconds
159+
setTimeout(() => {
160+
observer.disconnect();
161+
}, 10000);
162+
}
163+
})();

‎depictio/dash/layouts/about.py‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@
66
from depictio.dash.colors import colors # Import our color palette
77

88
# Create a Stack to vertically arrange all elements with proper spacing
9-
layout = html.Div(
10-
[
11-
dmc.Container(
12-
dmc.Stack(
13-
gap="xl", # Extra large spacing between stack items
14-
children=[
9+
layout = dmc.Container(
10+
dmc.Stack(
11+
gap="xl", # Extra large spacing between stack items
12+
children=[
1513
# First section: Main cards (GitHub and Documentation)
1614
dmc.Paper(
1715
p="xl", # Extra large padding
@@ -30,15 +28,14 @@
3028
),
3129
# Main cards in a 2-column grid
3230
dmc.SimpleGrid(
33-
cols=2, # Number of columns in the grid
31+
# cols=2, # Number of columns in the grid
3432
spacing="xl", # Space between the cards
35-
breakpoints=[
36-
{
37-
"maxWidth": 980,
38-
"cols": 1,
39-
"spacing": "md",
40-
}, # Responsive design: 1 column on smaller screens
41-
],
33+
cols={
34+
"base": 1,
35+
"sm": 2,
36+
"lg": 2
37+
# "xl": 4, # Back to original responsive sizing
38+
}, # Responsive columns: 1 on mobile, 2 on small, 3 on large, 4 on xl
4239
children=[
4340
# Github Repository Card
4441
dmc.Card(
@@ -50,7 +47,7 @@
5047
"textAlign": "center",
5148
"display": "flex",
5249
"flexDirection": "column",
53-
"height": "100%",
50+
"minHeight": "300px", # Use minHeight instead of fixed height
5451
}, # Center-align text and elements
5552
children=[
5653
# Card content wrapper
@@ -127,7 +124,7 @@
127124
"textAlign": "center",
128125
"display": "flex",
129126
"flexDirection": "column",
130-
"height": "100%",
127+
"minHeight": "300px", # Use minHeight instead of fixed height
131128
},
132129
children=[
133130
# Card content wrapper
@@ -216,13 +213,19 @@
216213
),
217214
# Funding & Partners cards in a 3-column grid
218215
dmc.SimpleGrid(
219-
cols=3, # Three columns for the three partner cards
216+
# cols=3, # Three columns for the three partner cards
217+
cols={
218+
"base": 1,
219+
"sm": 2,
220+
"lg": 3,
221+
# "xl": 4, # Back to original responsive sizing
222+
}, # Responsive columns: 1 on mobile, 2 on small, 3 on large, 4 on xl
220223
spacing="xl", # Space between cards
221-
breakpoints=[
222-
{"maxWidth": 1200, "cols": 3, "spacing": "md"},
223-
{"maxWidth": 980, "cols": 2, "spacing": "md"},
224-
{"maxWidth": 755, "cols": 1, "spacing": "md"},
225-
], # Responsive design
224+
# breakpoints=[
225+
# {"maxWidth": 1200, "cols": 3, "spacing": "md"},
226+
# {"maxWidth": 980, "cols": 2, "spacing": "md"},
227+
# {"maxWidth": 755, "cols": 1, "spacing": "md"},
228+
# ], # Responsive design
226229
children=[
227230
# Marie Skłodowska-Curie grant Card
228231
dmc.Card(
@@ -234,7 +237,7 @@
234237
"textAlign": "center",
235238
"display": "flex",
236239
"flexDirection": "column",
237-
"height": "100%",
240+
"minHeight": "350px", # Use minHeight instead of fixed height
238241
},
239242
children=[
240243
# Card content wrapper
@@ -305,7 +308,7 @@
305308
"textAlign": "center",
306309
"display": "flex",
307310
"flexDirection": "column",
308-
"height": "100%",
311+
"minHeight": "350px", # Use minHeight instead of fixed height
309312
},
310313
children=[
311314
# Card content wrapper
@@ -376,7 +379,7 @@
376379
"textAlign": "center",
377380
"display": "flex",
378381
"flexDirection": "column",
379-
"height": "100%",
382+
"minHeight": "350px", # Use minHeight instead of fixed height
380383
},
381384
children=[
382385
# Card content wrapper
@@ -470,7 +473,7 @@
470473
"width": "100%",
471474
"display": "flex",
472475
"flexDirection": "column",
473-
"height": "100%",
476+
"minHeight": "300px", # Use minHeight instead of fixed height
474477
},
475478
children=[
476479
# Card content wrapper
@@ -562,7 +565,7 @@
562565
"width": "100%",
563566
"display": "flex",
564567
"flexDirection": "column",
565-
"height": "100%",
568+
"minHeight": "400px", # Use minHeight instead of fixed height
566569
},
567570
children=[
568571
# Card content wrapper
@@ -668,10 +671,8 @@
668671
mt="xl",
669672
mb="xl", # Add margin bottom to ensure space at page end
670673
),
671-
],
672-
),
673-
size="xl", # Extra large container for content
674-
py="xl", # Padding top and bottom
675-
),
676-
]
674+
],
675+
),
676+
size="xl", # Extra large container for content
677+
py="xl", # Padding top and bottom
677678
)

0 commit comments

Comments
 (0)