@mapsight/ui 7.0.0

package/src/js/config/map/layers.ts

@@ -0,0 +1,190 @@
+import type {ProjectionLike} from "ol/proj";
+
+import type {
+	Description,
+	LayerMetaData,
+	OptionValue,
+	Options,
+} from "@mapsight/core/lib/map/types";
+
+import type {MapsightStyleFunctionEnv} from "@mapsight/lib-ol/style/styleFunction";
+
+import {FEATURE_SELECTIONS, FEATURE_SOURCES} from "../constants/controllers";
+import {
+	FEATURE_SELECTION_HIGHLIGHT,
+	FEATURE_SELECTION_SELECT,
+} from "../feature/selections";
+
+export function features(
+	featureSourceId: string,
+	visible = false,
+	interactive = false,
+	_metaData: LayerMetaData = {},
+	style: string | MapsightStyleFunctionEnv = "features",
+	sourceOptions?: Options,
+): Description {
+	return {
+		type: "VectorLayer",
+		options: {
+			visible: visible,
+			style: style as OptionValue,
+			//updateWhileAnimating: true,
+			//updateWhileInteracting: true,
+			renderBuffer: 200,
+			source: {
+				type: "VectorFeatureSource",
+				options: {
+					featureSourceId,
+					featureSourcesControllerName: FEATURE_SOURCES,
+					featureSelectionsControllerName: FEATURE_SELECTIONS,
+					...sourceOptions,
+				},
+			},
+			selections: !interactive
+				? {}
+				: {
+						//'second-touch': FEATURE_SELECTION_SELECT,
+						//touch: FEATURE_SELECTION_HIGHLIGHT,
+						mousedown: FEATURE_SELECTION_SELECT,
+						touch: FEATURE_SELECTION_SELECT,
+						mouseover: FEATURE_SELECTION_HIGHLIGHT,
+					},
+		},
+		metaData: _metaData,
+	};
+}
+
+export function interactiveFeatures(
+	featureSourceId,
+	visible = false,
+	_metaData = {},
+	style: string | MapsightStyleFunctionEnv = "features",
+	sourceOptions?: Options,
+) {
+	return features(
+		featureSourceId,
+		visible,
+		true,
+		_metaData,
+		style,
+		sourceOptions,
+	);
+}
+
+export function userGeolocation(
+	featureSourceId: string,
+	visible = false,
+	_metaData: LayerMetaData = {},
+	style: string | MapsightStyleFunctionEnv = "userGeolocation",
+	sourceOptions?: Options,
+) {
+	const base = features(
+		featureSourceId,
+		visible,
+		false,
+		_metaData,
+		style,
+		sourceOptions,
+	);
+
+	return {
+		...base,
+		options: {
+			...base.options,
+			updateWhileAnimating: true,
+			updateWhileInteracting: true,
+			renderBuffer: 400,
+		},
+	};
+}
+
+export function osm(url: string, visible = false, _metaData = {}) {
+	return {
+		type: "TileLayer",
+		metaData: _metaData,
+		options: {
+			source: {
+				type: "OsmSource",
+				options: {url},
+			},
+			visible,
+		},
+	};
+}
+
+export function wms(
+	url: string,
+	params = {},
+	projection: ProjectionLike = "ESPG:3857",
+	visible = false,
+	_metaData: LayerMetaData = {},
+	opacity?: number,
+) {
+	return {
+		type: "TileLayer",
+		metaData: _metaData,
+		options: {
+			source: {
+				type: "TileWMSSource",
+				options: {
+					projection,
+					url,
+					params,
+				},
+			},
+			visible,
+			opacity,
+		},
+	};
+}
+
+// TODO metadata auftrennen in metaData, withAttribution() und withLegend()
+export function metaData(
+	title: string,
+	attribution: string | null = null,
+	visibleInLayerSwitcher = false,
+	visibleInExternalLayerSwitcher = false,
+	isBaseLayer = false,
+	group: string | null = null,
+	lockedInLayerSwitcher = undefined,
+): LayerMetaData {
+	return {
+		title,
+		attribution: attribution ?? undefined,
+		visibleInLayerSwitcher,
+		visibleInExternalLayerSwitcher,
+		group: group ?? undefined,
+		isBaseLayer,
+		lockedInLayerSwitcher, // users can't change layer's visbility TODO this has to be implemented
+	};
+}
+
+export function metaDataWithAttribution(
+	_metaData: LayerMetaData = {},
+	attribution: string,
+): LayerMetaData {
+	return {
+		..._metaData,
+		attribution: attribution,
+	};
+}
+
+export function metaDataWithLegend(
+	_metaData: LayerMetaData = {},
+	legend,
+): LayerMetaData {
+	return {
+		..._metaData,
+		legend: legend,
+	};
+}
+
+export function metaDataWithMiniLegend(
+	_metaData: LayerMetaData = {},
+	miniLegend,
+): LayerMetaData {
+	return {
+		..._metaData,
+		miniLegend: miniLegend,
+	};
+}

