splatone 0.0.22 → 0.0.23

package/views/index.ejs

@@ -31,10 +31,14 @@
 
     <div class="panel-body">
       <section class="panel-section">
+        <% if (browseMode) { %>
+        <p class="muted">browseモードでは地図の閲覧のみ可能です。範囲描画とクロール開始は無効化されています。</p>
+        <% } else { %>
         <p class="muted">
           地図上で <strong>矩形をドラッグ</strong> して BBOX を指定してください。<br>
           クリックした三角形と、<em>共有辺を持つ別Hexの三角形</em>が同時にハイライトされます。
         </p>
+        <% } %>
       </section>
 
       <section class="panel-section">
@@ -56,23 +60,25 @@
           </select>
         </label>
 
-        <label class="check">
-          <input id="toggleTriangles" type="checkbox" checked />
-          <span>Show triangles</span>
-        </label>
+        <div class="bbox-row">
+          <span id="bboxLabel" class="bbox-label"></span>
+        </div>
+      </section>
 
-        <label class="check">
-          <input id="toggleHexLabels" type="checkbox" />
-          <span>Show Hex IDs</span>
+      <section class="panel-section">
+        <label class="field">
+          <span>CLI Command</span>
+          <textarea id="cliCommand" class="cli-command" rows="4" readonly spellcheck="false"></textarea>
         </label>
-
-        <div class="panel-actions">
-          <button id="clear" class="btn">Clear</button>
+        <div class="copy-row">
+          <button id="copyCliCommand" class="btn" type="button">Copy to clipboard</button>
         </div>
+      </section>
 
-        <div class="bbox-row">
-          <span id="bboxLabel" class="bbox-label"></span>
-        </div>
+      <section class="panel-section" id="statsSection" hidden>
+        <h3>統計情報</h3>
+        <div id="statsSummary" class="stats-summary muted"></div>
+        <div id="statsHexList" class="stats-hex-list"></div>
       </section>
 
       <section class="panel-section">
@@ -91,6 +97,15 @@
   <!-- パネルの背面オーバーレイ -->
   <div id="panelOverlay" class="panel-overlay" hidden></div>
 
+  <% if (browseMode) { %>
+  <div id="dropOverlay" class="drop-overlay" hidden>
+    <div class="drop-overlay__inner">
+      <p class="drop-overlay__title">結果ファイルをドロップ</p>
+      <p class="drop-overlay__subtitle">crawlerのresult*.jsonやエクスポートJSONを読み込めます</p>
+    </div>
+  </div>
+  <% } %>
+
   <!-- 地図 -->
   <div id="map"></div>
 
@@ -111,6 +126,13 @@
   <script type="module">
     const lat = <%= lat %>;
     const lon = <%= lon %>;
