Spaces:

krushimitravit
/

Pest_Geospatial_Analytics

Sleeping

File size: 22,432 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pest Geospatial Analytics | AgriTech Suite</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

  <style>
    :root {
      --primary-green: #1a5d3a;
      --accent-green: #198754;
      --light-bg: #f8f9fa;
      --text-dark: #212529;
      --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    }

    body {
      font-family: 'Outfit', sans-serif;
      background-color: var(--light-bg);
      color: var(--text-dark);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .analytics-header {
      background-color: var(--primary-green);
      color: white;
      padding: 3rem 1rem 6rem;
      text-align: center;
      border-bottom-left-radius: 50% 20px;
      border-bottom-right-radius: 50% 20px;
      margin-bottom: 2rem;
    }

    .header-title {
      font-weight: 700;
      font-size: 2rem;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .dashboard-container {
      margin-top: -5rem;
      padding: 0 2rem 3rem;
      flex: 1;
      display: flex;
      justify-content: center;
    }

    .dashboard-card {
      background: white;
      border-radius: 24px;
      box-shadow: var(--card-shadow);
      width: 100%;
      max-width: 1200px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 320px 1fr;
      min-height: 600px;
      border: 1px solid #eef0f3;
    }

    .sidebar-controls {
      background: #fdfdfd;
      border-right: 1px solid #f1f3f5;
      padding: 2rem;
      display: flex;
      flex-direction: column;
    }

    .sidebar-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--primary-green);
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid #f0f0f0;
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-label-custom {
      font-size: 0.8rem;
      font-weight: 600;
      color: #6c757d;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.5rem;
      display: block;
    }

    .form-select-custom {
      width: 100%;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 0.8rem 1rem;
      font-size: 0.95rem;
      font-weight: 500;
      background-color: white;
      transition: all 0.2s;
    }

    .form-select-custom:focus {
      border-color: var(--accent-green);
      box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1);
      outline: none;
    }

    .form-select-custom option:disabled {
      color: #adb5bd;
      background-color: #f8f9fa;
    }

    .btn-visualize {
      background-color: var(--accent-green);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 1rem;
      font-weight: 600;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-top: auto;
      transition: all 0.2s;
      box-shadow: 0 4px 15px rgba(25, 135, 84, 0.2);
    }

    .btn-visualize:hover:not(:disabled) {
      background-color: #146c43;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(25, 135, 84, 0.3);
    }

    .btn-visualize:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .map-viewport {
      background-color: #f8fafc;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .map-frame {
      background: white;
      padding: 1rem;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      max-width: 100%;
    }

    .map-image {
      max-width: 100%;
      max-height: 550px;
      border-radius: 8px;
      display: block;
    }

    .result-meta {
      position: absolute;
      top: 1.5rem;
      left: 1.5rem;
      background: white;
      padding: 0.5rem 1rem;
      border-radius: 50px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      display: flex;
      gap: 1rem;
      z-index: 5;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-dark);
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .meta-item i {
      color: var(--accent-green);
    }

    .empty-state {
      text-align: center;
      color: #adb5bd;
    }

    .empty-icon {
      font-size: 4rem;
      margin-bottom: 1rem;
      color: #e9ecef;
    }

    /* Status badges inside dropdowns */
    .week-loading-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.75rem;
      color: #6c757d;
      margin-top: 0.3rem;
    }

    .availability-hint {
      font-size: 0.72rem;
      color: #adb5bd;
      margin-top: 0.25rem;
    }

    @media (max-width: 992px) {
      .dashboard-card {
        grid-template-columns: 1fr;
      }

      .sidebar-controls {
        border-right: none;
        border-bottom: 1px solid #f1f3f5;
      }

      .map-image {
        max-height: 400px;
      }
    }

    #loadingOverlay {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.9);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 50;
      border-radius: 20px;
    }

    /* Spinner inside dropdowns while checking */
    .select-spinner {
      position: relative;
    }

    .select-spinner::after {
      content: '';
      position: absolute;
      right: 2.5rem;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      border: 2px solid #dee2e6;
      border-top-color: var(--accent-green);
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
      from { transform: translateY(-50%) rotate(0deg); }
      to   { transform: translateY(-50%) rotate(360deg); }
    }
  </style>
</head>