package/src/js/controllers/defaults.ts

@@ -0,0 +1,36 @@
+import type {BaseController} from "@mapsight/core/lib/base/controller";
+import {FeatureSelectionsController} from "@mapsight/core/lib/feature-selections/controller";
+import {FeatureSourcesController} from "@mapsight/core/lib/feature-sources/controller";
+import {FilterController} from "@mapsight/core/lib/filter/controller";
+import {ListController} from "@mapsight/core/lib/list/controller";
+import {MapController} from "@mapsight/core/lib/map/controller";
+import {ProjectionsController} from "@mapsight/core/lib/projections/controller";
+import {UserGeolocationController} from "@mapsight/core/lib/user-geolocation/controller";
+
+import * as c from "../config/constants/controllers";
+import {createTagFilterFunction} from "../filters/tag-filter";
+import timeFilter from "../filters/time-filter";
+import type {MapsightUiContext} from "../types";
+
+export function createDefaultControllers(
+	context: MapsightUiContext,
+): Record<string, BaseController> {
+	const mapController = new MapController(c.MAP);
+	mapController.setStyleFunction(context.styleFunction);
+
+	return {
+		[c.PROJECTIONS]: new ProjectionsController(c.PROJECTIONS),
+		[c.MAP]: mapController,
+		[c.FEATURE_LIST]: new ListController(c.FEATURE_LIST),
+		[c.TIME_FILTER]: new FilterController(c.TIME_FILTER, timeFilter),
+		[c.TAG_FILTER]: new FilterController(
+			c.TAG_FILTER,
+			createTagFilterFunction(),
+		),
+		[c.USER_GEOLOCATION]: new UserGeolocationController(c.USER_GEOLOCATION),
+		[c.FEATURE_SOURCES]: new FeatureSourcesController(c.FEATURE_SOURCES),
+		[c.FEATURE_SELECTIONS]: new FeatureSelectionsController(
+			c.FEATURE_SELECTIONS,
+		),
+	};
+}

package/src/js/embed/browser.ts

@@ -0,0 +1,89 @@
+import merge from "lodash/merge";
+
+import type {MapsightStyleFunction} from "@mapsight/lib-ol/style/styleFunction";
+
+import {create} from "../index";
+import browserDomRenderer from "../renderer/browser-dom";
+import type {CreateOptions, MapsightUiRenderFunction} from "../types";
+
+type Options = {
+	/** style function */
+	styleFunction: MapsightStyleFunction;
+
+	/** base mapsight core config */
+	baseMapsightConfig: object;
+
+	/**create options */
+	createOptions: CreateOptions;
+};
+
+/**
+ * Browser embed
+ *
+ * @param container the container element to render the app into
+ * @param options
+ * @returns render function
+ */
+export default function browserEmbed(
+	container: HTMLElement,
+	options: Options,
+): MapsightUiRenderFunction<any> | undefined {
+	const {
+		styleFunction,
+		baseMapsightConfig = {},
+		createOptions = {},
+	} = options;
+
+	const {dehydratedStateAttributeName = "data-dehydrated-state"} =
+		createOptions;
+
+	createOptions.renderer = createOptions.renderer || browserDomRenderer;
+
+	if (
+		!createOptions.reHydratedState &&
+		dehydratedStateAttributeName &&
+		container
+	) {
+		pullDeHydratedStateFromContainer(
+			createOptions,
+			dehydratedStateAttributeName,
+			container,
+		);
+	}
+	createOptions.uiState = merge({}, createOptions.uiState || {});
+
+	const {render} = create(
+		container,
+		styleFunction,
+		baseMapsightConfig,
+		createOptions,
+	);
+
+	// initial render
+	if (render !== undefined) {
+		render({});
+	}
+
+	return render;
+}
+
+function pullDeHydratedStateFromContainer(
+	createOptions: CreateOptions,
+	dehydratedStateAttributeName: string,
+	container: HTMLElement,
+): void {
+	const stateJson = container.getAttribute(dehydratedStateAttributeName);
+	if (stateJson === null) {
+		return;
+	}
+
+	try {
+		createOptions.reHydratedState = JSON.parse(stateJson);
+		container.setAttribute(dehydratedStateAttributeName, "");
+	} catch (e) {
+		console.error(
+			"mapsight ui: error reading dehydrated state from container",
+			e,
+		);
+	}
+}