+    const defaultGeometry = <%- JSON.stringify(defaultGeometry || {}) %>;
+    const browseMode = <%- JSON.stringify(Boolean(browseMode)) %>;
+    const cliContext = {
+      baseCommand: <%- JSON.stringify(cliBaseCommand || '') %>,
+      plugin: <%- JSON.stringify(selectedPlugin || '') %>,
+      visualizers: <%- JSON.stringify(selectedVisualizers || []) %>,
+    };
     const socket = io({
       path: "/socket",
       reconnection: false
@@ -155,6 +177,54 @@
       if (label) label.textContent = v + '%';
     }
 
+    function formatPercentValue(value) {
+      if (!Number.isFinite(value)) return '0%';
+      return (Math.round(Math.max(0, Math.min(1, value)) * 1000) / 10) + '%';
+    }
+
+    function renderStatsPanel(stats) {
+      const section = document.getElementById('statsSection');
+      const summaryEl = document.getElementById('statsSummary');
+      const hexListEl = document.getElementById('statsHexList');
+      if (!section || !summaryEl || !hexListEl) return;
+      if (!stats || !stats.totals) {
+        section.hidden = true;
+        summaryEl.textContent = '';
+        hexListEl.textContent = '';
+        return;
+      }
+      const totals = stats.totals;
+      section.hidden = false;
+      summaryEl.innerHTML = `
+        <div>Hex総数: <strong>${totals.hexes ?? 0}</strong></div>
+        <div>カテゴリ数: <strong>${totals.categories ?? 0}</strong></div>
+        <div>取得済み: <strong>${totals.crawled ?? 0}</strong></div>
+        <div>残り推定: <strong>${totals.remaining ?? 0}</strong></div>
+        <div>進捗: <strong>${formatPercentValue(totals.percent ?? 0)}</strong></div>
+      `;
+
+      const entries = Object.entries(stats.hexes ?? {});
+      if (!entries.length) {
+        hexListEl.innerHTML = '<p class="muted">Hex単位の統計はまだありません。</p>';
+        return;
+      }
+      entries.sort((a, b) => (b[1]?.percent ?? 0) - (a[1]?.percent ?? 0));
+      const rows = entries.slice(0, 6).map(([hexId, info]) => {
+        const percent = formatPercentValue(info?.percent ?? 0);
+        const crawled = info?.crawled ?? 0;
+        const expected = info?.expected ?? info?.total ?? (crawled + (info?.remaining ?? 0));
+        const remaining = info?.remaining ?? Math.max(0, expected - crawled);
+        return `
+          <div class="stats-hex-row">
+            <span class="stats-hex-label">Hex ${hexId}</span>
+            <span class="stats-hex-progress">${percent}</span>
+            <span class="stats-hex-detail">${crawled}/${expected} (残り${remaining})</span>
+          </div>
+        `;
+      });
+      hexListEl.innerHTML = rows.join('');
+    }
+
     function downloadJSON(filename, obj) {
       const json = JSON.stringify(obj, null, 2);
       const blob = new Blob([json], {
@@ -170,6 +240,89 @@
       URL.revokeObjectURL(url);
     }
 
+  let currentDrawnGeoJSON = null;
+  let currentDrawKind = null;
+  let currentBboxArray = null;
+
+  const cliTextarea = document.getElementById('cliCommand');
+  const copyCliButton = document.getElementById('copyCliCommand');
+
+    function quoteSingle(value) {
+      const safe = String(value ?? '').replace(/'/g, "''");
+      return "'" + safe + "'";
+    }
+
+    function buildCliCommandString() {
+      if (!cliContext?.baseCommand) return '';
+      const parts = [cliContext.baseCommand.trim()].filter(Boolean);
+      if (cliContext.plugin) {
+        parts.push('-p', cliContext.plugin);
+      }
+      if (Array.isArray(cliContext.visualizers)) {
+        cliContext.visualizers.forEach((vis) => {
+          if (vis) parts.push(`--vis-${vis}`);
+        });
+      }
+      const keywordsInput = document.getElementById('keywords');
+      const keywordsVal = keywordsInput?.value?.trim();
+      if (keywordsVal) {
+        parts.push('-k', quoteSingle(keywordsVal));
+      }
+      const cellSizeInput = document.getElementById('cellSize');
+      const cellSizeVal = cellSizeInput?.value?.trim();
+      if (cellSizeVal) {
+        parts.push('--ui-cell-size', cellSizeVal);
+      }
+      const unitsSelect = document.getElementById('units');
+      const unitsVal = unitsSelect?.value;
+      if (unitsVal) {
+        parts.push('--ui-units', unitsVal);
+      }
+      if (currentDrawKind === 'rectangle' && Array.isArray(currentBboxArray)) {
+        parts.push('--ui-bbox', currentBboxArray.join(','));
+      } else if (currentDrawnGeoJSON) {
+        parts.push('--ui-polygon', quoteSingle(JSON.stringify(currentDrawnGeoJSON)));
+      }
+      return parts.join(' ').replace(/\s+/g, ' ').trim();
+    }
+
+    function updateCliCommand() {
+      if (!cliTextarea) return;
+      cliTextarea.value = buildCliCommandString();
+    }
+
+    copyCliButton?.addEventListener('click', async () => {
+      if (!cliTextarea) return;
+      const text = cliTextarea.value;
+      try {
+        if (navigator.clipboard?.writeText) {
+          await navigator.clipboard.writeText(text);
+        } else {
+          cliTextarea.focus();
+          cliTextarea.select();
+          document.execCommand('copy');
+          window.getSelection()?.removeAllRanges?.();
+        }
+        Toastify({
+          text: 'CLIコマンドをコピーしました',
+          duration: 3000,
+          gravity: 'bottom',
+          position: 'center',
+          className: 'toast-info'
+        }).showToast();
+      } catch (err) {
+        Toastify({
+          text: `コピーに失敗しました: ${err?.message || err}`,
+          duration: 4000,
+          gravity: 'bottom',
+          position: 'center',
+          className: 'toast-error'
+        }).showToast();
+      }
+    });
+
+    updateCliCommand();
+
     socket.on('connect', () => {
       //console.log('Connected to server');
     });
@@ -178,11 +331,20 @@
       //console.log('Disconnected from server');
     });
 
-    let sessionId = null;
-    let visualizers = {};
-    let results = {};
-    let files = {};
-    let layerControl = null;
+    document.getElementById('keywords')?.addEventListener('input', updateCliCommand);
+    document.getElementById('cellSize')?.addEventListener('input', updateCliCommand);
+    document.getElementById('units')?.addEventListener('change', updateCliCommand);
+
+  let sessionId = null;
+  let visualizers = {};
+  let results = {};
+  let files = {};
+  let layerControl = null;
+  const hexProgress = {};
+    let welcomeReadyResolve;
+    const welcomeReady = new Promise((resolve) => {
+      welcomeReadyResolve = resolve;
+    });
     socket.on("welcome", async (res) => {
       //console.log(`welcome ${res.sessionId} at ${new Date(res.time).toLocaleTimeString()}`);
       //console.log("VIS", res.visualizers);
@@ -193,6 +355,10 @@
         return [vis, m.entry ?? m.default ?? m[vis]];
       })));
       //console.log(visualizers);
