Spaces:

Afantauzzi
/

triptrace-visualizer

Running

File size: 11,997 Bytes

1ca74c0

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TripTrace Visualizer — Uber × Search × Gmail</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6366F1', // indigo-500
            secondary: '#F59E0B' // amber-500
          }
        }
      }
    }
  </script>
  <!-- Leaflet (map) -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""
  />
  <script
    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""
  ></script>
  <!-- PapaParse for CSV -->
  <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
  <!-- Day.js for dates -->
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.11/dayjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.11/plugin/utc.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.11/plugin/timezone.js"></script>
  <style>
    /* Leaflet container sizing */
    #map { height: 520px; }
    .leaflet-div-icon { border: none; background: transparent; }
  </style>
</head>
<body class="min-h-screen bg-gray-50 text-gray-900">
  <header class="sticky top-0 z-10 bg-white/80 backdrop-blur border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 py-3 flex items-center gap-3">
      <div class="w-9 h-9 rounded-2xl bg-primary text-white grid place-items-center font-bold">TT</div>
      <h1 class="text-lg md:text-xl font-semibold">TripTrace Visualizer — <span class="text-gray-500">Uber × Search × Gmail</span></h1>
    </div>
  </header>

  <main class="max-w-7xl mx-auto px-4 py-6 grid md:grid-cols-5 gap-6">
    <!-- Controls -->
    <section class="md:col-span-2 space-y-6">
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4">
        <h2 class="font-semibold mb-3">1) Upload your data</h2>
        <div class="space-y-3 text-sm">
          <div>
            <label class="block font-medium">Uber Trips (CSV)</label>
            <input id="uberCsv" type="file" accept=".csv" class="mt-1 block w-full" />
            <p class="text-gray-500 mt-1">Required headers (case-insensitive): <code>timestamp,pickup_lat,pickup_lng,dropoff_lat,dropoff_lng,pickup_address,dropoff_address</code></p>
          </div>
          <div>
            <label class="block font-medium">Google Search History (JSON or CSV)</label>
            <input id="searchFile" type="file" accept=".json,.csv" class="mt-1 block w-full" />
            <p class="text-gray-500 mt-1">Google Takeout JSON supported (keys like <code>time,title,url</code>). CSV accepted with <code>date,query,url,source</code>.</p>
          </div>
          <div>
            <label class="block font-medium">Gmail Index (CSV) — optional</label>
            <input id="gmailCsv" type="file" accept=".csv" class="mt-1 block w-full" />
            <p class="text-gray-500 mt-1">Headers: <code>date,from,subject,labels</code>. (Export from your mailbox tool.)</p>
          </div>
        </div>
        <button id="loadBtn" class="mt-4 inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-primary text-white hover:bg-primary-600 disabled:opacity-40">
          Load & Visualize
        </button>
      </div>

      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4">
        <h2 class="font-semibold mb-3">2) Filter by day & time</h2>
        <div class="grid grid-cols-2 gap-3 text-sm">
          <div>
            <label class="block font-medium">Date</label>
            <input id="dateFilter" type="date" class="mt-1 w-full border rounded-lg px-2 py-1" />
          </div>
          <div>
            <label class="block font-medium">Hour (0–23)</label>
            <input id="hourFilter" type="number" min="0" max="23" step="1" class="mt-1 w-full border rounded-lg px-2 py-1" placeholder="All" />
          </div>
        </div>
        <div class="mt-3 flex gap-2">
          <button id="applyFilters" class="px-3 py-2 rounded-xl bg-primary text-white hover:bg-primary-600">Apply</button>
          <button id="clearFilters" class="px-3 py-2 rounded-xl bg-gray-200 hover:bg-gray-300">Clear</button>
        </div>
      </div>

      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 text-sm">
        <h2 class="font-semibold mb-3">Legend</h2>
        <ul class="space-y-1">
          <li class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-green-600 inline-block"></span> Pickup</li>
          <li class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-red-600 inline-block"></span> Dropoff</li>
          <li class="flex items-center gap-2"><span class="w-4 h-0.5 bg-blue-600 inline-block"></span> Route</li>
          <li class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-primary inline-block"></span> Search query</li>
          <li class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-secondary inline-block"></span> Gmail event</li>
        </ul>
      </div>

      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 text-sm">
        <h2 class="font-semibold mb-3">Export</h2>
        <button id="exportMd" class="px-3 py-2 rounded-xl bg-white border hover:bg-gray-50">Download Markdown Snapshot</button>
      </div>
    </section>

    <!-- Map & Activity -->
    <section class="md:col-span-3 space-y-6">
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <div id="map"></div>
      </div>

      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4">
        <h2 class="font-semibold mb-3">Activity (Selected Day/Hour)</h2>
        <div id="activity" class="grid md:grid-cols-2 gap-4 text-sm">
          <div>
            <h3 class="font-medium mb-2">Search History</h3>
            <ul id="searchList" class="space-y-1 text-gray-700"></ul>
          </div>
          <div>
            <h3 class="font-medium mb-2">Gmail</h3>
            <ul id="gmailList" class="space-y-1 text-gray-700"></ul>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="max-w-7xl mx-auto px-4 pb-8 text-xs text-gray-500">
    <p>All data is processed locally in your browser. No uploads leave your device.</p>
  </footer>

  <script>
    // ------------------------ Utilities ------------------------
    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || 'America/New_York';

    function parseCsv(file) {
      return new Promise((resolve, reject) => {
        Papa.parse(file, {
          header: true,
          skipEmptyLines: true,
          complete: (res) => resolve(res.data),
          error: reject,
        });
      });
    }

    function parseJson(file) {
      return file.text().then(txt => {
        try { return JSON.parse(txt); } catch (e) { return []; }
      });
    }

    function normalizeDate(d) {
      if (!d) return null;
      const guess = dayjs(d).isValid() ? dayjs(d) : (dayjs.utc(Number(d)).isValid() ? dayjs.utc(Number(d)) : null);
      return guess ? guess.tz(tz) : null;
    }

    function toNumber(x) { const n = Number(x); return Number.isFinite(n) ? n : null; }

    function formatTime(dj) { return dj ? dj.format('YYYY-MM-DD HH:mm') : ''; }

    function download(name, content) {
      const blob = new Blob([content], { type: 'text/markdown;charset=utf-8' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = name;
      a.click();
      URL.revokeObjectURL(a.href);
    }

    // ------------------------ State ------------------------
    let uber = [];      // {ts, pickup:[lat,lng], dropoff:[lat,lng], paddr, daddr}
    let searches = [];  // {ts, query, url, source}
    let mails = [];     // {ts, from, subject, labels}

    // ------------------------ Map Setup ------------------------
    const map = L.map('map');
    const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 20,
      attribution: '&copy; OpenStreetMap'
    }).addTo(map);

    const groupRoutes = L.layerGroup().addTo(map);
    const groupPickups = L.layerGroup().addTo(map);
    const groupDropoffs = L.layerGroup().addTo(map);
    const groupSearches = L.layerGroup().addTo(map);
    const groupMails = L.layerGroup().addTo(map);

    function fitAll() {
      const group = L.featureGroup([
        groupRoutes, groupPickups, groupDropoffs, groupSearches, groupMails
      ]);
      try { map.fitBounds(group.getBounds(), { padding: [20,20] }); }
      catch { map.setView([40.7128, -74.006], 11); }
    }

    function marker(colorClass, lat, lng, title) {
      const el = document.createElement('div');
      el.className = `w-3 h-3 rounded-full ${colorClass} ring-2 ring-white shadow`;
      return L.marker([lat, lng], { icon: L.divIcon({ html: el, iconSize: [12,12] })}).bindTooltip(title);
    }

    function render(dayStr, hour) {
      [groupRoutes, groupPickups, groupDropoffs, groupSearches, groupMails].forEach(g=>g.clearLayers());
      document.getElementById('searchList').innerHTML = '';
      document.getElementById('gmailList').innerHTML = '';

      const day = dayStr ? dayjs(dayStr).startOf('day') : null;

      const inWindow = (ts) => {
        if (!day) return true;
        if (hour==='' || hour===null || Number.isNaN(Number(hour))) {
          return ts.isSame(day, 'day');
        } else {
          const start = day.add(hour, 'hour');
          const end = start.add(1, 'hour');
          return ts.isAfter(start) && ts.isBefore(end);
        }
      };

      // Uber trips
      const tripBounds = [];
      uber.filter(u => inWindow(u.ts)).forEach(u => {
        const line = L.polyline([u.pickup, u.dropoff], { color: '#2563eb', weight: 3, opacity: 0.8 });
        line.addTo(groupRoutes);
        const m1 = marker('bg-green-600', u.pickup[0], u.pickup[1], `${formatTime(u.ts)}\nPickup\n${u.paddr || ''}`).addTo(groupPickups);
        const m2 = marker('bg-red-600', u.dropoff[0], u.dropoff[1], `${formatTime(u.ts)}\nDropoff\n${u.daddr || ''}`).addTo(groupDropoffs);
        tripBounds.push(u.pickup, u.dropoff);
      });

      // Searches
      searches.filter(s => inWindow(s.ts)).forEach(s => {
        const li = document.createElement('li');
        li.innerHTML = `<span class="inline-flex w-2 h-2 rounded-full bg-primary mr-2 align-middle"></span>${formatTime(s.ts)} — <span class="font-medium">${escapeHtml(s.query)}</span> ${s.url ? `· <a class='text-primary-700 underline' href='${s.url}' target='_blank' rel='noreferrer'>link</a>`:''}`;
        document.getElementById('searchList').appendChild(li);
      });

      // Gmail
      mails.filter(m => inWindow(m.ts)).forEach(m => {
        const li = document.createElement('li');
        li.innerHTML = `<span class="inline-flex w-2 h-2 rounded-full bg-secondary mr-2 align-middle"></span>${formatTime(m.ts)} — <span class="font-medium">${escapeHtml(m.from)}</span>: ${escapeHtml(m.subject)} ${m.labels?`<span class='text-gray-500'>(${escapeHtml(m.labels)})</span>`:''}`;
        document.getElementById('gmailList').appendChild(li);
      });

      // Fit map
      if (tripBounds.length) {
        const bounds = L.latLngBounds(tripBounds);
        map.fitBounds(bounds.pad(0.25));
      } else {
        fitAll();
      }
    }

    function escapeHtml(str) {
      return (str||'').replace(/[&<>"']/g, (c)=>({
        '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'
      })[c]);
    }

    // Initialize map center
    map.setView([40.7128, -74.006], 11);
  </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>