package/src/js/embed/node.ts

@@ -0,0 +1,57 @@
+import type {MapsightStyleFunction} from "@mapsight/lib-ol/style/styleFunction";
+
+import {create} from "..";
+import serverStringRenderer from "../renderer/server-string";
+import type {CreateOptions} from "../types";
+
+type Options = {
+	/** style function */
+	styleFunction: MapsightStyleFunction;
+
+	/** base mapsight core config */
+	baseMapsightConfig: object;
+
+	/**create options */
+	createOptions: CreateOptions;
+};
+
+type Result = {
+	store: any;
+	// (function(*=): undefined)
+	render(...something: Array<any>): void;
+	// (function(*=): Promise<undefined>)
+	renderAsync(...something: Array<any>): Promise<void>;
+};
+
+/**
+ * Node embed
+ *
+ * @returns embed reference
+ */
+export default function nodeEmbed(options: Options): Result {
+	const {
+		styleFunction,
+		baseMapsightConfig = {},
+		createOptions = {},
+	} = options;
+
+	createOptions.renderer = createOptions.renderer ?? serverStringRenderer;
+
+	const ctx = create(null, styleFunction, baseMapsightConfig, createOptions);
+
+	function render(renderProps = {}) {
+		if (ctx.render) {
+			ctx.render(renderProps);
+		}
+	}
+
+	async function renderAsync(renderProps = {}) {
+		if (ctx.renderAsync) {
+			await ctx.renderAsync(renderProps);
+		}
+	}
+
+	// for node we do not render but return an object with
+	// references to store and async render function
+	return {store: ctx.store, render, renderAsync};
+}

package/src/js/filters/tag-filter.ts

