UX(inspector): fix search, show graphs, see #2353

src/Logic/Osm/OsmObject.ts

@@ -330,6 +330,9 @@ ${nds}${tags}    </way>
     }
 
     private isPolygon(): boolean {
+        if (this.coordinates.length === 0) {
+            return false
+        }
         // Compare lat and lon seperately, as the coordinate array might not be a reference to the same object
         if (
             this.coordinates[0][0] !== this.coordinates[this.coordinates.length - 1][0] ||

src/UI/History/AggregateView.svelte

@@ -10,6 +10,9 @@
   import Tr from "../Base/Tr.svelte"
   import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
   import Translations from "../i18n/Translations"
+  import TagRenderingChart from "../BigComponents/TagRenderingChart"
+  import ToSvelte from "../Base/ToSvelte.svelte"
+  import type { TagRenderingConfigJson } from "../../Models/ThemeConfig/Json/TagRenderingConfigJson"
 
   export let onlyShowUsername: string[]
   export let features: Feature[]
@@ -25,10 +28,11 @@
       key: string
       value?: string
       oldValue?: string
+      step: OsmObject
     }[]
   > = allHistories.mapD((histories) => HistoryUtils.fullHistoryDiff(histories, usernames))
 
-  const trs = shared_questions.tagRenderings.map((tr) => new TagRenderingConfig(tr))
+  const trs = shared_questions.tagRenderings.map((tr) => new TagRenderingConfig(<TagRenderingConfigJson>tr))
 
   function detectQuestion(key: string): TagRenderingConfig {
     return trs.find((tr) => tr.freeform?.key === key)
@@ -40,17 +44,19 @@
       tr: TagRenderingConfig
       count: number
       values: { value: string; count: number }[]
+      features: Feature[]
     }[]
   > = allDiffs.mapD((allDiffs) => {
-    const keyCounts = new Map<string, Map<string, number>>()
+    const keyCounts = new Map<string, Map<string, OsmObject[]>>()
     for (const diff of allDiffs) {
       const k = diff.key
       if (!keyCounts.has(k)) {
-        keyCounts.set(k, new Map<string, number>())
+        keyCounts.set(k, new Map<string, OsmObject[]>())
       }
       const valueCounts = keyCounts.get(k)
       const v = diff.value ?? ""
-      valueCounts.set(v, 1 + (valueCounts.get(v) ?? 0))
+      const oldFeaturesList = valueCounts.get(v) ?? []
+      valueCounts.set(v, [...oldFeaturesList, diff.step])
     }
 
     const perKey: {
@@ -58,19 +64,25 @@
       tr: TagRenderingConfig
       count: number
       values: { value: string; count: number }[]
+      features: Feature[]
     }[] = []
-    keyCounts.forEach((values, key) => {
-      const keyTotal: { value: string; count: number }[] = []
+    keyCounts.forEach((values: Map<string, OsmObject[]>, key: string) => {
+      const keyTotal: { value: string; features: Feature[] }[] = []
       values.forEach((count, value) => {
-        keyTotal.push({ value, count })
+        keyTotal.push({ value, features: count.map(step => step.asGeoJson()) })
       })
-      let countForKey = 0
-      for (const { count } of keyTotal) {
-        countForKey += count
+      let countForKey: Feature[] = []
+      for (const { features } of keyTotal) {
+        countForKey.push(...features)
       }
-      keyTotal.sort((a, b) => b.count - a.count)
+      keyTotal.sort((a, b) => b.features.length - a.features.length)
       const tr = detectQuestion(key)
-      perKey.push({ count: countForKey, tr, key, values: keyTotal })
+      perKey.push({
+        count: countForKey.length, tr, key, values: keyTotal.map(({ value, features }) => ({
+          value,
+          count: features.length
+        })), features: countForKey
+      })
     })
     perKey.sort((a, b) => b.count - a.count)
 
@@ -105,6 +117,20 @@
           </li>
         {/each}
       </ul>
+      {#if diff.tr}
+        <div class="w-48 h-48">
+
+          <ToSvelte
+            construct={new TagRenderingChart(diff.features, diff.tr, {
+            groupToOtherCutoff: 0,
+            chartType: "pie",
+            sort: true,
+          })}
+          />
+        </div>
+      {:else}
+        Could not create a graph
+      {/if}
     </AccordionSingle>
   {/each}
 {/if}

src/UI/History/HistoryUtils.ts

@@ -44,22 +44,37 @@ export class HistoryUtils {
             .filter((ch) => ch.oldValue !== ch.value)
     }
 
-    public static fullHistoryDiff(histories: OsmObject[][], onlyShowUsername?: Set<string>) {
-        const allDiffs: { key: string; oldValue?: string; value?: string }[] = [].concat(
-            ...histories.map((history) => {
-                const filtered = history.filter(
-                    (step) =>
-                        !onlyShowUsername ||
-                        onlyShowUsername?.has(step.tags["_last_edit:contributor"])
-                )
-                const diffs: {
-                    key: string
-                    value?: string
-                    oldValue?: string
-                }[][] = filtered.map((step) => HistoryUtils.tagHistoryDiff(step, history))
-                return [].concat(...diffs)
-            })
-        )
+    public static fullHistoryDiff(histories: OsmObject[][], onlyShowUsername?: Set<string>): {
+        key: string;
+        value?: string;
+        oldValue?: string;
+        step: OsmObject
+    }[] {
+
+        const allDiffs: {
+            key: string;
+            value?: string;
+            oldValue?: string;
+            step: OsmObject
+        }[] = []
+        for (const history of histories) {
+            const filtered = history.filter(
+                (step) =>
+                    !onlyShowUsername ||
+                    onlyShowUsername?.has(step.tags["_last_edit:contributor"])
+            )
+            for (const step of filtered) {
+                const diff: {
+                    key: string;
+                    value?: string;
+                    oldValue?: string;
+                    step: OsmObject
+                }[] = HistoryUtils.tagHistoryDiff(step, history)
+                allDiffs.push(...diff)
+            }
+        }
+
+
         return allDiffs
     }
 }

src/UI/InspectorGUI.svelte

@@ -70,6 +70,8 @@
       searchIsRunning.set(false)
     }
   })
+
+
   let state = {
     mapProperties: maplibremap,
     searchState: {
@@ -164,6 +166,19 @@
 
   let showPreviouslyVisited = new UIEventSource(true)
   const t = Translations.t.inspector
+
+  function search(suggestion?: GeocodeResult) {
+    suggestion ??= searchSuggestions?.data?.[0]
+    console.log("Seaching", suggestion)
+    if (!suggestion) {
+      return
+    }
+    map.data.flyTo({
+      zoom: 14,
+      center: [suggestion.lon, suggestion.lat]
+    })
+  }
+
 </script>
 
 <div class="flex h-screen w-full flex-col">
@@ -251,12 +266,13 @@
       <MaplibreMap {map} mapProperties={maplibremap} autorecovery={true} />
       <div class="absolute right-0 top-0 w-1/4 p-4">
         <Searchbar
+          on:search={() => search()}
           isFocused={searchIsFocussed}
           value={searchvalue}
           on:focus={() => state.searchState.showSearchDrawer.set(true)}
         />
         {#if $searchSuggestions?.length > 0 || $searchIsFocussed}
-          <GeocodeResults {state} />
+          <GeocodeResults {state} on:select={(event) => search(event.detail)} />
         {/if}
       </div>
     </div>

src/UI/Search/GeocodeResult.svelte

@@ -13,6 +13,7 @@
   import FeaturePropertiesStore from "../../Logic/FeatureSource/Actors/FeaturePropertiesStore"
   import SearchState from "../../Logic/State/SearchState"
   import ArrowUp from "@babeard/svelte-heroicons/mini/ArrowUp"
+  import { createEventDispatcher } from "svelte"
 
   export let entry: GeocodeResult
   export let state: {
@@ -40,8 +41,9 @@
   let mapRotation = state.mapProperties.rotation
   let inView = state.mapProperties.bounds.mapD((bounds) => bounds.contains([entry.lon, entry.lat]))
 
+  let dispatch = createEventDispatcher<{ select: GeocodeResult }>()
   function select() {
-    state.searchState.applyGeocodeResult(entry)
+    dispatch("select", entry)
   }
 </script>
 

src/UI/Search/SearchResults.svelte

@@ -55,7 +55,9 @@
   {#if $allowFilters}
     <FilterResults {state} />
   {/if}
-  <GeocodeResults {state}>
+  <GeocodeResults {state} on:select={(select) => {
+    state.searchState.applyGeocodeResult(select.detail)
+  }}>
     <svelte:fragment slot="if-no-results">
       {#if $recentlySeen?.length > 0}
         <SidebarUnit>