Skip to content

Commit a4c1194

Browse files
chris-durbinchris-durbin
committed
HARMONY-1876: Add in placeholder dataset boxes for the 3 selected datasets.
1 parent 389fef0 commit a4c1194

File tree

1 file changed

+194
-18
lines changed

1 file changed

+194
-18
lines changed

‎services/harmony/app/views/free-text-query/index.mustache.html

+194-18
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@
8282
word-wrap: break-word;
8383
}
8484

85+
86+
/* Needed to prevent the image from causing things to resize
8587
.image-container {
8688
width: 360px;
8789
height: 200px;
@@ -91,9 +93,25 @@
9193
border-radius: 8px;
9294
text-align: center;
9395
overflow: hidden;
96+
} */
97+
98+
#dynamic-image-1 {
99+
width: 100%;
100+
height: auto;
101+
object-fit: contain;
102+
border-radius: 4px;
103+
display: block;
94104
}
95105

96-
#dynamic-image {
106+
#dynamic-image-2 {
107+
width: 100%;
108+
height: auto;
109+
object-fit: contain;
110+
border-radius: 4px;
111+
display: block;
112+
}
113+
114+
#dynamic-image-3 {
97115
width: 100%;
98116
height: auto;
99117
object-fit: contain;
@@ -169,6 +187,94 @@
169187
contain: layout size paint;
170188
}
171189

190+
/* .dataset-container {
191+
border: 1px solid #ccc;
192+
border-radius: 8px;
193+
padding: 16px;
194+
margin: 16px 0;
195+
font-family: Arial, sans-serif;
196+
background-color: #f9f9f9;
197+
} */
198+
199+
.dataset-title {
200+
margin: 0;
201+
padding: 0 0 8px 0;
202+
font-size: 1.5em;
203+
color: #333;
204+
border-bottom: 1px solid #ddd;
205+
}
206+
207+
.dataset-details {
208+
margin: 16px 0;
209+
line-height: 1.5;
210+
}
211+
212+
.variables-section {
213+
margin-top: 8px;
214+
}
215+
216+
#variables-list {
217+
list-style-type: disc;
218+
padding-left: 20px;
219+
margin: 8px 0 0 0;
220+
}
221+
222+
#variables-list li {
223+
margin: 4px 0;
224+
}
225+
226+
#variables-list li.selected {
227+
font-weight: bold;
228+
color: #007BFF; /* Emphasis color */
229+
}
230+
231+
.image-container {
232+
margin-top: 16px;
233+
text-align: center;
234+
}
235+
236+
.image-container #job-status {
237+
font-size: 1em;
238+
color: #555;
239+
}
240+
241+
.image-container img {
242+
max-width: 100%;
243+
height: auto;
244+
margin-top: 8px;
245+
border: 1px solid #ddd;
246+
border-radius: 4px;
247+
display: none; /* Initially hidden until loaded */
248+
}
249+
250+
.datasets-container {
251+
display: flex;
252+
flex-wrap: wrap; /* Allows wrapping if the screen size is too small */
253+
gap: 16px; /* Spacing between dataset containers */
254+
justify-content: center; /* Centers the datasets horizontally */
255+
padding: 16px;
256+
}
257+
258+
.dataset-container {
259+
flex: 1 1 calc(33.333% - 32px); /* 3 datasets per row with some spacing */
260+
max-width: 300px; /* Optional: set a max width for consistency */
261+
border: 1px solid #ccc;
262+
border-radius: 8px;
263+
padding: 16px;
264+
background-color: #f9f9f9;
265+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
266+
}
267+
268+
.dataset-title {
269+
text-align: center;
270+
font-size: 1.2em;
271+
margin-bottom: 8px;
272+
}
273+
274+
.image-container {
275+
margin-top: 16px;
276+
text-align: center;
277+
}
172278
</style>
173279
</head>
174280

@@ -185,33 +291,103 @@
185291

186292
<div class="main-container">
187293
<div class="content-wrapper">
188-
<div class="left-panel">
294+
<!-- Top Section: Free Text Query Form, Loading Container, Model Output, and Map -->
295+
<div id="top-section" style="display: flex; gap: 20px; align-items: flex-start;">
189296
<form id="free-text-query-form" action="javascript:;" onsubmit="postForm(this);" class="query-form">
190297
<textarea name="query" rows="5" placeholder="Enter free text query"></textarea>
191298
<br/>
192299
<input type="submit" value="Submit Query" class="submitButton">
193300
</form>
301+
<div id="map" style="width: 500px; height: 300px; background-color: lightgray; display: none"></div>
302+
</div>
303+
</div>
304+
305+
<div class="loading-container" style="display: flex; align-items: center;">
306+
<div id="spinner" class="lds-ellipsis" style="display:none;">
307+
<div></div><div></div><div></div><div></div>
308+
</div>
309+
<div id="status-message" style="text-align: left; margin-left: 10px; display: none;">
310+
Analyzing query
311+
</div>
312+
<pre id="model-output"></pre>
313+
</div>
314+
194315

