Skip to content

Commit a56d41e

Browse files
JWehrsteinJWehrstein
committed
embed query-runner as iframe
1 parent dbb349f commit a56d41e

2 files changed

Lines changed: 136 additions & 3 deletions

File tree

‎website/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -930,7 +930,7 @@ <h1>Bespoke OLAP: Synthesizing Workload-Specific<br>One-Size-Fits-One Database E
930930
<a class="btn" href="https://github.com/DataManagementLab/BespokeOLAP">Github</a>
931931
<a class="btn" href="https://wandb.ai/jwehrstein/BespokeOLAP">W&amp;B Runs</a>
932932
<a class="btn demo-cta" href="/BespokeOLAP/demo/">Synthesis Explorer</a>
933-
<a class="btn live-new" href="http://130.83.40.96/ui?q=1&cmp_umbra=1&cmp_duckdb=1" target="_blank" rel="noopener">&#9654; Run Queries Live</a>
933+
<a class="btn live-new" href="/BespokeOLAP/web-runner/">&#9654; Run Queries Live</a>
934934
</div>
935935

936936
</div>
@@ -1063,8 +1063,8 @@ <h2>Live Query Runner</h2>
10631063
<span class="coming-soon-point">Adjustable parameters</span>
10641064
</div>
10651065
<div class="coming-soon-actions">
1066-
<a class="btn demo-cta" href="http://130.83.40.96/ui?q=1&cmp_umbra=1&cmp_duckdb=1" target="_blank" rel="noopener">Open Query Runner</a>
1067-
<a class="btn" href="http://130.83.40.96/ui?q=6&cmp_umbra=1&cmp_duckdb=1" target="_blank" rel="noopener">Try Q6</a>
1066+
<a class="btn demo-cta" href="/BespokeOLAP/web-runner/">Open Query Runner</a>
1067+
<a class="btn" href="/BespokeOLAP/web-runner/?q=6">Try Q6</a>
10681068
</div>
10691069
</div>
10701070
</div>

‎website/web-runner/index.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Live Query Runner — Bespoke OLAP</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
10+
<style>
11+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12+
html, body { height: 100%; overflow: hidden; }
13+
body {
14+
font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
15+
background: #f4ede0;
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
20+
nav {
21+
flex: 0 0 auto;
22+
display: flex;
23+
align-items: center;
24+
gap: 1rem;
25+
padding: 0 1.25rem;
26+
height: 44px;
27+
background: rgba(251, 248, 242, 0.95);
28+
border-bottom: 1px solid rgba(111, 93, 73, 0.16);
29+
backdrop-filter: blur(8px);
30+
}
31+
nav a.back {
32+
font-size: 0.8rem;
33+
font-weight: 600;
34+
color: #6f5d49;
35+
text-decoration: none;
36+
letter-spacing: 0.01em;
37+
opacity: 0.7;
38+
transition: opacity 0.15s;
39+
}
40+
nav a.back:hover { opacity: 1; }
41+
nav .logo {
42+
font-size: 0.9rem;
43+
font-weight: 700;
44+
color: #31261d;
45+
text-decoration: none;
46+
letter-spacing: -0.01em;
47+
}
48+
nav .sep {
49+
color: rgba(111, 93, 73, 0.4);
50+
font-size: 0.85rem;
51+
}
52+
nav .title {
53+
font-size: 0.85rem;
54+
font-weight: 600;
55+
color: #1b8d6e;
56+
}
57+
nav .spacer { flex: 1; }
58+
nav .q-links {
59+
display: flex;
60+
gap: 0.4rem;
61+
}
62+
nav .q-links a {
63+
font-size: 0.75rem;
64+
font-weight: 600;
65+
color: #6f5d49;
66+
text-decoration: none;
67+
padding: 0.2rem 0.55rem;
68+
border-radius: 5px;
69+
border: 1px solid rgba(111, 93, 73, 0.2);
70+
background: rgba(255,250,243,0.7);
71+
transition: background 0.15s, color 0.15s;
72+
}
73+
nav .q-links a:hover {
74+
background: #1b8d6e;
75+
color: #fff;
76+
border-color: #1b8d6e;
77+
}
78+
79+
.frame-wrap {
80+
flex: 1 1 auto;
81+
overflow: hidden;
82+
}
83+
iframe {
84+
width: 100%;
85+
height: 100%;
86+
border: none;
87+
display: block;
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
<nav>
93+
<a class="back" href="../">&#8592; Back</a>
94+
<span class="sep">/</span>
95+
<a class="logo" href="../">BespokeOLAP</a>
96+
<span class="sep">/</span>
97+
<span class="title">Live Query Runner</span>
98+
<div class="spacer"></div>
99+
<div class="q-links">
100+
<a href="#" onclick="setQuery(1);return false;">Q1</a>
101+
<a href="#" onclick="setQuery(3);return false;">Q3</a>
102+
<a href="#" onclick="setQuery(6);return false;">Q6</a>
103+
<a href="#" onclick="setQuery(12);return false;">Q12</a>
104+
<a href="#" onclick="setQuery(19);return false;">Q19</a>
105+
</div>
106+
</nav>
107+
<div class="frame-wrap">
108+
<iframe id="runner-frame"
109+
title="Live Query Runner"
110+
allow="same-origin"
111+
></iframe>
112+
</div>
113+
114+
<script>
115+
const BASE = 'http://130.83.40.96/ui';
116+
117+
function currentParams() {
118+
return Object.fromEntries(new URLSearchParams(location.search));
119+
}
120+
121+
function buildSrc(overrides) {
122+
const params = new URLSearchParams({ ...currentParams(), ...overrides });
123+
return params.size ? `${BASE}?${params}` : BASE;
124+
}
125+
126+
function setQuery(q) {
127+
document.getElementById('runner-frame').src = buildSrc({ q });
128+
}
129+
130+
document.getElementById('runner-frame').src = buildSrc({});
131+
</script>
132+
</body>
133+
</html>

0 commit comments

Comments
 (0)