@@ -0,0 +1,135 @@
+import type {FilterFunction} from "@mapsight/core/lib/filter/types";
+
+import getPath from "@mapsight/lib-js/object/getPath";
+
+import type {MapsightUiFeature} from "../types";
+
+type CacheEntry = {
+	features: Array<MapsightUiFeature>;
+	filtered: Array<MapsightUiFeature>;
+	visibleTags: Record<string, Array<string>>;
+	visibleTagGroups: Record<string, boolean>;
+};
+
+/**
+ * Creates a cached tag filter function
+ */
+export function createTagFilterFunction(): FilterFunction {
+	const cache: Record<string, CacheEntry> = {};
+
+	return function tagFilterFunction(_features, filterState, featureSourceId) {
+		// FIXME: unify types for Features in core and ui
+		const features = _features as MapsightUiFeature[];
+
+		// early return if parameters are missing
+		if (!featureSourceId || !filterState || !features) {
+			return features;
+		}
+
+		// show all features, if no tag is selected
+		const visibleTags = getPath(filterState, [
+			"visibleTags",
+			featureSourceId,
+		]) as Record<string, string[]>;
+		const visibleTagGroups = getPath(filterState, [
+			"visibleTagGroups",
+			featureSourceId,
+		]) as Record<string, boolean>;
+		if (!visibleTags && !visibleTagGroups) {
+			return features;
+		}
+
+		let fromCache = cache[featureSourceId];
+
+		if (
+			fromCache === undefined ||
+			fromCache.features !== features ||
+			fromCache.visibleTags !== visibleTags ||
+			fromCache.visibleTagGroups !== visibleTagGroups
+		) {
+			const flattenedTags = transformTagMapsToArrays(
+				visibleTags,
+				visibleTagGroups,
+			);
+
+			fromCache = cache[featureSourceId] = {
+				// inputs:
+				features: features,
+				visibleTags: visibleTags,
+				visibleTagGroups: visibleTagGroups,
+				// output:
+				filtered: features.filter((feature) =>
+					flattenedTags.every(({group, tags}) =>
+						isFeatureMatchingFilter(feature, group, tags),
+					),
+				),
+			};
+		}
+
+		return fromCache?.filtered;
+	};
+}
+
+/**
+ * @deprecated Do not use. This uses a global cache. Use export createTagFilterFunction instead to create local function per mapsight instance!
+ */
+const deprecatedTagFilterFunction = createTagFilterFunction();
+export default deprecatedTagFilterFunction;
+
+function transformTagMapsToArrays(
+	visibleTags: Record<string, Array<string>> | null = null,
+	visibleTagGroups: Record<string, boolean> | null = null,
+) {
+	const result = {};
+	if (visibleTags) {
+		Object.keys(visibleTags).forEach((group) => {
+			const tags = getVisibleTagsForGroup(visibleTags, group);
+			if (tags.length) {
+				result[group] = tags;
+			}
+		});
+	}
+	if (visibleTagGroups) {
+		Object.keys(visibleTagGroups).forEach((group) => {
+			const isActive = !!visibleTagGroups[group];
+
+			if (isActive) {
+				result[group] = result[group] || true;
+			}
+		});
+	}
+
+	return Object.keys(result).map((group) => {
+		const tags = result[group];
+		return {group: group, tags: tags};
+	});
+}
+
+function getVisibleTagsForGroup(
+	visibleTags: Record<string, Array<string>>,
+	tagGroup: string,
+) {
+	return Object.keys(visibleTags[tagGroup]!).filter(
+		(tag) => visibleTags[tagGroup]![tag] === true,
+	);
+}
+
+function isFeatureMatchingFilter(
+	feature: MapsightUiFeature,
+	group: string,
+	visibleTags: boolean | Array<string>,
+): boolean {
+	const featureData = feature.properties?.tagGroups?.[group];
+	if (!featureData) {
+		return false;
+	}
+
+	const {andJunction, tags} = featureData;
+	if (visibleTags === true) {
+		return !!tags.length;
+	}
+
+	return visibleTags[andJunction === true ? "every" : "some"](
+		(tag) => tags.indexOf(tag) > -1,
+	);
+}

package/src/js/filters/time-filter.ts

@@ -0,0 +1,53 @@
+import type {FilterFunction} from "@mapsight/core/lib/filter/types";
+
+import {unreachable} from "@mapsight/lib-js/unreachable";
+
+type TimeFilterState = {
+	options?: {
+		/** from datetime in ISO 8601 (Y-m-d\TH:i:sP) */
+		fromDate?: string;
+		/** to datetime in ISO 8601 (Y-m-d\TH:i:sP) */
+		toDate?: string;
+		/** if set to true the filter will filter even if neither from nor to date are set. */
+		allowEmpty?: boolean;
+	};
+};
+
+// TODO: document/collect magic property names
+export interface FeatureWithWhen {
+	when?: object;
+	/** start datetime in ISO 8601 (Y-m-d\TH:i:sP) */
+	start: string;
+	/** end datetime in ISO 8601 (Y-m-d\TH:i:sP) */
+	end: string;
+}
+
+/**
+ * Feature filter to filter by when property in a time range.
+ * Features are expected to have a when object property with
+ * start and end datetimes.
+ */
+const timeFilter: FilterFunction = (features, filterState: TimeFilterState) => {
+	const filterOptions = filterState.options;
+	if (!filterOptions) {
+		return features;
+	}
+
+	const {fromDate, toDate, allowEmpty = false} = filterOptions;
+	if (!allowEmpty && !fromDate && !toDate) {
+		return features;
+	}
+
+	// TODO: document/collect magic property names (here: when.start, when.end)
+	const predicate = toDate
+		? (feature) =>
+				feature?.when?.start <= toDate &&
+				feature?.when?.end >= (fromDate || Date.now())
+		: fromDate
+			? (feature) => feature?.when?.end >= fromDate
+			: unreachable();
+
+	return features.filter(predicate);
+};
+
+export default timeFilter;

package/src/js/global.d.ts

@@ -0,0 +1,7 @@
+type Process = {
+	env: {
+		NN_JS_LOG_LEVEL?: string;
+	};
+};
+
+declare const process: Process;

package/src/js/helpers/components.ts

