debug.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Geoduck — Debug</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    .query-result {
      background: #f7f7f7;
      border: 1px solid var(--border-card);
      padding: .75rem 1rem;
      margin: .75rem 0;
      border-radius: var(--radius);
      font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
      font-size: .78rem;
      white-space: pre-wrap;
      word-break: break-word;
      display: none;
    }
    .query-result.error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
    .query-result.success { background: #f0fdf4; border-color: #86efac; color: #166534; }
    .test-card { margin-bottom: .75rem; }
    .test-card h3 { font-size: .95rem; font-weight: 600; margin-bottom: .25rem; }
    .test-card p { font-size: .82rem; color: var(--text-mid-card); margin-bottom: .5rem; }
    .test-card details { font-size: .78rem; color: var(--text-mid-card); margin-top: .4rem; }
    .test-card details summary { cursor: pointer; font-weight: 500; }
    .test-card details code {
      display: block; margin-top: .4rem; padding: .5rem .75rem;
      background: #f3f3f3; border-radius: var(--radius); border: 1px solid var(--border-card);
      font-size: .75rem; white-space: pre-wrap; word-break: break-all;
    }
    .debug-info {
      background: #f7f7f7; border: 1px solid var(--border-card);
      border-radius: var(--radius); padding: 1rem;
      font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
      font-size: .78rem; line-height: 1.7;
    }
  </style>
</head>
<body>
<div class="app-shell">

  <header class="app-header">
    <a href="index.html" class="app-logo">
      Geoduck
      <span class="app-logo-divider"></span>
      <span class="app-logo-subtitle">by Geosyntec</span>
    </a>
    <nav class="app-nav">
      <a href="index.html" class="nav-link">Data Analysis</a>
      <a href="map.html" class="nav-link">Spatial Map</a>
      <a href="hru_analysis.html" class="nav-link">HRU Analysis</a>
      <a href="debug.html" class="nav-link active muted">Debug</a>
    </nav>
  </header>

  <main class="app-main">
    <div class="page-heading">
      <h1>Partitioned Data Debugging</h1>
      <p>Testing Hive partitioning with DuckDB WASM.</p>
    </div>

    <!-- Init Status -->
    <div class="card">
      <div class="card-header">
        <span class="card-title">DuckDB Status</span>
      </div>
      <div class="card-body">
        <div class="status-bar">
          <span class="status-dot loading" id="init-dot"></span>
          <span id="init-status">Initializing DuckDB WASM...</span>
        </div>
      </div>
    </div>

    <!-- Tests -->
    <div class="card" style="margin-top:1rem">
      <div class="card-header">
        <span class="card-title">Test Queries</span>
      </div>
      <div class="card-body">

        <div class="test-card">
          <h3>Test 1: Direct File Access</h3>
          <p>Direct file access works perfectly</p>
          <button id="test1" class="btn btn-primary btn-sm" disabled>Run Test 1</button>
          <div id="result1" class="query-result"></div>
          <details>
            <summary>Query</summary>
            <code>SELECT * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet') LIMIT 3;</code>
          </details>
        </div>

        <div class="divider"></div>

        <div class="test-card">
          <h3>Test 2: Manual Partition Columns</h3>
          <p>Manually add partition info to single file</p>
          <button id="test2" class="btn btn-primary btn-sm" disabled>Run Test 2</button>
          <div id="result2" class="query-result"></div>
          <details>
            <summary>Query</summary>
            <code>SELECT 'WRF-NARR_HIS' as model_name, 'R10C29' as grid_name, * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet') LIMIT 2;</code>
          </details>
        </div>

        <div class="divider"></div>

        <div class="test-card">
          <h3>Test 3: Array of URLs</h3>
          <p>Test if DuckDB can read from an array of specific URLs</p>
          <button id="test3" class="btn btn-primary btn-sm" disabled>Run Test 3</button>
          <div id="result3" class="query-result"></div>
          <details>
            <summary>Query</summary>
            <code>SELECT * FROM read_parquet(['https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet']) LIMIT 3;</code>
          </details>
        </div>

        <div class="divider"></div>

        <div class="test-card">
          <h3>Test 4: Multiple Files with UNION</h3>
          <p>Manually combine files from different partitions</p>
          <button id="test4" class="btn btn-primary btn-sm" disabled>Run Test 4</button>
          <div id="result4" class="query-result"></div>
          <details>
            <summary>Query</summary>
            <code>SELECT 'WRF-NARR_HIS' as model_name, 'R10C29' as grid_name, * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet') LIMIT 2
UNION ALL
SELECT 'WRF-NARR_HIS' as model_name, 'R10C30' as grid_name, * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C30/data_0.parquet') LIMIT 2;</code>
          </details>
        </div>

        <div class="divider"></div>

        <div class="test-card">
          <h3>Test 5: Different Climate Model</h3>
          <p>Test accessing a different climate model partition</p>
          <button id="test5" class="btn btn-primary btn-sm" disabled>Run Test 5</button>
          <div id="result5" class="query-result"></div>
          <details>
            <summary>Query</summary>
            <code>SELECT * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=access1.3_RCP85_PREC_6km/grid_name=R10C29/data_0.parquet') LIMIT 3;</code>
          </details>
        </div>
      </div>
    </div>

    <!-- Debug Info -->
    <div class="card" style="margin-top:1rem">
      <div class="card-header">
        <span class="card-title">Debug Info</span>
      </div>
      <div class="card-body">
        <div class="debug-info">
<strong>Expected Partition Structure:</strong>
climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet
climate_ts/partitioned/model_name=access1.3_RCP85_PREC_6km/grid_name=R10C29/data_0.parquet

<strong>Key Points:</strong>
• Uses Hive partitioning (key=value in folder names)
• DuckDB should auto-detect partition columns
• Filter pushdown should work on partition columns
• Partition columns: model_name, grid_name
        </div>
      </div>
    </div>

  </main>

  <footer class="app-footer">
    © 2025 Geosyntec Consultants
  </footer>
</div>

<script type="module">
    import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@1.28.1-dev106.0/+esm';

    let db;

    async function initDuckDB() {
        try {
            const initStatus = document.getElementById('init-status');
            const initDot = document.getElementById('init-dot');
            initStatus.textContent = 'Loading DuckDB bundles...';

            const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
            const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);

            initStatus.textContent = 'Creating worker...';
            const worker = await duckdb.createWorker(bundle.mainWorker);

            initStatus.textContent = 'Starting DuckDB...';
            const logger = new duckdb.ConsoleLogger();
            db = new duckdb.AsyncDuckDB(logger, worker);
            await db.instantiate(bundle.mainModule, bundle.pthreadWorker);

            initDot.className = 'status-dot ready';
            initStatus.textContent = 'DuckDB WASM initialized successfully.';

            document.querySelectorAll('button[id^="test"]').forEach(btn => btn.disabled = false);

        } catch (error) {
            const initStatus = document.getElementById('init-status');
            const initDot = document.getElementById('init-dot');
            initDot.className = 'status-dot error';
            initStatus.textContent = `Failed to initialize DuckDB: ${error.message}`;
            console.error('DuckDB init error:', error);
        }
    }

    async function runQuery(query, resultElementId) {
        const resultElement = document.getElementById(resultElementId);
        resultElement.style.display = 'block';
        resultElement.textContent = 'Running query...';
        resultElement.className = 'query-result';

        try {
            const conn = await db.connect();
            const startTime = performance.now();
            const result = await conn.query(query);
            const endTime = performance.now();

            const data = result.toArray().map(row => row.toJSON());

            let output = `Query completed in ${(endTime - startTime).toFixed(2)}ms\n`;
            output += `Rows returned: ${data.length}\n\n`;

            if (data.length > 0) {
                output += `Sample Data:\n`;
                output += JSON.stringify(data, null, 2);
            } else {
                output += 'No data returned';
            }

            resultElement.textContent = output;
            resultElement.className = 'query-result success';

            conn.close();

        } catch (error) {
            resultElement.textContent = `Query failed:\n${error.message}\n\nFull error:\n${error.toString()}`;
            resultElement.className = 'query-result error';
            console.error('Query error:', error);
        }
    }

    const tests = {
        test1: "SELECT * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet') LIMIT 3;",
        test2: "SELECT 'WRF-NARR_HIS' as model_name, 'R10C29' as grid_name, * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet') LIMIT 2;",
        test3: "SELECT * FROM read_parquet(['https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet']) LIMIT 3;",
        test4: "SELECT 'WRF-NARR_HIS' as model_name, 'R10C29' as grid_name, * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C29/data_0.parquet') LIMIT 2 UNION ALL SELECT 'WRF-NARR_HIS' as model_name, 'R10C30' as grid_name, * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=WRF-NARR_HIS/grid_name=R10C30/data_0.parquet') LIMIT 2;",
        test5: "SELECT * FROM read_parquet('https://storage.googleapis.com/climate_ts/partitioned/model_name=access1.3_RCP85_PREC_6km/grid_name=R10C29/data_0.parquet') LIMIT 3;"
    };

    Object.keys(tests).forEach(testId => {
        document.getElementById(testId).addEventListener('click', () => {
            runQuery(tests[testId], `result${testId.slice(-1)}`);
        });
    });

    document.querySelectorAll('button[id^="test"]').forEach(btn => btn.disabled = true);

    initDuckDB();
</script>
</body>
</html>