195-
<div class="loading-container" style="display: flex; align-items: center;">
196-
<div id="spinner" class="lds-ellipsis" style="display:none;">
197-
<div></div><div></div><div></div><div></div>
316+
<!-- Datasets Section: 3 Datasets -->
317+
<div class="datasets-container" style="display: flex; gap: 20px;">
318+
<!-- Dataset 1 -->
319+
<div class="dataset-container" style="flex: 1;">
320+
<h2 class="dataset-title">Dataset Information</h2>
321+
<div class="dataset-details">
322+
<div>
323+
<strong>CMR Concept ID:</strong> <span id="cmr-concept-id-1"></span>
198324
</div>
199-
<div id="status-message" style="text-align: left; margin-left: 10px; display: none;">
200-
Analyzing query
325+
<div>
326+
<strong>Collection Short Name:</strong> <span id="collection-short-name-1"></span>
327+
</div>
328+
<div>
329+
<strong>Collection Description:</strong> <span id="collection-description-1"></span>
330+
</div>
331+
<div class="variables-section">
332+
<strong>Top 5 Variables:</strong>
333+
<ul id="variables-list-1">
334+
</ul>
201335
</div>
202336
</div>
337+
<div class="image-container">
338+
<p id="job-status-1"></p>
339+
<img id="dynamic-image-1" src="" alt="Dynamic Image" style="display: none;" />
340+
</div>
341+
</div>
203342

204-
<pre id="model-output"></pre>
205-
343+
<!-- Dataset 2 -->
344+
<div class="dataset-container" style="flex: 1;">
345+
<h2 class="dataset-title">Dataset Information</h2>
346+
<div class="dataset-details">
347+
<div>
348+
<strong>CMR Concept ID:</strong> <span id="cmr-concept-id-2"></span>
349+
</div>
350+
<div>
351+
<strong>Collection Short Name:</strong> <span id="collection-short-name-2"></span>
352+
</div>
353+
<div>
354+
<strong>Collection Description:</strong> <span id="collection-description-2"></span>
355+
</div>
356+
<div class="variables-section">
357+
<strong>Top 5 Variables:</strong>
358+
<ul id="variables-list-2">
359+
</ul>
360+
</div>
361+
</div>
206362
<div class="image-container">
207-
<p id="job-status"></p>
208-
<img id="dynamic-image" src="" alt="Dynamic Image" style="display:none;" />
363+
<p id="job-status-2"></p>
364+
<img id="dynamic-image-2" src="" alt="Dynamic Image" style="display: none;" />
209365
</div>
210366
</div>
211367

212-
<div class="right-panel">
213-
<div id="map"></div>
214-
<div id="map2"></div>
368+
<!-- Dataset 3 -->
369+
<div class="dataset-container" style="flex: 1;">
370+
<h2 class="dataset-title">Dataset Information</h2>
371+
<div class="dataset-details">
372+
<div>
373+
<strong>CMR Concept ID:</strong> <span id="cmr-concept-id-3"></span>
374+
</div>
375+
<div>
376+
<strong>Collection Short Name:</strong> <span id="collection-short-name-3"></span>
377+
</div>
378+
<div>
379+
<strong>Collection Description:</strong> <span id="collection-description-3"></span>
380+
</div>
381+
<div class="variables-section">
382+
<strong>Top 5 Variables:</strong>
383+
<ul id="variables-list-3">
384+
</ul>
385+
</div>
386+
</div>
387+
<div class="image-container">
388+
<p id="job-status-3"></p>
389+
<img id="dynamic-image-3" src="" alt="Dynamic Image" style="display: none;" />
390+
</div>
215391
</div>
216392
</div>
217393
</div>
@@ -263,8 +439,8 @@
263439
}
264440

265441
export function pollJobStatus(statusUrl) {
266-
const statusElement = document.getElementById('job-status');
267-
const imageElement = document.getElementById('dynamic-image');
442+
const statusElement = document.getElementById('job-status-1');
443+
const imageElement = document.getElementById('dynamic-image-1');
268444
const spinner = document.getElementById('spinner');
269445
const status = document.getElementById('status-message');
270446

@@ -397,8 +573,8 @@
397573
const spinner = document.getElementById('spinner');
398574
const status = document.getElementById('status-message');
399575
const outputElement = document.getElementById('model-output');
400-
const imageElement = document.getElementById('dynamic-image');
401-
const statusElement = document.getElementById('job-status');
576+
const imageElement = document.getElementById('dynamic-image-1');
577+
const statusElement = document.getElementById('job-status-1');
402578
const mapElement = document.getElementById('map');
403579

404580
// Clear previous outputs

0 commit comments

Comments
 (0)