Hugging Face's logo

Spaces:
znation
/
visualization-studio
Running

App Files Community
znation HF Staff commited on
Commit
ae1a622
·
1 Parent(s): 2108526

some fixes

Browse files
Files changed (1) hide show
  1. index.html +14 -24
index.html CHANGED
@@ -15,7 +15,7 @@
15
  <body>
16
  <div class="container">
17
  <h1>📊 Parquet Visualization Studio</h1>
18
- <p class="subtitle">Query parquet files using SQL with DuckDB WASM</p>
19
 
20
  <form id="queryForm">
21
  <div class="form-group">
@@ -45,16 +45,7 @@
45
  />
46
  </div>
47
 
48
- <div class="form-group">
49
- <label for="sqlQuery">SQL Query</label>
50
- <textarea
51
- id="sqlQuery"
52
- rows="4"
53
- required
54
- >SELECT * FROM data LIMIT 10</textarea>
55
- </div>
56
-
57
- <button type="submit" id="submitBtn">Run Query</button>
58
  </form>
59
 
60
  <div id="status" class="status"></div>
@@ -352,8 +343,8 @@
352
  data: { values: data },
353
  mark: 'bar',
354
  encoding: {
355
- y: { field: yCol, type: 'nominal' },
356
- x: { aggregate: 'count', type: 'quantitative' }
357
  },
358
  width: 600,
359
  height: 400
@@ -366,8 +357,8 @@
366
  data: { values: data },
367
  mark: 'bar',
368
  encoding: {
369
- x: { field: xCol, type: 'nominal' },
370
- y: { aggregate: 'count', type: 'quantitative' }
371
  },
372
  width: 600,
373
  height: 400
@@ -390,17 +381,16 @@
390
  e.preventDefault();
391
 
392
  const parquetUrl = document.getElementById('parquetUrl').value.trim();
393
- const sqlQuery = document.getElementById('sqlQuery').value.trim();
394
  const submitBtn = document.getElementById('submitBtn');
395
 
396
- if (!parquetUrl || !sqlQuery) {
397
- setStatus('Please provide both a parquet URL and SQL query.', 'error');
398
  return;
399
  }
400
 
401
  try {
402
  submitBtn.disabled = true;
403
- submitBtn.textContent = 'Running...';
404
  setStatus('Initializing DuckDB...', 'info');
405
 
406
  // Initialize DuckDB if not already done
@@ -421,12 +411,12 @@
421
  }
422
  catch {}
423
 
424
- setStatus('Executing query...', 'info');
425
 
426
- // Execute the query
427
- const result = await conn.query(sqlQuery.replace(/\bdata\b/gi, "'data.parquet'"));
428
 
429
- setStatus('Query completed successfully!', 'success');
430
 
431
  // Render results
432
  renderResults(result);
@@ -437,7 +427,7 @@
437
  document.getElementById('resultsContainer').style.display = 'none';
438
  } finally {
439
  submitBtn.disabled = false;
440
- submitBtn.textContent = 'Run Query';
441
  }
442
  }
443
 
 
15
  <body>
16
  <div class="container">
17
  <h1>📊 Parquet Visualization Studio</h1>
18
+ <p class="subtitle">Visualize parquet files with interactive charts</p>
19
 
20
  <form id="queryForm">
21
  <div class="form-group">
 
45
  />
46
  </div>
47
 
48
+ <button type="submit" id="submitBtn">Load Dataset</button>
 
 
 
 
 
 
 
 
 
49
  </form>
50
 
51
  <div id="status" class="status"></div>
 
343
  data: { values: data },
344
  mark: 'bar',
345
  encoding: {
346
+ y: { field: yCol, type: 'nominal', sort: '-x' },
347
+ x: { aggregate: 'count', type: 'quantitative', title: `Count of ${yCol}` }
348
  },
349
  width: 600,
350
  height: 400
 
357
  data: { values: data },
358
  mark: 'bar',
359
  encoding: {
360
+ x: { field: xCol, type: 'nominal', sort: '-y' },
361
+ y: { aggregate: 'count', type: 'quantitative', title: `Count of ${xCol}` }
362
  },
363
  width: 600,
364
  height: 400
 
381
  e.preventDefault();
382
 
383
  const parquetUrl = document.getElementById('parquetUrl').value.trim();
 
384
  const submitBtn = document.getElementById('submitBtn');
385
 
386
+ if (!parquetUrl) {
387
+ setStatus('Please provide a parquet URL.', 'error');
388
  return;
389
  }
390
 
391
  try {
392
  submitBtn.disabled = true;
393
+ submitBtn.textContent = 'Loading...';
394
  setStatus('Initializing DuckDB...', 'info');
395
 
396
  // Initialize DuckDB if not already done
 
411
  }
412
  catch {}
413
 
414
+ setStatus('Loading data...', 'info');
415
 
416
+ // Load the data (limit to 1000 rows for visualization)
417
+ const result = await conn.query("SELECT * FROM 'data.parquet' LIMIT 1000");
418
 
419
+ setStatus('Data loaded successfully!', 'success');
420
 
421
  // Render results
422
  renderResults(result);
 
427
  document.getElementById('resultsContainer').style.display = 'none';
428
  } finally {
429
  submitBtn.disabled = false;
430
+ submitBtn.textContent = 'Load Dataset';
431
  }
432
  }
433