<body>

  <div class="analytics-header">
    <h1 class="header-title">Geospatial Intelligence Dashboard</h1>
    <p class="opacity-75">Analysis of pest distribution patterns over space and time</p>
  </div>

  <div class="dashboard-container">
    <div class="dashboard-card">

      <aside class="sidebar-controls">
        <div class="sidebar-title">
          <i class="bi bi-sliders2"></i> FILTER PARAMETERS
        </div>

        <form method="GET" action="/" id="analyticsForm">

          <div class="form-group">
            <label class="form-label-custom">Select Crop</label>
            <select id="crop" name="crop" class="form-select-custom" onchange="onCropChange('')">
              <option value="">Choose Crop...</option>
              {% for c in crops %}
              <option value="{{ c }}" {% if selected_crop==c %}selected{% endif %}>{{ c }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="form-group">
            <label class="form-label-custom">Select Pest</label>
            <select id="pest" name="pest" class="form-select-custom" onchange="onPestOrYearChange()">
              <option value="">Choose Pest...</option>
            </select>
          </div>

          <div class="row">
            <div class="col-6 form-group">
              <label class="form-label-custom">Year</label>
              <select id="year" name="year" class="form-select-custom" onchange="onPestOrYearChange()">
                <option value="">Year...</option>
                {% for y in years %}
                <option value="{{ y }}" {% if selected_year==y %}selected{% endif %}>{{ y }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-6 form-group">
              <label class="form-label-custom">Week</label>
              <select id="week" name="week" class="form-select-custom" onchange="onWeekChange()">
                <option value="">Week...</option>
                {% if selected_week %}
                <option value="{{ selected_week }}" selected>Week {{ selected_week }}</option>
                {% endif %}
              </select>
              <span id="weekHint" class="availability-hint"></span>
            </div>
          </div>

          <div class="form-group mb-5">
            <label class="form-label-custom">Analysis Metric</label>
            <select id="param" name="param" class="form-select-custom">
              <option value="">Select Metric...</option>
              {% for code, label in params.items() %}
              <option value="{{ code }}" {% if selected_param==code %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
            <span id="paramHint" class="availability-hint"></span>
          </div>

          <button type="submit" class="btn-visualize" id="submitBtn">
            Generate Map <i class="bi bi-arrow-right-circle"></i>
          </button>

        </form>
      </aside>

      <main class="map-viewport">

        <div id="loadingOverlay">
          <div class="text-center">
            <div class="spinner-border text-success mb-3" role="status"></div>
            <h5 class="text-muted">Rendering Geospatial Data...</h5>
          </div>
        </div>

        {% if image_url %}
        <div class="result-meta">
          <div class="meta-item"><i class="bi bi-calendar-event"></i> {{ selected_year }} (W{{ selected_week }})</div>
          <div class="d-none d-md-flex meta-item text-muted">|</div>
          <div class="meta-item"><i class="bi bi-bug"></i> {{ selected_pest }}</div>
        </div>

        <div class="map-frame" id="mapContainer">
          <img src="{{ image_url }}" alt="Heatmap Result" class="map-image" onerror="handleImageError(this)">
          <div id="dataNotAvailable" class="p-5 text-center d-none">
            <i class="bi bi-database-x fs-1 text-danger mb-3"></i>
            <h5 class="text-secondary">Data Unavailable</h5>
            <p class="text-muted small">No records found for this parameter combination.</p>
          </div>
        </div>

        {% elif not data_available %}
        <div class="empty-state">
          <div class="empty-icon"><i class="bi bi-database-x text-danger"></i></div>
          <h4 class="text-secondary">Data Unavailable</h4>
          <p class="text-muted">No image data found for the selected combination.<br>Try a different week, year, or metric.</p>
        </div>

        {% else %}
        <div class="empty-state">
          <div class="empty-icon"><i class="bi bi-map"></i></div>
          <h4>Map Visualization</h4>
          <p>Configure filters on the left to generate insights.</p>
        </div>
        {% endif %}

      </main>

    </div>
  </div>

  <!-- Server-side data passed via data attributes — keeps <script> Jinja-free -->
  <div id="appData"
    data-crop-to-pests='{{ crop_to_pests | tojson }}'
    data-init-crop="{{ selected_crop | e }}"
    data-init-pest="{{ selected_pest | e }}"
    data-init-year="{{ selected_year | e }}"
    data-init-week="{{ selected_week | e }}"
    data-init-param="{{ selected_param | e }}"
    style="display:none"
  ></div>

  <script>
    const _appData      = document.getElementById('appData').dataset;
    const cropToPests   = JSON.parse(_appData.cropToPests);

    // Server-rendered selections (used to restore state after JS rebuilds dropdowns)
    const INIT_CROP  = _appData.initCrop;
    const INIT_PEST  = _appData.initPest;
    const INIT_YEAR  = _appData.initYear;
    const INIT_WEEK  = _appData.initWeek;
    const INIT_PARAM = _appData.initParam;

    // Track in-flight availability request so we can cancel stale results
    let availabilityController = null;

    // ── Crop changed → repopulate pest dropdown ──────────────────────────────
    function onCropChange(restorePest) {
      const crop = document.getElementById("crop").value;
      const pestSelect = document.getElementById("pest");

      pestSelect.innerHTML = '<option value="">Choose Pest...</option>';

      if (crop && cropToPests[crop]) {
        cropToPests[crop].forEach(p => {
          const opt = document.createElement("option");
          opt.value = p;
          opt.textContent = p;
          pestSelect.appendChild(opt);
        });
      }

      // Restore a previously selected pest if requested (page-load restore)
      if (restorePest && restorePest !== "") {
        pestSelect.value = restorePest;
      }

      clearWeeks();
      clearParamAvailability();

      // Only fetch weeks if both pest and year are already set
      const year = document.getElementById("year").value;
      if (crop && pestSelect.value && year) {
        fetchWeeks();
      }
    }

    // ── Pest or Year changed → refresh weeks ─────────────────────────────────
    function onPestOrYearChange() {
      clearWeeks();
      clearParamAvailability();
      const crop = document.getElementById("crop").value;
      const pest = document.getElementById("pest").value;
      const year = document.getElementById("year").value;
      if (crop && pest && year) fetchWeeks();
    }

    // ── Week changed → check param availability ───────────────────────────────
    function onWeekChange() {
      clearParamAvailability();
      const crop = document.getElementById("crop").value;
      const pest = document.getElementById("pest").value;
      const year = document.getElementById("year").value;
      const week = document.getElementById("week").value;
      if (crop && pest && year && week) checkParamAvailability(crop, pest, year, week);
    }

    // ── Fetch available weeks from backend ────────────────────────────────────
    function fetchWeeks(restoreWeek) {
      const crop = document.getElementById("crop").value;
      const pest = document.getElementById("pest").value;
      const year = document.getElementById("year").value;

      const weekSelect = document.getElementById("week");
      const hint = document.getElementById("weekHint");

      weekSelect.innerHTML = '<option value="">Checking availability...</option>';
      weekSelect.disabled = true;
      hint.textContent = "Scanning weeks with data...";
      hint.style.color = "#6c757d";

      fetch(`/fetch_weeks?crop=${encodeURIComponent(crop)}&pest=${encodeURIComponent(pest)}&year=${encodeURIComponent(year)}`)
        .then(res => {
          if (!res.ok) throw new Error("Network response was not ok");
          return res.json();
        })
        .then(data => {
          weekSelect.innerHTML = '<option value="">Week...</option>';
          weekSelect.disabled = false;

          const weeks = Array.isArray(data.weeks) ? data.weeks : [];

          if (weeks.length > 0) {
            weeks.forEach(w => {
              const opt = document.createElement("option");
              opt.value = String(w);
              opt.textContent = `Week ${w}`;
              weekSelect.appendChild(opt);
            });
            hint.textContent = `${weeks.length} week(s) with data available`;
            hint.style.color = "#198754";

            // Restore a previously selected week (page-load) or keep current selection
            const target = restoreWeek || INIT_WEEK;
            if (target !== "" && weeks.map(String).includes(String(target))) {
              weekSelect.value = String(target);
            }
          } else {
            hint.textContent = "No data found for this combination";
            hint.style.color = "#dc3545";
          }

          // If a week ended up selected, check param availability
          if (weekSelect.value) {
            checkParamAvailability(crop, pest, year, weekSelect.value);
          }
        })
        .catch(() => {
          weekSelect.innerHTML = '<option value="">Week...</option>';
          weekSelect.disabled = false;
          hint.textContent = "Could not load weeks — check connection";
          hint.style.color = "#dc3545";
        });
    }

    // ── Check which params are available for selected combination ─────────────
    function checkParamAvailability(crop, pest, year, week) {
      const paramSelect = document.getElementById("param");
      const hint = document.getElementById("paramHint");
      const submitBtn = document.getElementById("submitBtn");

      // Abort any previous in-flight request
      if (availabilityController) availabilityController.abort();
      availabilityController = new AbortController();

      hint.textContent = "Checking metric availability...";
      hint.style.color = "#6c757d";
      submitBtn.disabled = true;

      fetch(
        `/check_availability?crop=${encodeURIComponent(crop)}&pest=${encodeURIComponent(pest)}&year=${encodeURIComponent(year)}&week=${encodeURIComponent(week)}`,
        { signal: availabilityController.signal }
      )
        .then(res => {
          if (!res.ok) throw new Error("Network response was not ok");
          return res.json();
        })
        .then(data => {
          availabilityController = null;
          const availability = data.availability || {};
          let availableCount = 0;

          Array.from(paramSelect.options).forEach(opt => {
            if (!opt.value) return; // skip placeholder option

            const isAvailable = availability[opt.value] === true;
            opt.disabled = !isAvailable;

            // Keep label clean — strip any stale "(unavailable)" suffix first
            opt.textContent = opt.textContent.replace(/\s*\(unavailable\)$/, "");

            if (isAvailable) {
              availableCount++;
            } else {
              opt.textContent += " (unavailable)";
              // Auto-deselect if this option was selected
              if (opt.selected) {
                opt.selected = false;
              }
            }
          });

          // If the previously selected param is now deselected, reset to placeholder
          if (paramSelect.selectedIndex > 0 && paramSelect.options[paramSelect.selectedIndex].disabled) {
            paramSelect.value = "";
          }

          if (availableCount === 0) {
            hint.textContent = "No metrics available for this week";
            hint.style.color = "#dc3545";
            submitBtn.disabled = true;
          } else {
            hint.textContent = `${availableCount} metric(s) available`;
            hint.style.color = "#198754";
            submitBtn.disabled = false;
          }
        })
        .catch(err => {
          if (err.name === "AbortError") return; // stale request — ignore
          availabilityController = null;
          hint.textContent = "";
          submitBtn.disabled = false;
        });
    }

    // ── Helpers ───────────────────────────────────────────────────────────────
    function clearWeeks() {
      const weekSelect = document.getElementById("week");
      weekSelect.innerHTML = '<option value="">Week...</option>';
      weekSelect.disabled = false;
      const hint = document.getElementById("weekHint");
      hint.textContent = "";
    }

    function clearParamAvailability() {
      // Abort any in-flight availability check
      if (availabilityController) {
        availabilityController.abort();
        availabilityController = null;
      }
      const paramSelect = document.getElementById("param");
      Array.from(paramSelect.options).forEach(opt => {
        opt.disabled = false;
        opt.textContent = opt.textContent.replace(/\s*\(unavailable\)$/, "");
      });
      document.getElementById("paramHint").textContent = "";
      document.getElementById("submitBtn").disabled = false;
    }

    function handleImageError(img) {
      img.style.display = 'none';
      const unavailableEl = document.getElementById('dataNotAvailable');
      if (unavailableEl) unavailableEl.classList.remove('d-none');
    }

    // ── Form submit guard ─────────────────────────────────────────────────────
    document.getElementById('analyticsForm').addEventListener('submit', (e) => {
      const fields = ['crop', 'pest', 'year', 'week', 'param'];
      const missing = fields.filter(id => !document.getElementById(id).value);
      if (missing.length > 0) {
        e.preventDefault();
        alert(`Please select: ${missing.join(', ')}`);
        return;
      }
      document.getElementById('loadingOverlay').style.display = 'flex';
    });

    // ── Page-load restore ─────────────────────────────────────────────────────
    window.addEventListener('DOMContentLoaded', () => {
      // Step 1: restore crop selection (already set by server-rendered HTML)
      // Step 2: rebuild pest dropdown and restore pest selection
      onCropChange(INIT_PEST);

      // Step 3: restore year (already set by server-rendered HTML)
      // Step 4: fetch weeks and restore week + param selections
      if (INIT_CROP && INIT_PEST && INIT_YEAR) {
        fetchWeeks(INIT_WEEK);
      }

      // Restore param selection after availability check completes (handled inside fetchWeeks → checkParamAvailability)
      // But if no week is set yet, at least restore the param visually
      if (INIT_PARAM) {
        document.getElementById("param").value = INIT_PARAM;
      }
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>