@@ -0,0 +1,66 @@
+import type {ComponentType, ReactNode} from "react";
+import {createContext, createElement, useCallback, useContext} from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ComponentProps {
+	// extendable
+}
+
+export type PropsWithFallback<P = unknown> = P & {
+	fallback?: ReactNode | undefined;
+};
+
+/** @deprecated */
+export type ComponentPropsWithFallback = {
+	MapOverlayModal: PropsWithFallback;
+	MapOverlayStart: PropsWithFallback;
+	MapOverlayEnd: PropsWithFallback;
+	MapOverlayTopLeft: PropsWithFallback;
+	MapOverlayTopRight: PropsWithFallback;
+	MapOverlayBottomLeft: PropsWithFallback;
+	MapOverlayBottomRight: PropsWithFallback;
+};
+
+export type MapsightUiComponents = {
+	[N in keyof ComponentProps]?: ComponentType<ComponentProps[N]>;
+} & {
+	[N in keyof ComponentPropsWithFallback]?: ComponentType<
+		ComponentPropsWithFallback[N]
+	>;
+};
+
+export const ComponentsContext = createContext<MapsightUiComponents>({});
+ComponentsContext.displayName = "ComponentsContext";
+
+/** @deprecated */
+export function useContextComponentWithFallback<
+	N extends keyof ComponentPropsWithFallback,
+>(
+	componentName: N,
+): (fallback: ReactNode, props: ComponentPropsWithFallback[N]) => ReactNode {
+	const Comp = useContext(ComponentsContext)[componentName];
+	return useCallback(
+		(fallback, props) => {
+			if (Comp) {
+				return createElement(Comp, {...props, fallback});
+			}
+			return fallback;
+		},
+		[Comp],
+	);
+}
+
+export function makeReplaceableComponent<N extends keyof ComponentProps>(
+	componentName: N,
+	Component: ComponentType<ComponentProps[N]>,
+): ComponentType<ComponentProps[N]> {
+	const NewComp: ComponentType<ComponentProps[N]> = (props) => {
+		const CtxComp = useContext(ComponentsContext)[componentName];
+		if (CtxComp !== undefined) {
+			return createElement(CtxComp as any, props as any);
+		}
+		return createElement(Component as any, props as any);
+	};
+	NewComp.displayName = `MsUiReplaceable${componentName}`;
+	return NewComp;
+}

package/src/js/helpers/create-action-watcher.ts

@@ -0,0 +1,35 @@
+// FIXME: use es once default export is fixed in @mapsight/lib-redux
+import type {AnyAction, StoreEnhancer} from "redux";
+import {applyMiddleware} from "redux";
+
+import {isNonNullable} from "@mapsight/lib-js/nonNullable";
+import flattenActions from "@mapsight/lib-redux/flatten-actions";
+
+type Result = {
+	handler: null | ((action: AnyAction) => void);
+	enhancer: StoreEnhancer<{dispatch: unknown}>;
+};
+
+// TODO: This is a candidate for lib-redux
+export default function createActionWatcher(): Result {
+	const context: Partial<Result> = {
+		handler: null,
+	};
+
+	context.enhancer = applyMiddleware(
+		(_store) => (nextMiddleware) => (action) => {
+			const result = nextMiddleware(action);
+
+			if (isNonNullable(context.handler)) {
+				const {handler} = context;
+				flattenActions(action).map((singleAction) =>
+					handler(singleAction),
+				);
+			}
+
+			return result;
+		},
+	);
+
+	return context as Result;
+}

package/src/js/helpers/events.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns `true` if no modifier key is pressed for the event.
+ */
+export function isEventWithNoModKeys(event: {
+	altKey: boolean;
+	ctrlKey: boolean;
+	shiftKey: boolean;
+	metaKey: boolean;
+}): boolean {
+	return !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+}

package/src/js/helpers/get-feature-property.ts

@@ -0,0 +1,14 @@
+import getPath from "@mapsight/lib-js/object/getPath";
+
+import type {MapsightUiFeature, MapsightUiFeatureProperty} from "../types";
+
+/**
+ * Gets the property value by key, falling back to the specified fallback if value is not defined.
+ */
+export default function getFeatureProperty(
+	feature: MapsightUiFeature,
+	key: MapsightUiFeatureProperty,
+	fallback: unknown = null,
+) {
+	return getPath(feature, ["properties", key], fallback);
+}