+      if (welcomeReadyResolve) {
+        welcomeReadyResolve();
+        welcomeReadyResolve = null;
+      }
     });
 
     function generateLegend(legends) {
@@ -251,28 +417,35 @@
       }
     });
     socket.on('progress', (res) => {
-      //console.table(res.progress);
-      //console.log(Object.values(res.progress));
-      let {
+      //res.currentHexはカテゴリごとのcrawled/totalを保持している
+      const { crawled, total } = Object.values(res.currentHex ?? {}).reduce(
+        (acc, cat) => (cat == null ? acc : {
+          crawled: acc.crawled + (cat.crawled ?? 0),
+          total: acc.total + (cat.total ?? 0)
+        }),
+        { crawled: 0, total: 0 }
+      );
+      const safeTotal = Math.max(1, total);
+      const normalized = total === 0 ? 1 : Math.min(1, crawled / safeTotal);
+      hexProgress[res.hexId] = {
         crawled,
-        total
-      } = Object.values(res.progress).reduce(
-        (acc, g) => (g == null ? acc : {
-          crawled: acc.crawled + (g.crawled ?? 0),
-          total: acc.total + (g.total ?? 0)
-        }), {
-          crawled: 0,
-          total: 0
-        }
+        total: safeTotal,
+        normalized
+      };
+
+      const aggregated = Object.values(hexProgress).reduce(
+        (acc, hex) => ({
+          crawled: acc.crawled + (hex?.crawled ?? 0),
+          total: acc.total + (hex?.total ?? 0)
+        }),
+        { crawled: 0, total: 0 }
       );
-      if (total == 0) {
-        crawled = 1, total = 1;
-      }
-      const percent = Math.round((crawled / total) * 100000) / 1000;
-      //console.log(`[Done] ${crawled} / ${total} --> ${percent}`);
+      const aggSafeTotal = Math.max(1, aggregated.total);
+      const overallNormalized = aggregated.total === 0 ? 1 : Math.min(1, aggregated.crawled / aggSafeTotal);
+      const percent = Math.round(overallNormalized * 100000) / 1000;
       setProgress(document.getElementById("progressCrawl"), percent);
       //ここでHexのプログレスグラデーションレイヤのOpacity調整
-      highlightHexById(res.hexId, 1 - res.progress[res.hexId].percent, "#263238");
+      highlightHexById(res.hexId, 1 - normalized, "#263238");
     });
 
     function isPlainObject(a) {
@@ -348,79 +521,171 @@
       }); // only one argument is expected
     });
 
-    let latestResult = {};
+    let latestResult = null;
     let latestFile = null;
     const overlays = {};
