midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fix import flow, add typing

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-07-08 03:14:55 +02:00
parent 97334fc369
commit 4246221e8e
29 changed files with 396 additions and 309 deletions
Download patch file Download diff file Expand all files Collapse all files

22
UI/Base/ScrollableFullScreen.ts
View file

@ -28,7 +28,10 @@ export default class ScrollableFullScreen extends UIElement {
constructor(title: ((options: { mode: string }) => BaseUIElement),
content: ((options: { mode: string, resetScrollSignal: UIEventSource<void> }) => BaseUIElement),
hashToShow: string,
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false)
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false),
options?: {
setHash?: true | boolean
}
) {
super();
this.hashToShow = hashToShow;
@ -53,16 +56,21 @@ export default class ScrollableFullScreen extends UIElement {
const self = this;
Hash.hash.addCallback(h => {
if (h === undefined) {
isShown.setData(false)
}
})
const setHash = options?.setHash ?? true;
if(setHash){
Hash.hash.addCallback(h => {
if (h === undefined) {
isShown.setData(false)
}
})
}
isShown.addCallback(isShown => {
if (isShown) {
// We first must set the hash, then activate the panel
// If the order is wrong, this will cause the panel to disactivate again
Hash.hash.setData(hashToShow)
if(setHash){
Hash.hash.setData(hashToShow)
}
self.Activate();
} else {
// Some cleanup...

6
UI/BigComponents/BackgroundMapSwitch.ts
View file

@ -159,6 +159,12 @@ class SingleLayerSelectionButton extends Toggle {
export default class BackgroundMapSwitch extends Combine {
/**
* Three buttons to easily switch map layers between OSM, aerial and some map.
* @param state
* @param currentBackground
* @param options
*/
constructor(
state: {
locationControl: UIEventSource<Loc>,

5
UI/BigComponents/LeftControls.ts
View file

@ -48,7 +48,10 @@ export default class LeftControls extends Combine {
}
return new Lazy(() => {
const tagsSource = state.allElements.getEventSourceById(feature.properties.id)
return new FeatureInfoBox(tagsSource, currentViewFL.layerDef, state, "currentview", guiState.currentViewControlIsOpened)
return new FeatureInfoBox(tagsSource, currentViewFL.layerDef, state, {
hashToShow: "currentview",
isShown: guiState.currentViewControlIsOpened
})
.SetClass("md:floating-element-width")
})
})).SetStyle("width: 40rem").SetClass("block")

176
UI/ImportFlow/ConflationChecker.ts
View file

@ -22,12 +22,17 @@ import ShowDataLayer from "../ShowDataLayer/ShowDataLayer";
import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource";
import ValidatedTextField from "../Input/ValidatedTextField";
import {LocalStorageSource} from "../../Logic/Web/LocalStorageSource";
import * as currentview from "../../assets/layers/current_view/current_view.json"
import * as import_candidate from "../../assets/layers/import_candidate/import_candidate.json"
import {GeoOperations} from "../../Logic/GeoOperations";
import FeatureInfoBox from "../Popup/FeatureInfoBox";
import {ImportUtils} from "./ImportUtils";
import Translations from "../i18n/Translations";
import ShowDataMultiLayer from "../ShowDataLayer/ShowDataMultiLayer";
import FilteredLayer, {FilterState} from "../../Models/FilteredLayer";
import {Feature, FeatureCollection} from "@turf/turf";
import * as currentview from "../../assets/layers/current_view/current_view.json"
import {CheckBox} from "../Input/Checkboxes";
import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch";
/**
* Given the data to import, the bbox and the layer, will query overpass for similar items
@ -36,20 +41,21 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
public readonly IsValid
public readonly Value: Store<{ features: any[], theme: string }>
constructor(
state,
params: { bbox: BBox, layer: LayerConfig, theme: string, features: any[] }) {
const t = Translations.t.importHelper.conflationChecker
const bbox = params.bbox.padAbsolute(0.0001)
const layer = params.layer;
const toImport: {features: any[]} = params;
const toImport: { features: any[] } = params;
let overpassStatus = new UIEventSource<{ error: string } | "running" | "success" | "idle" | "cached">("idle")
const cacheAge = new UIEventSource<number>(undefined);
function loadDataFromOverpass(){
function loadDataFromOverpass() {
// Load the data!
const url = Constants.defaultOverpassUrls[1]
const relationTracker = new RelationsTracker()
@ -66,42 +72,49 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
overpassStatus.setData({error})
})
}
const fromLocalStorage = IdbLocalStorage.Get<[any, Date]>("importer-overpass-cache-" + layer.id, {
whenLoaded: (v) => {
if (v !== undefined && v !== null) {
console.log("Loaded from local storage:", v)
const [geojson, date] = v;
const timeDiff = (new Date().getTime() - date.getTime()) / 1000;
console.log("Loaded ", geojson.features.length, " features; cache is ", timeDiff, "seconds old")
cacheAge.setData(timeDiff)
if (timeDiff < 24 * 60 * 60) {
// Recently cached!
overpassStatus.setData("cached")
return;
}
cacheAge.setData(-1)
overpassStatus.setData("cached")
}
loadDataFromOverpass()
}
});
const cacheAge = fromLocalStorage.map(d => {
if(d === undefined || d[1] === undefined){
return undefined
}
const [_, loadedDate] = d
return (new Date().getTime() - loadedDate.getTime()) / 1000;
})
cacheAge.addCallbackD(timeDiff => {
if (timeDiff < 24 * 60 * 60) {
// Recently cached!
overpassStatus.setData("cached")
return;
} else {
loadDataFromOverpass()
}
})
const geojson: Store<any> = fromLocalStorage.map(d => {
const geojson: Store<FeatureCollection> = fromLocalStorage.map(d => {
if (d === undefined) {
return undefined
}
return d[0]
})
const background = new UIEventSource<BaseLayer>(AvailableBaseLayers.osmCarto)
const location = new UIEventSource<Loc>({lat: 0, lon: 0, zoom: 1})
const currentBounds = new UIEventSource<BBox>(undefined)
const zoomLevel = ValidatedTextField.ForType("pnat").ConstructInputElement()
const zoomLevel = ValidatedTextField.ForType("pnat").ConstructInputElement({
value: LocalStorageSource.GetParsed<string>("importer-zoom-level", "0")
})
zoomLevel.SetClass("ml-1 border border-black")
zoomLevel.GetValue().syncWith(LocalStorageSource.Get("importer-zoom-level", "14"), true)
const osmLiveData = Minimap.createMiniMap({
allowMoving: true,
location,
@ -110,18 +123,24 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
attribution: new Attribution(location, state.osmConnection.userDetails, undefined, currentBounds)
})
osmLiveData.SetClass("w-full").SetStyle("height: 500px")
const preview = new StaticFeatureSource(geojson.map(geojson => {
const geojsonFeatures : Store<Feature[]> = geojson.map(geojson => {
if (geojson?.features === undefined) {
return []
}
const zoomedEnough: boolean = osmLiveData.location.data.zoom >= Number(zoomLevel.GetValue().data)
if (!zoomedEnough) {
const currentZoom = zoomLevel.GetValue().data
const zoomedEnough: boolean = osmLiveData.location.data.zoom >= Number(currentZoom)
if (currentZoom !== undefined && !zoomedEnough) {
return []
}
const bounds = osmLiveData.bounds.data
if(bounds === undefined){
return geojson.features;
}
return geojson.features.filter(f => BBox.get(f).overlapsWith(bounds))
}, [osmLiveData.bounds, zoomLevel.GetValue()]));
}, [osmLiveData.bounds, zoomLevel.GetValue()])
const preview = StaticFeatureSource.fromGeojsonStore(geojsonFeatures)
new ShowDataLayer({
layerToShow: new LayerConfig(currentview),
@ -134,12 +153,16 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
])
})
new ShowDataLayer({
layerToShow: layer,
new ShowDataMultiLayer({
//layerToShow: layer,
layers: new UIEventSource<FilteredLayer[]>([{
layerDef: layer,
isDisplayed: new UIEventSource<boolean>(true),
appliedFilters: new UIEventSource<Map<string, FilterState>>(undefined)
}]),
state,
leafletMap: osmLiveData.leafletMap,
popup: (tags, layer) => new FeatureInfoBox(tags, layer, state),
popup: (tags, layer) => new FeatureInfoBox(tags, layer, state, {setHash: false}),
zoomToFeatures: false,
features: preview
})
@ -148,7 +171,7 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
layerToShow: new LayerConfig(import_candidate),
state,
leafletMap: osmLiveData.leafletMap,
popup: (tags, layer) => new FeatureInfoBox(tags, layer, state),
popup: (tags, layer) => new FeatureInfoBox(tags, layer, state, {setHash: false}),
zoomToFeatures: false,
features: StaticFeatureSource.fromGeojson(toImport.features)
})
@ -164,7 +187,7 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
matchedFeaturesMap.SetClass("w-full").SetStyle("height: 500px")
// Featuresource showing OSM-features which are nearby a toImport-feature
const nearbyFeatures = new StaticFeatureSource(geojson.map(osmData => {
const geojsonMapped: Store<Feature[]> = geojson.map(osmData => {
if (osmData?.features === undefined) {
return []
}
@ -172,32 +195,37 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
return osmData.features.filter(f =>
toImport.features.some(imp =>
maxDist >= GeoOperations.distanceBetween(imp.geometry.coordinates, GeoOperations.centerpointCoordinates(f))))
}, [nearbyCutoff.GetValue().stabilized(500)]));
}, [nearbyCutoff.GetValue().stabilized(500)])
const nearbyFeatures = StaticFeatureSource.fromGeojsonStore(geojsonMapped);
const paritionedImport = ImportUtils.partitionFeaturesIfNearby(toImport, geojson, nearbyCutoff.GetValue().map(Number));
// Featuresource showing OSM-features which are nearby a toImport-feature
const toImportWithNearby = new StaticFeatureSource(paritionedImport.map(els => els?.hasNearby ?? []));
new ShowDataLayer({
layerToShow: layer,
state,
leafletMap: matchedFeaturesMap.leafletMap,
popup: (tags, layer) => new FeatureInfoBox(tags, layer, state),
zoomToFeatures: true,
features: nearbyFeatures
})
const toImportWithNearby = StaticFeatureSource.fromGeojsonStore(paritionedImport.map(els => els?.hasNearby ?? []));
toImportWithNearby.features.addCallback(nearby => console.log("The following features are near an already existing object:", nearby))
new ShowDataLayer({
layerToShow: new LayerConfig(import_candidate),
state,
leafletMap: matchedFeaturesMap.leafletMap,
popup: (tags, layer) => new FeatureInfoBox(tags, layer, state),
popup: (tags, layer) => new FeatureInfoBox(tags, layer, state, {setHash: false}),
zoomToFeatures: false,
features: toImportWithNearby
})
const showOsmLayer = new CheckBox(t.showOsmLayerInConflationMap, true)
new ShowDataLayer({
layerToShow: layer,
state,
leafletMap: matchedFeaturesMap.leafletMap,
popup: (tags, layer) => new FeatureInfoBox(tags, layer, state, {setHash: false}),
zoomToFeatures: true,
features: nearbyFeatures,
doShowLayer: showOsmLayer.GetValue()
})
const t = Translations.t.importHelper.conflationChecker
const conflationMaps = new Combine([
new VariableUiElement(
geojson.map(geojson => {
@ -218,34 +246,44 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
return t.cacheExpired
}
return new Combine([t.loadedDataAge.Subs({age: Utils.toHumanTime(age)}),
new SubtleButton(Svg.reload_svg().SetClass("h-8"), t.reloadTheCache)
.onClick(loadDataFromOverpass)
.SetClass("h-12")
new SubtleButton(Svg.reload_svg().SetClass("h-8"), t.reloadTheCache)
.onClick(loadDataFromOverpass)
.SetClass("h-12")
])
})),
new Title(t.titleLive),
t.importCandidatesCount.Subs({count:toImport.features.length }),
new VariableUiElement(geojson.map(geojson => {
if(geojson?.features?.length === undefined || geojson?.features?.length === 0){
t.importCandidatesCount.Subs({count: toImport.features.length}),
new VariableUiElement(geojson.map(geojson => {
if (geojson?.features?.length === undefined || geojson?.features?.length === 0) {
return t.nothingLoaded.Subs(layer).SetClass("alert")
}
return new Combine([
}
return new Combine([
t.osmLoaded.Subs({count: geojson.features.length, name: layer.name}),
])
})),
])
})),
osmLiveData,
new VariableUiElement(osmLiveData.location.map(location => {
return t.zoomIn.Subs({needed:zoomLevel, current: location.zoom })
} )),
new Combine([
t.zoomLevelSelection,
zoomLevel,
new VariableUiElement(osmLiveData.location.map(location => {
return t.zoomIn.Subs(<any>{current: location.zoom})
})),
]).SetClass("flex"),
new Title(t.titleNearby),
new Combine([t.mapShowingNearbyIntro, nearbyCutoff]).SetClass("flex"),
new VariableUiElement(toImportWithNearby.features.map(feats =>
new VariableUiElement(toImportWithNearby.features.map(feats =>
t.nearbyWarn.Subs({count: feats.length}).SetClass("alert"))),
t.setRangeToZero,
matchedFeaturesMap]).SetClass("flex flex-col")
matchedFeaturesMap,
new Combine([
new BackgroundMapSwitch({backgroundLayer: background, locationControl: matchedFeaturesMap.location}, background),
showOsmLayer,
]).SetClass("flex")
]).SetClass("flex flex-col")
super([
new Title(t.title),
new VariableUiElement(overpassStatus.map(d => {
@ -270,7 +308,11 @@ export default class ConflationChecker extends Combine implements FlowStep<{ fea
])
this.Value = paritionedImport.map(feats => ({theme: params.theme, features: feats?.noNearby, layer: params.layer}))
this.Value = paritionedImport.map(feats => ({
theme: params.theme,
features: feats?.noNearby,
layer: params.layer
}))
this.IsValid = this.Value.map(v => v?.features !== undefined && v.features.length > 0)
}

9
UI/ImportFlow/ImportUtils.ts
View file

@ -1,8 +1,13 @@
import {Store} from "../../Logic/UIEventSource";
import {GeoOperations} from "../../Logic/GeoOperations";
import {Feature, Geometry} from "@turf/turf";
export class ImportUtils {
public static partitionFeaturesIfNearby(toPartitionFeatureCollection: ({ features: any[] }), compareWith: Store<{ features: any[] }>, cutoffDistanceInMeters: Store<number>): Store<{ hasNearby: any[], noNearby: any[] }> {
public static partitionFeaturesIfNearby(
toPartitionFeatureCollection: ({ features: Feature<Geometry>[] }),
compareWith: Store<{ features: Feature[] }>,
cutoffDistanceInMeters: Store<number>)
: Store<{ hasNearby: Feature[], noNearby: Feature[] }> {
return compareWith.map(osmData => {
if (osmData?.features === undefined) {
return undefined
@ -16,7 +21,7 @@ export class ImportUtils {
const noNearby = []
for (const toImportElement of toPartitionFeatureCollection.features) {
const hasNearbyFeature = osmData.features.some(f =>
maxDist >= GeoOperations.distanceBetween(toImportElement.geometry.coordinates, GeoOperations.centerpointCoordinates(f)))
maxDist >= GeoOperations.distanceBetween(<any> toImportElement.geometry.coordinates, GeoOperations.centerpointCoordinates(f)))
if (hasNearbyFeature) {
hasNearby.push(toImportElement)
} else {

6
UI/ImportFlow/MapPreview.ts
View file

@ -24,6 +24,7 @@ import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Title from "../Base/Title";
import CheckBoxes from "../Input/Checkboxes";
import {AllTagsPanel} from "../AllTagsPanel";
import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch";
class PreviewPanel extends ScrollableFullScreen {
@ -109,6 +110,10 @@ export class MapPreview extends Combine implements FlowStep<{ bbox: BBox, layer:
bounds: currentBounds,
attribution: new Attribution(location, state.osmConnection.userDetails, undefined, currentBounds)
})
const layerControl = new BackgroundMapSwitch( {
backgroundLayer: background,
locationControl: location
},background)
map.SetClass("w-full").SetStyle("height: 500px")
new ShowDataMultiLayer({
@ -147,6 +152,7 @@ export class MapPreview extends Combine implements FlowStep<{ bbox: BBox, layer:
mismatchIndicator,
map,
layerControl,
confirm
]);

4
UI/Input/Checkboxes.ts
View file

@ -4,13 +4,13 @@ import {Utils} from "../../Utils";
import BaseUIElement from "../BaseUIElement";
import InputElementMap from "./InputElementMap";
export class CheckBox extends InputElementMap<number[], boolean> {
export class CheckBox extends InputElementMap<number[], boolean> {
constructor(el: BaseUIElement , defaultValue?: boolean) {
super(
new CheckBoxes([el]),
(x0, x1) => x0 === x1,
t => t.length > 0,
x => x ? [0] : []
x => x ? [0] : [],
);
if(defaultValue !== undefined){
this.GetValue().setData(defaultValue)

12
UI/Popup/FeatureInfoBox.ts
View file

@ -25,16 +25,20 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
tags: UIEventSource<any>,
layerConfig: LayerConfig,
state: FeaturePipelineState,
hashToShow?: string,
isShown?: UIEventSource<boolean>,
options?: {
hashToShow?: string,
isShown?: UIEventSource<boolean>,
setHash?: true | boolean
}
) {
if (state === undefined) {
throw "State is undefined!"
}
super(() => FeatureInfoBox.GenerateTitleBar(tags, layerConfig, state),
() => FeatureInfoBox.GenerateContent(tags, layerConfig, state),
hashToShow ?? tags.data.id ?? "item",
isShown);
options?.hashToShow ?? tags.data.id ?? "item",
options?.isShown,
options);
if (layerConfig === undefined) {
throw "Undefined layerconfig";

4
UI/ShowDataLayer/ShowDataLayerImplementation.ts
View file

@ -1,4 +1,4 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {ShowDataLayerOptions} from "./ShowDataLayerOptions";
import {ElementStorage} from "../../Logic/ElementStorage";
@ -20,7 +20,7 @@ We don't actually import it here. It is imported in the 'MinimapImplementation'-
export default class ShowDataLayerImplementation {
private static dataLayerIds = 0
private readonly _leafletMap: UIEventSource<L.Map>;
private readonly _leafletMap: Store<L.Map>;
private readonly _enablePopups: boolean;
private readonly _features: RenderingMultiPlexerFeatureSource
private readonly _layerToShow: LayerConfig;

2
UI/ShowDataLayer/ShowDataLayerOptions.ts
View file

@ -7,7 +7,7 @@ import ScrollableFullScreen from "../Base/ScrollableFullScreen";
export interface ShowDataLayerOptions {
features: FeatureSource,
selectedElement?: UIEventSource<any>,
leafletMap: UIEventSource<L.Map>,
leafletMap: Store<L.Map>,
popup?: undefined | ((tags: UIEventSource<any>, layer: LayerConfig) => ScrollableFullScreen),
zoomToFeatures?: false | boolean,
doShowLayer?: Store<boolean>,

4
UI/ShowDataLayer/ShowDataMultiLayer.ts
View file

@ -1,14 +1,14 @@
/**
* SHows geojson on the given leaflet map, but attempts to figure out the correct layer first
*/
import {UIEventSource} from "../../Logic/UIEventSource";
import {Store} from "../../Logic/UIEventSource";
import ShowDataLayer from "./ShowDataLayer";
import PerLayerFeatureSourceSplitter from "../../Logic/FeatureSource/PerLayerFeatureSourceSplitter";
import FilteredLayer from "../../Models/FilteredLayer";
import {ShowDataLayerOptions} from "./ShowDataLayerOptions";
export default class ShowDataMultiLayer {
constructor(options: ShowDataLayerOptions & { layers: UIEventSource<FilteredLayer[]> }) {
constructor(options: ShowDataLayerOptions & { layers: Store<FilteredLayer[]> }) {
new PerLayerFeatureSourceSplitter(options.layers, (perLayer => {
const newOptions = {

3
UI/SubstitutedTranslation.ts
View file

@ -49,6 +49,9 @@ export class SubstitutedTranslation extends VariableUiElement {
const allElements = SubstitutedTranslation.ExtractSpecialComponents(txt, extraMappings).map(
proto => {
if (proto.fixed !== undefined) {
if(tagsSource === undefined){
return Utils.SubstituteKeys(proto.fixed, undefined)
}
return new VariableUiElement(tagsSource.map(tags => Utils.SubstituteKeys(proto.fixed, tags)));
}
const viz = proto.special;