Fix loading external velopark data

assets/themes/velopark/velopark.json

@@ -109,6 +109,7 @@
           "special": {
             "type": "compare_data",
             "url": "ref:velopark",
+            "host":"https://data.velopark.be", 
             "postprocessing": "velopark"
           }
         }

scripts/generateLayouts.ts

@@ -16,6 +16,8 @@ import * as crypto from "crypto"
 import * as eli from "../src/assets/editor-layer-index.json"
 import * as eli_global from "../src/assets/global-raster-layers.json"
 import ValidationUtils from "../src/Models/ThemeConfig/Conversion/ValidationUtils"
+import { LayerConfigJson } from "../src/Models/ThemeConfig/Json/LayerConfigJson"
+import { QuestionableTagRenderingConfigJson } from "../src/Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson"
 
 const sharp = require("sharp")
 const template = readFileSync("theme.html", "utf8")
@@ -282,19 +284,24 @@ async function generateCsp(
 
     SpecialVisualizations.specialVisualizations.forEach((sv) => {
         if (typeof sv.needsUrls === "function") {
+            // Handled below
             return
         }
         apiUrls.push(...(sv.needsUrls ?? []))
     })
 
-    const usedSpecialVisualisations = ValidationUtils.getSpecialVisualisationsWithArgs(layoutJson)
+    const usedSpecialVisualisations = [].concat(...layoutJson.layers.map(l => ValidationUtils.getAllSpecialVisualisations(<QuestionableTagRenderingConfigJson[]> (<LayerConfigJson>l).tagRenderings ?? [])))
     for (const usedSpecialVisualisation of usedSpecialVisualisations) {
         if (typeof usedSpecialVisualisation === "string") {
             continue
         }
         const neededUrls = usedSpecialVisualisation.func.needsUrls ?? []
         if (typeof neededUrls === "function") {
-            apiUrls.push(...neededUrls(usedSpecialVisualisation.args))
+            let needed: string | string[]  = neededUrls(usedSpecialVisualisation.args)
+            if(typeof needed === "string"){
+                needed = [needed]
+            }
+            apiUrls.push(...needed)
         }
     }
 
@@ -306,11 +313,14 @@ async function generateCsp(
     const vectorLayers = eliLayers.filter((l) => l.properties.type === "vector")
     const vectorSources = vectorLayers.map((l) => l.properties.url)
     apiUrls.push(...vectorSources)
-    for (const connectSource of apiUrls.concat(geojsonSources)) {
+    for (let connectSource of apiUrls.concat(geojsonSources)) {
         if (!connectSource) {
             continue
         }
         try {
+            if(!connectSource.startsWith("http")){
+            connectSource = "https://"+connectSource
+            }
             const url = new URL(connectSource)
             hosts.add("https://" + url.host)
         } catch (e) {

src/UI/Comparison/ComparisonTable.svelte

@@ -4,7 +4,6 @@
     import { UIEventSource } from "../../Logic/UIEventSource"
     import type { OsmTags } from "../../Models/OsmFeature"
     import type { SpecialVisualizationState } from "../SpecialVisualization"
-    import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
     import type { Feature } from "geojson"
     import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
     import ComparisonAction from "./ComparisonAction.svelte"
@@ -19,7 +18,6 @@
 
     export let tags: UIEventSource<OsmTags>
     export let state: SpecialVisualizationState
-    export let image: P4CPicture
     export let feature: Feature
     export let layer: LayerConfig
 
@@ -115,6 +113,5 @@
       {layer} />
   {/each}
 
-
 {/if}
 

src/UI/Comparison/ComparisonTool.svelte

@@ -11,11 +11,12 @@ import { UIEventSource } from "../../Logic/UIEventSource"
 import ComparisonTable from "./ComparisonTable.svelte"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
 import type { Feature } from "geojson"
+import type { OsmTags } from "../../Models/OsmFeature"
 
 export let url: string
 export let postprocessVelopark: boolean
 export let state: SpecialVisualizationState
-export let tags: UIEventSource<Record<string, string>>
+export let tags: UIEventSource<OsmTags>
 export let layer: LayerConfig
 export let feature: Feature
 let data: any = undefined
@@ -56,6 +57,6 @@ onMount(async () => {
   <Loading>
     Loading {$tags[url]}
   </Loading>
-{:else}
-  <ComparisonTable externalProperties={data.properties} osmProperties={$tags} {state} {feature} {layer} {tags}/>
+{:else if data.properties !== undefined}
+  <ComparisonTable externalProperties={data.properties} osmProperties={$tags} {state} {feature} {layer} {tags} />
 {/if}

src/UI/SpecialVisualization.ts

@@ -98,7 +98,7 @@ export interface SpecialVisualization {
     readonly funcName: string
     readonly docs: string | BaseUIElement
     readonly example?: string
-    readonly needsUrls?: string[] | ((args: string[]) => string)
+    readonly needsUrls?: string[] | ((args: string[]) => string | string[])
 
     /**
      * Indicates that this special visualisation will make requests to the 'alLNodesDatabase' and that it thus should be included

src/UI/SpecialVisualizations.ts

@@ -1641,13 +1641,18 @@ export default class SpecialVisualizations {
             },
             {
                 funcName: "compare_data",
-                needsUrls: (args) => args[0],
+                needsUrls: (args) => args[1].split(";"),
                 args:[
                     {
                         name: "url",
                         required: true,
                         doc: "The attribute containing the url where to fetch more data"
                     },
+                    {
+                        name:"host",
+                        required:true,
+                        doc: "The domain name(s) where data might be fetched from - this is needed to set the CSP. A domain must include 'https', e.g. 'https://example.com'. For multiple domains, separate them with ';'. If you don't know the possible domains, use '*'. "
+                    },
                     {
                         name: "postprocessing",
                         required: false,
@@ -1657,7 +1662,7 @@ export default class SpecialVisualizations {
                 docs: "Gives an interactive element which shows a tag comparison between the OSM-object and the upstream object. This allows to copy some or all tags into OSM",
                 constr(state: SpecialVisualizationState, tagSource: UIEventSource<Record<string, string>>, args: string[], feature: Feature, layer: LayerConfig): BaseUIElement {
                     const url = args[0]
-                    const postprocessVelopark = args[1] === "velopark"
+                    const postprocessVelopark = args[2] === "velopark"
                     return new SvelteUIElement(ComparisonTool, {url, postprocessVelopark, state, tags: tagSource, layer, feature})
                 }
             }