-    socket.on('result', async (res, callback) => {
-      //console.log("result");
-      latestResult["_"]["visualizers"] = res.visualizers;
-      latestResult["_"]["plugin"] = res.plugin;
-      clearHexHighlight();
-      if (res.geoJson == null) {
-        res.geoJson = results[res.resultId];
-      } else {
-        results[res.resultId] = res.geoJson;
+    const resultExtras = {};
+
+    async function visualizeBundle(bundle, { sourceLabel = 'server' } = {}) {
+      await welcomeReady;
+      if (!bundle || typeof bundle !== 'object') {
+        Toastify({
+          text: '結果データを読み込めませんでした',
+          duration: 4000,
+          gravity: 'bottom',
+          position: 'center',
+          className: 'toast-error'
+        }).showToast();
+        return false;
       }
-      latestResult = {
-        ...latestResult,
-        ...res.geoJson
+
+      clearHexHighlight();
+      const geoJson = bundle.geoJson ?? {};
+      const palette = bundle.palette ?? {};
+      const visOptionsFromServer = bundle.visOptions ?? {};
+
+      renderStatsPanel(bundle.context?.stats ?? null);
+      bundle.extra = {
+        ...(bundle.extra ?? {}),
+        ...resultExtras
       };
-      for (const vis in visualizers) {
-        const layers = await visualizers[vis](map, res.geoJson[vis], {
-          palette: res.palette,
-          visOptions:res.visOptions[vis]
-        });
-        //console.log("【レイヤ】\n", JSON.stringify(layers,null,4));
-        if ((layers == null)) {
-          //SKIP
-        } else if (layers.hasOwnProperty("type") && layers["type"] == "FeatureCollection") {
-          //レイヤ一つ
-          overlays[`[${vis}]`] = layers;
-        } else {
+      latestResult = bundle;
+      latestFile = null;
+
+      const bundleHexGrid = bundle.context?.hexGrid ?? bundle.extra?.hex ?? null;
+      let bundleTriangles = bundle.context?.triangles ?? null;
+      if (!bundleTriangles) {
+        const extraTriangles = bundle.extra?.triangles;
+        if (Array.isArray(extraTriangles)) {
+          bundleTriangles = extraTriangles.find((entry) => entry?.type === 'FeatureCollection') ?? null;
+        } else if (extraTriangles?.type === 'FeatureCollection') {
+          bundleTriangles = extraTriangles;
+        }
+      }
+      if (bundleHexGrid || bundleTriangles) {
+        refreshGridLayers(bundleHexGrid ?? null, bundleTriangles ?? null, { addToMap: false });
+      }
+
+      if (layerControl) {
+        map.removeControl(layerControl);
+        layerControl = null;
+      }
+
+      Object.keys(overlays).forEach((key) => {
+        const layer = overlays[key];
+        if (!layer) return;
+        if (typeof layer.remove === 'function') {
+          try { layer.remove(); } catch (err) { console.warn('failed to remove layer', err); }
+        } else if (typeof layer.removeFrom === 'function') {
+          try { layer.removeFrom(map); } catch (err) { console.warn('failed to remove layer', err); }
+        } else if (layer instanceof L.Layer) {
+          try { map.removeLayer(layer); } catch (err) { console.warn('failed to remove layer', err); }
+        }
+        delete overlays[key];
+      });
+
+      for (const vis of Object.keys(visualizers)) {
+        const handler = visualizers[vis];
+        if (typeof handler !== 'function') continue;
+        let layers = null;
+        try {
+          layers = await handler(map, geoJson[vis], {
+            palette,
+            visOptions: visOptionsFromServer[vis]
+          });
+        } catch (err) {
+          console.error(`[visualizer:${vis}] failed`, err);
+          continue;
+        }
+        if (!layers) continue;
+        if (isPlainObject(layers) && !layers.type) {
           for (const name in layers) {
-            //console.log("Lay", vis, name);
             overlays[`[${vis}] ${name}`] = layers[name];
           }
+        } else {
+          overlays[`[${vis}]`] = layers;
         }
       }
-      //進捗バーを消して凡例を表示
-      if (myProgress) map.removeControl(myProgress);
-      myLegend = new BottomLeftLegend().addTo(map);
+
+      if (myProgress) {
+        map.removeControl(myProgress);
+        myProgress = null;
+      }
+      if (myLegend) {
+        map.removeControl(myLegend);
+        myLegend = null;
+      }
       document.getElementById('map_legend')?.replaceChildren();
+      myLegend = new BottomLeftLegend().addTo(map);
       const ul = document.createElement('div');
       ul.className = 'legend_ul';
-      const palette = [];
-      for (const cat in res.palette) {
-        palette.push({
-          category: cat,
-          fill: res.palette[cat].color,
-          stroke: res.palette[cat].darken
-        });
+      const paletteEntries = Object.entries(palette).map(([category, colors]) => ({
+        category,
+        fill: colors?.color ?? '#ffffff',
+        stroke: colors?.darken ?? colors?.color ?? '#ffffff'
+      }));
+      ul.innerHTML = generateLegend(paletteEntries);
+      document.getElementById('map_legend')?.appendChild(ul);
+
+      const overlayOptions = { ...overlays };
+      if (drawnItems && drawnItems.getLayers().length > 0) {
+        overlayOptions['Boundary'] = drawnItems;
+      }
+      if (hexLayer) {
+        overlayOptions['Hex Grid'] = hexLayer;
+      }
+      if (triLayer) {
+        overlayOptions['Tri Grid'] = triLayer;
       }
-      ul.innerHTML = generateLegend(palette);
-      //console.log(overlays);
-      layerControl = L.control.layers([baseLayer], {
-        ...overlays,
-        "Boundary": drawnItems,
-        "Hex Grid": hexLayer,
-        "Tri Grid": triLayer
-      }, {
+
+      if (layerControl) {
+        map.removeControl(layerControl);
+      }
+      layerControl = L.control.layers([baseLayer], overlayOptions, {
         position: 'topleft'
       });
       layerControl.addTo(map);
-      document.getElementById("map_legend")?.appendChild(ul);
-      document.getElementById("download-json").addEventListener("click", async () => {
-        const stamp = new Date().toISOString().replace(/[:.]/g, "-");
-        if(latestFile===null){
-          downloadJSON(`splatone-${stamp}.json`, latestResult);
-        }else{
-          await downloadJSONFile(`splatone-${stamp}.json`, latestFile);
-        }
-        let sessionId = null;
-      });
+
+      const downloadBtn = document.getElementById('download-json');
+      if (downloadBtn && downloadBtn.dataset.bound !== '1') {
+        downloadBtn.dataset.bound = '1';
+        downloadBtn.addEventListener('click', async () => {
+          const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+          if (latestFile === null) {
+            if (latestResult) {
+              downloadJSON(`splatone-${stamp}.json`, latestResult);
+            }
+          } else {
+            await downloadJSONFile(`splatone-${stamp}.json`, latestFile);
+          }
+        });
+      }
+
+      Toastify({
+        text: `結果を読み込みました (${sourceLabel})`,
+        duration: 2600,
+        gravity: 'bottom',
+        position: 'center',
+        className: 'toast-success'
+      }).showToast();
+      return true;
+    }
+    socket.on('result', async (res, callback) => {
+      let bundle = res.bundle ?? null;
+      if (!bundle) {
+        bundle = results[res.resultId];
+      } else {
+        results[res.resultId] = bundle;
+      }
+      if (!bundle) {
+        console.warn('[result] bundle not available yet');
+        callback({ pong: Date.now(), ok: false });
+        return;
+      }
+      const success = await visualizeBundle(bundle, { sourceLabel: 'server' });
       callback({
         pong: Date.now(),
-        ok: true
+        ok: Boolean(success)
       });
     });
 
@@ -456,32 +721,30 @@
     map.addLayer(drawnItems);
 
     // Draw control（矩形・ポリゴンのみ）
-    const drawControl = new L.Control.Draw({
-      position: 'topleft',
-      draw: {
-        polygon: {
-          allowIntersection: false,
-          showArea: true,
-          metric: true,
-        },
-        polyline: false,
-        marker: false,
-        circle: false,
-        circlemarker: false,
-        rectangle: {
-          shapeOptions: {
-            weight: 1,
-            fillOpacity: 0
+    let drawControl = null;
+    if (!browseMode) {
+      drawControl = new L.Control.Draw({
+        position: 'topleft',
+        draw: {
+          polygon: {
+            allowIntersection: false,
+            showArea: true,
+            metric: true,
+          },
+          polyline: false,
+          marker: false,
+          circle: false,
+          circlemarker: false,
+          rectangle: {
+            shapeOptions: {
+              weight: 1,
+              fillOpacity: 0
+            }
           }
-        }
-      },
-      /* edit: {
-        featureGroup: drawnItems,
-        edit: true,
-        remove: true
-      }*/
-    });
-    map.addControl(drawControl);
+        },
+      });
+      map.addControl(drawControl);
+    }
 
     //印刷
     L.easyPrint({
@@ -500,7 +763,6 @@
     let myProgress = null;
     let hexLayerIndex = {}; // hexId -> layer
     let triLayerIndex = {}; // triangleId -> layer
-    let hexLabelLayer = L.layerGroup(); // Hex IDラベル群
 
     // Util: Bounds → "minLon,minLat,maxLon,maxLat"
     function boundsToBbox(bounds) {
@@ -564,193 +826,185 @@
       }
     }
 
-    // Hex IDラベルを作成
-    function renderHexLabels(hexFC) {
-      hexLabelLayer.clearLayers();
-      hexFC.features.forEach(f => {
-        const id = f.properties?.hexId;
-        if (!id) return;
-        const coords = f.geometry.coordinates[0];
-        let sumLat = 0,
-          sumLon = 0,
-          n = 0;
-        coords.slice(0, -1).forEach(([lon, lat]) => {
-          sumLat += lat;
-          sumLon += lon;
-          n++;
+    function refreshGridLayers(hexFC = null, trianglesFC = null, { addToMap = true } = {}) {
+      const hexWasVisible = hexLayer ? map.hasLayer(hexLayer) : false;
+      const triWasVisible = triLayer ? map.hasLayer(triLayer) : false;
+
+      if (hexLayer) {
+        map.removeLayer(hexLayer);
+        hexLayer = null;
+      }
+      if (triLayer) {
+        map.removeLayer(triLayer);
+        triLayer = null;
+      }
+      hexLayerIndex = {};
+      triLayerIndex = {};
+
+      if (hexFC) {
+        const nextHexLayer = L.geoJSON(hexFC, {
+          style: {
+            weight: 2,
+            opacity: 0.5,
+            fillOpacity: 0.1,
+            color: "#37474F",
+            fillColor: "#546E7A",
+          },
+          onEachFeature: (feature, layer) => {
+            const hid = feature.properties?.hexId;
+            if (hid != null) hexLayerIndex[hid] = layer;
+            const triIds = feature.properties?.triIds?.length ? feature.properties.triIds.join(', ') : 'N/A';
+            layer.bindPopup(`Hex ID: ${hid}<br>Triangles: ${triIds}`);
+          }
         });
-        const lat = sumLat / n,
-          lon = sumLon / n;
+        hexLayer = nextHexLayer;
+        if (addToMap || hexWasVisible) {
+          nextHexLayer.addTo(map);
+        }
+      }
+
+      if (trianglesFC) {
+        const nextTriLayer = L.geoJSON(trianglesFC, {
+          style: {
+            weight: 1,
+            opacity: 0.8,
+            fillOpacity: 0,
+            fillColor: "#EC407A",
+            color: "#F50057",
+            dashArray: "15,30",
+            dashOffset: 0,
+          },
+          onEachFeature: (feature, layer) => {
+            const pid = feature.properties?.parentHexId ?? 'N/A';
+            const tid = feature.properties?.triangleId ?? 'N/A';
+            const cross = feature.properties?.crossNeighbors ?? [];
+            const neighborHexIds = feature.properties?.neighborHexIds ?? [];
+
+            triLayerIndex[tid] = layer;
+
+            layer.bindPopup(
+              `Triangle: ${tid}<br>` +
+              `Parent Hex: ${pid}<br>` +
+              `Cross neighbors: ${cross.length ? cross.join(', ') : 'None'}<br>` +
+              `Neighbor Hexes: ${neighborHexIds.length ? neighborHexIds.join(', ') : 'None'}`
+            );
+
+            layer.on('click', () => {
+              clearHexHighlight();
+              clearTriHighlight();
+              highlightHexById(pid);
+              highlightTriangle(tid, {
+                weight: 3,
+                opacity: 1,
+                fillOpacity: 0.30
+              });
+
+              cross.forEach(cid => {
+                highlightTriangle(cid, {
+                  weight: 2,
+                  opacity: 1,
+                  fillOpacity: 0.25
+                });
+                const neighborLayer = triLayerIndex[cid];
+                if (neighborLayer) {
+                  const pHex = neighborLayer.feature?.properties?.parentHexId;
+                  if (pHex != null) highlightHexById(pHex);
+                }
+              });
+            });
 
-        const icon = L.divIcon({
-          html: `<div style="font-size:12px;font-weight:600;background:rgba(255,255,255,.85);padding:2px 4px;border-radius:4px;border:1px solid #999;">${id}</div>`,
-          className: '',
-          iconSize: [0, 0]
+            layer.on('mouseout', () => {
+              clearTriHighlight();
+            });
+          }
         });
-        L.marker([lat, lon], {
-          icon
-        }).addTo(hexLabelLayer);
-      });
+        triLayer = nextTriLayer;
+        if (addToMap || triWasVisible) {
+          nextTriLayer.addTo(map);
+        }
+      }
     }
 
     // Hex / Triangles を描画
     function renderLayers(hexFC, trianglesFC) {
-      if (hexLayer) map.removeLayer(hexLayer);
-      if (triLayer) map.removeLayer(triLayer);
       document.getElementById('map_legend')?.replaceChildren();
       if (myLegend) map.removeControl(myLegend);
       if (myStartBtn) map.removeControl(myStartBtn);
-      hexLabelLayer.removeFrom(map);
-      hexLayerIndex = {};
-      triLayerIndex = {};
 
-      // 六角形
-      hexLayer = L.geoJSON(hexFC, {
-        style: {
-          weight: 2,
-          opacity: 0.5,
-          fillOpacity: 0.1,
-          color: "#37474F",
-          fillColor: "#546E7A",
-        },
-        onEachFeature: (feature, layer) => {
-          const hid = feature.properties?.hexId;
-          if (hid != null) hexLayerIndex[hid] = layer;
-          const triIds = feature.properties?.triIds?.length ? feature.properties.triIds.join(', ') : 'N/A';
-          layer.bindPopup(`Hex ID: ${hid}<br>Triangles: ${triIds}`);
-        }
-      }).addTo(map);
+      refreshGridLayers(hexFC, trianglesFC, { addToMap: true });
 
-      const BottomLeftPanel = L.Control.extend({
-        options: {
-          position: 'bottomleft'
-        },
-        onAdd(map) {
-          const div = L.DomUtil.create('div', 'map-bottom-left-control');
-          div.innerHTML = `
+      if (!browseMode) {
+        const BottomLeftPanel = L.Control.extend({
+          options: {
+            position: 'bottomleft'
+          },
+          onAdd(map) {
+            const div = L.DomUtil.create('div', 'map-bottom-left-control');
+            div.innerHTML = `
       <div class="panel-contents">
         <button class="btn"id="doSomething">Start Crawling!</button>
       </div>`;
-          // コントロール内の操作が地図ドラッグに奪われないようにする
-          L.DomEvent.disableClickPropagation(div);
-          L.DomEvent.disableScrollPropagation(div);
-
-          const btn = div.querySelector('#doSomething');
-          btn.addEventListener('click', (ev) => {
-            ev.preventDefault();
-            ev.stopPropagation(); // 念のため地図へのバブリングも止める
-            if (myStartBtn) map.removeControl(myStartBtn);
-            myProgress = new BottomLeftProgressBar().addTo(map);
-            // ---- 任意の処理 ----
-            socket.emit("crawling", {
-              sessionId: sessionId,
-            });
-          }, {
-            once: true
-          });
-
-          return div;
-        }
-      });
-      myStartBtn = new BottomLeftPanel().addTo(map);
-
-      // 三角形
-      triLayer = L.geoJSON(trianglesFC, {
-        style: {
-          weight: 1,
-          opacity: 0.8,
-          fillOpacity: 0,
-          fillColor: "#EC407A",
-          color: "#F50057",
-          dashArray: "15,30",
-          dashOffset: 0,
-        },
-        onEachFeature: (feature, layer) => {
-          const pid = feature.properties?.parentHexId ?? 'N/A';
-          const tid = feature.properties?.triangleId ?? 'N/A';
-          const cross = feature.properties?.crossNeighbors ?? [];
-          const neighborHexIds = feature.properties?.neighborHexIds ?? [];
-
-          triLayerIndex[tid] = layer;
-
-          layer.bindPopup(
-            `Triangle: ${tid}<br>` +
-            `Parent Hex: ${pid}<br>` +
-            `Cross neighbors: ${cross.length ? cross.join(', ') : 'None'}<br>` +
-            `Neighbor Hexes: ${neighborHexIds.length ? neighborHexIds.join(', ') : 'None'}`
-          );
-
-          layer.on('click', () => {
-            // クリック時：当該三角形＋交差隣接三角形をハイライト
-            clearHexHighlight();
-            clearTriHighlight();
-            highlightHexById(pid); // 親Hexも強調
-            highlightTriangle(tid, {
-              weight: 3,
-              opacity: 1,
-              fillOpacity: 0.30
-            }); // クリック対象
-
-            // 隣接（別Hex）の三角形を同時に強調
-            cross.forEach(cid => {
-              highlightTriangle(cid, {
-                weight: 2,
-                opacity: 1,
-                fillOpacity: 0.25
+            L.DomEvent.disableClickPropagation(div);
+            L.DomEvent.disableScrollPropagation(div);
+
+            const btn = div.querySelector('#doSomething');
+            btn.addEventListener('click', (ev) => {
+              ev.preventDefault();
+              ev.stopPropagation();
+              if (myStartBtn) map.removeControl(myStartBtn);
+              myProgress = new BottomLeftProgressBar().addTo(map);
+              socket.emit("crawling", {
+                sessionId: sessionId,
               });
-              // その親Hexも薄く強調
-              const neighborLayer = triLayerIndex[cid];
-              if (neighborLayer) {
-                const pHex = neighborLayer.feature?.properties?.parentHexId;
-                if (pHex != null) highlightHexById(pHex);
-              }
+            }, {
+              once: true
             });
-          });
-
-          // マウスアウトで三角形のハイライトだけ戻す（Hexは維持）
-          layer.on('mouseout', () => {
-            clearTriHighlight();
-          });
-        }
-      });
 
-      // 三角形トグル
-      if (document.getElementById('toggleTriangles').checked) {
-        triLayer.addTo(map);
+            return div;
+          }
+        });
+        myStartBtn = new BottomLeftPanel().addTo(map);
       }
 
-      // Hex ID ラベル
-      renderHexLabels(hexFC);
-      if (document.getElementById('toggleHexLabels').checked) {
-        hexLabelLayer.addTo(map);
+      const layers = [hexLayer, triLayer].filter(Boolean);
+      if (layers.length > 0) {
+        const bounds = L.featureGroup(layers).getBounds();
+        if (bounds.isValid()) map.fitBounds(bounds, {
+          padding: [20, 20]
+        });
       }
-
-      // ビュー調整
-      const layers = [hexLayer];
-      if (document.getElementById('toggleTriangles').checked) layers.push(triLayer);
-      const bounds = L.featureGroup(layers).getBounds();
-      if (bounds.isValid()) map.fitBounds(bounds, {
-        padding: [20, 20]
-      });
     }
 
     // API呼び出し
-    async function loadHexgridByBounds(bounds, drawn = null) {
+    async function loadHexgridByBounds(bounds, drawn = null, shapeKind = null) {
+      if (browseMode) {
+        return;
+      }
+      currentBboxArray = [
+        Number(bounds.getWest().toFixed(6)),
+        Number(bounds.getSouth().toFixed(6)),
+        Number(bounds.getEast().toFixed(6)),
+        Number(bounds.getNorth().toFixed(6)),
+      ];
+  currentDrawnGeoJSON = drawn || null;
+  currentDrawKind = drawn ? (shapeKind || 'polygon') : null;
       const bbox = boundsToBbox(bounds);
       document.getElementById('bboxLabel').textContent = `BBOX: ${bbox}`;
+      updateCliCommand();
 
       const cellSize = document.getElementById('cellSize').value.trim();
       const units = document.getElementById('units').value.trim();
       const keywords = document.getElementById('keywords').value.trim();
-      latestResult["_"] ??= {};
-      latestResult["_"]["keywords"] = keywords;
+      resultExtras.keywords = keywords;
       socket.once("hexgrid", (res) => {
         if (res.sessionId) sessionId = res.sessionId;
         //console.log(`hexgrid received (${res.hex.features.length} hexes, ${res.triangles.features.length} triangles)`);
+        Object.keys(hexProgress).forEach((key) => delete hexProgress[key]);
         const hex = res.hex;
         const triangles = res.triangles;
-        latestResult["_"]["hex"] = hex;
-        latestResult["_"]["triangles"] = [triangles];
+        resultExtras.hex = hex;
+        resultExtras.triangles = [triangles];
+        renderStatsPanel(null);
         renderLayers(hex, triangles);
       });
       socket.emit("target", {
@@ -765,51 +1019,133 @@
       });
     }
 
-    // Draw イベント
-    map.on(L.Draw.Event.CREATED, async (e) => {
-      drawnItems.clearLayers();
-      const layer = e.layer;
-      drawnItems.addLayer(layer);
-      try {
-        await loadHexgridByBounds(layer.getBounds(), layer.toGeoJSON());
-      } catch (err) {
-        alert(err.message);
-      }
-    });
-
-    map.on(L.Draw.Event.EDITSTOP, async () => {
-      const layers = drawnItems.getLayers();
-      if (layers.length === 1) {
+    if (!browseMode) {
+      map.on(L.Draw.Event.CREATED, async (e) => {
+        drawnItems.clearLayers();
+        const layer = e.layer;
+        layer.__splatoneShape = e.layerType === 'rectangle' ? 'rectangle' : 'polygon';
+        drawnItems.addLayer(layer);
         try {
-          await loadHexgridByBounds(layers[0].getBounds(), layers[0].toGeoJSON());
+          await loadHexgridByBounds(layer.getBounds(), layer.toGeoJSON(), layer.__splatoneShape);
         } catch (err) {
           alert(err.message);
         }
-      }
-    });
+      });
 
-    map.on(L.Draw.Event.DELETED, () => {
-      drawnItems.clearLayers();
-      if (hexLayer) {
-        map.removeLayer(hexLayer);
-        hexLayer = null;
-      }
-      if (triLayer) {
-        map.removeLayer(triLayer);
-        triLayer = null;
-      }
-      if (myStartBtn) {
-        map.removeControl(myStartBtn);
-        myStartBtn = null;
-      }
-      if (myLegend) {
-        document.getElementById('map_legend')?.replaceChildren();
-        map.removeControl(myLegend);
-        myLegend = null;
+      map.on(L.Draw.Event.EDITSTOP, async () => {
+        const layers = drawnItems.getLayers();
+        if (layers.length === 1) {
+          try {
+            const layer = layers[0];
+            const shapeKind = layer.__splatoneShape || (layer instanceof L.Rectangle ? 'rectangle' : 'polygon');
+            await loadHexgridByBounds(layer.getBounds(), layer.toGeoJSON(), shapeKind);
+          } catch (err) {
+            alert(err.message);
+          }
+        }
+      });
+
+      map.on(L.Draw.Event.DELETED, () => {
+        drawnItems.clearLayers();
+        if (hexLayer) {
+          map.removeLayer(hexLayer);
+          hexLayer = null;
+        }
+        if (triLayer) {
+          map.removeLayer(triLayer);
+          triLayer = null;
+        }
+        if (myStartBtn) {
+          map.removeControl(myStartBtn);
+          myStartBtn = null;
+        }
+        if (myLegend) {
+          document.getElementById('map_legend')?.replaceChildren();
+          map.removeControl(myLegend);
+          myLegend = null;
+        }
+        document.getElementById('bboxLabel').textContent = '';
+        currentDrawnGeoJSON = null;
+        currentDrawKind = null;
+        currentBboxArray = null;
+        updateCliCommand();
+      });
+    }
+
+    if (browseMode) {
+      initDropImport();
+    }
+
+    function initDropImport() {
+      const overlay = document.getElementById('dropOverlay');
+      if (!overlay) return;
+      let dragDepth = 0;
+      const showOverlay = () => {
+        overlay.hidden = false;
+        overlay.classList.add('visible');
+      };
+      const hideOverlay = () => {
+        overlay.classList.remove('visible');
+        overlay.hidden = true;
+      };
+      const hasFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes('Files');
+
+      window.addEventListener('dragenter', (event) => {
+        if (!hasFiles(event)) return;
+        dragDepth += 1;
+        showOverlay();
+        event.preventDefault();
+      });
+      window.addEventListener('dragover', (event) => {
+        if (!hasFiles(event)) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+      });
+      window.addEventListener('dragleave', (event) => {
+        if (dragDepth > 0) {
+          dragDepth -= 1;
+        }
+        if (dragDepth <= 0) {
+          dragDepth = 0;
+          hideOverlay();
+        }
+      });
+      window.addEventListener('drop', async (event) => {
+        if (!hasFiles(event)) return;
+        event.preventDefault();
+        dragDepth = 0;
+        hideOverlay();
+        const file = event.dataTransfer?.files?.[0] ?? null;
+        if (file) {
+          await importResultFile(file);
+        }
+      });
+    }
+
+    async function importResultFile(file) {
+      try {
+        const text = await file.text();
+        let parsed;
+        try {
+          parsed = JSON.parse(text);
+        } catch (err) {
+          throw new Error('JSONとして解析できませんでした');
+        }
+        const bundle = parsed?.bundle ?? parsed;
+        if (!bundle || typeof bundle !== 'object' || !bundle.geoJson) {
+          throw new Error('結果バンドルではありません');
+        }
+        await visualizeBundle(bundle, { sourceLabel: file.name || 'file' });
+      } catch (err) {
+        Toastify({
+          text: `読み込みに失敗しました: ${err?.message || err}`,
+          duration: 4000,
+          gravity: 'bottom',
+          position: 'center',
+          className: 'toast-error'
+        }).showToast();
       }
-      hexLabelLayer.removeFrom(map);
-      document.getElementById('bboxLabel').textContent = '';
-    });
+    }
 
     // ======= ハンバーガー / パネル制御 =======
     const hamburger = document.getElementById('hamburger');
@@ -843,46 +1179,53 @@
       if (e.key === 'Escape') closePanel();
     });
 
-    // UIトグル
-    document.getElementById('clear').addEventListener('click', () => {
-      drawnItems.clearLayers();
-      if (hexLayer) {
-        map.removeLayer(hexLayer);
-        hexLayer = null;
-      }
-      if (triLayer) {
-        map.removeLayer(triLayer);
-        triLayer = null;
-      }
-      if (myStartBtn) {
-        map.removeControl(myStartBtn);
-        myStartBtn = null;
+    async function applyDefaultGeometry() {
+      if (!defaultGeometry || (!defaultGeometry.polygon && !Array.isArray(defaultGeometry.bbox))) {
+        return;
       }
-      if (myLegend) {
-        document.getElementById('map_legend')?.replaceChildren();
-        map.removeControl(myLegend);
-        myLegend = null;
-      }
-      hexLabelLayer.removeFrom(map);
-      document.getElementById('bboxLabel').textContent = '';
-    });
 
-    document.getElementById('toggleTriangles').addEventListener('change', () => {
-      if (!triLayer) return;
-      if (document.getElementById('toggleTriangles').checked) triLayer.addTo(map);
-      else map.removeLayer(triLayer);
-    });
+      const ensureDraw = async (layer) => {
+        await welcomeReady;
+        drawnItems.clearLayers();
+        layer.__splatoneShape = layer.__splatoneShape || (layer instanceof L.Rectangle ? 'rectangle' : 'polygon');
+        drawnItems.addLayer(layer);
+        await loadHexgridByBounds(layer.getBounds(), layer.toGeoJSON(), layer.__splatoneShape);
+      };
 
-    document.getElementById('toggleHexLabels').addEventListener('change', () => {
-      if (document.getElementById('toggleHexLabels').checked) {
-        hexLabelLayer.addTo(map);
-      } else {
-        hexLabelLayer.removeFrom(map);
+      if (defaultGeometry.polygon && typeof defaultGeometry.polygon === 'object') {
+        const geoLayer = L.geoJSON(defaultGeometry.polygon);
+        const layers = geoLayer.getLayers();
+        if (layers.length > 0) {
+          const layer = layers[0];
+          if (layer.getBounds().isValid()) {
+            map.fitBounds(layer.getBounds(), { padding: [20, 20] });
+          }
+          layer.__splatoneShape = 'polygon';
+          await ensureDraw(layer);
+          return;
+        }
       }
-    });
 
-    // 初期は描画待ち（必要なら初期BBOXを有効化）
-    // loadHexgridByBounds(L.latLngBounds([35.53, 139.55], [35.80, 139.92]));
+      if (Array.isArray(defaultGeometry.bbox) && defaultGeometry.bbox.length === 4) {
+        const [minLon, minLat, maxLon, maxLat] = defaultGeometry.bbox;
+        if ([minLon, minLat, maxLon, maxLat].every(val => Number.isFinite(Number(val)))) {
+          const bounds = L.latLngBounds([
+            [minLat, minLon],
+            [maxLat, maxLon]
+          ]);
+          const rectangle = L.rectangle(bounds, { weight: 1, fillOpacity: 0 });
+          rectangle.__splatoneShape = 'rectangle';
+          if (bounds.isValid()) {
+            map.fitBounds(bounds, { padding: [20, 20] });
+          }
+          await ensureDraw(rectangle);
+        }
+      }
+    }
+
+    if (!browseMode && (defaultGeometry?.polygon || Array.isArray(defaultGeometry?.bbox))) {
+      applyDefaultGeometry().catch((err) => console.error('Failed to apply default geometry', err));
+    }
   </script>
 </body>