@mapsight/ui 7.0.0

package/src/js/plugins/common/render-await-feature-details-loaded.ts

@@ -0,0 +1,153 @@
+import {compose} from "redux";
+
+import type {FeatureSelectionsState} from "@mapsight/core/lib/feature-selections/selectors";
+import {LOAD_FEATURE_SOURCE_SUCCESS} from "@mapsight/core/lib/feature-sources/actions";
+import {findFeatureInFeatureSourcesById} from "@mapsight/core/lib/feature-sources/selectors";
+import type {FeatureSourcesState} from "@mapsight/core/lib/feature-sources/types";
+
+import {
+	FEATURE_SELECTIONS,
+	FEATURE_SOURCES,
+} from "../../config/constants/controllers";
+import createActionWatcher from "../../helpers/create-action-watcher";
+import getFeatureProperty from "../../helpers/get-feature-property";
+import {
+	FETCH_TEXT_FAILURE,
+	FETCH_TEXT_SUCCESS,
+	setFeatureDetailsUrl,
+} from "../../store/actions";
+import type {
+	MapsightUiContext,
+	MapsightUiFeature,
+	MapsightUiFeatureProperty,
+	PluginInstance,
+} from "../../types.ts";
+
+const defaultFeatureSelection = "select";
+const defaultFeatureSelectionsController = FEATURE_SELECTIONS;
+const defaultFeaturePropertyDetailsUrl = "detailsUrl";
+
+/**
+ * This plugin will delay the render until the details of the feature has been loaded
+ *
+ * @param [options] options
+ * @param [options.featureSelectionsController] name of the feature selections controller, defaults to mapsight ui default
+ * @param [options.featureSelection="select"] name of the feature selection to track
+ * @param [options.featurePropertyDetailsUrl="detailsUrl"] feature property to get the details url from
+ * @returns plugin instance
+ */
+export default function createFeatureDetailsLoadedPlugin(
+	options: {
+		featureSelection?: string;
+		featureSelectionsController?: string;
+		featurePropertyDetailsUrl?: MapsightUiFeatureProperty;
+	} = {},
+): PluginInstance {
+	const {
+		featureSelection = defaultFeatureSelection,
+		featureSelectionsController = defaultFeatureSelectionsController,
+		featurePropertyDetailsUrl = defaultFeaturePropertyDetailsUrl,
+	} = options;
+
+	const actionWatcherSources = createActionWatcher();
+	const actionWatcherDetails = createActionWatcher();
+
+	return {
+		afterInit: function runAwaitFeatureDetailsLoadedInitPlugin(context) {
+			context.storeEnhancer = context.storeEnhancer
+				? compose(
+						context.storeEnhancer,
+						actionWatcherSources.enhancer,
+						actionWatcherDetails.enhancer,
+					)
+				: compose(
+						actionWatcherSources.enhancer,
+						actionWatcherDetails.enhancer,
+					);
+		},
+
+		beforeRender: function runAwaitFeatureDetailsLoadedRenderPlugin(
+			context,
+		) {
+			if (!context.canPluginsDelayRender) {
+				return Promise.resolve(undefined);
+			}
+
+			const featureId = getSelectedFeatureIdFromConfig(
+				context.baseMapsightConfig,
+				featureSelection,
+				featureSelectionsController,
+			);
+
+			return new Promise<void>(function (resolve) {
+				if (!featureId) {
+					resolve();
+					return;
+				}
+
+				function checkSources() {
+					if (!featureId) return;
+					if (!context.store) return;
+
+					const feature = findFeatureInFeatureSourcesById(
+						context.store.getState()[
+							FEATURE_SOURCES
+						] as FeatureSourcesState,
+						featureId,
+					);
+					if (!feature) {
+						return;
+					}
+
+					const detailsUrl = getFeatureProperty(
+						feature as MapsightUiFeature,
+						featurePropertyDetailsUrl,
+					);
+					if (!detailsUrl) {
+						// no need to wait, because we do not have a details url to load
+						resolve();
+						return;
+					}
+
+					actionWatcherDetails.handler = (action) => {
+						if (
+							action.type === FETCH_TEXT_SUCCESS ||
+							action.type === FETCH_TEXT_FAILURE
+						) {
+							resolve();
+							actionWatcherDetails.handler = null;
+						}
+					};
+					context.store.dispatch(
+						setFeatureDetailsUrl(
+							getFeatureProperty(
+								feature as MapsightUiFeature,
+								featurePropertyDetailsUrl,
+							) as string,
+						),
+					);
+				}
+
+				checkSources();
+
+				actionWatcherSources.handler = (action) => {
+					// wait for feature sources to be loaded
+					if (action.type === LOAD_FEATURE_SOURCE_SUCCESS) {
+						checkSources();
+					}
+				};
+			});
+		},
+	};
+}
+
+function getSelectedFeatureIdFromConfig(
+	baseMapsightConfig: MapsightUiContext["baseMapsightConfig"],
+	featureSelection: string,
+	featureSelectionsControllerName: string,
+) {
+	const baseState = baseMapsightConfig[
+		featureSelectionsControllerName
+	] as FeatureSelectionsState;
+	return baseState[featureSelection]?.features[0];
+}

package/src/js/plugins/common/render-await-list-feature-sources-loaded.ts

@@ -0,0 +1,108 @@
+import {compose} from "redux";
+
+import type {LoadOptions} from "@mapsight/core/lib/feature-sources/actions";
+import {
+	LOAD_FEATURE_SOURCE_ERROR,
+	LOAD_FEATURE_SOURCE_SUCCESS,
+	load,
+} from "@mapsight/core/lib/feature-sources/actions";
+
+import get from "@mapsight/lib-js/object/getPath";
+
+import {
+	FEATURE_LIST,
+	FEATURE_SOURCES,
+} from "../../config/constants/controllers";
+import createActionWatcher from "../../helpers/create-action-watcher";
+import type {MapsightUiContext, PluginInstance} from "../../types.ts";
+
+const defaultLoadOptions: LoadOptions = {};
+const defaultListControllerName = FEATURE_LIST;
+
+/**
+ * This plugin will delay the render until the feature source for the list is loaded
+ *
+ * @param [options] options
+ * @param [options.loadOptions] options passed to the load function (depending on source type)
+ * @param [options.listControllerName="list"] list controller name
+ * @returns plugin instance
+ */
+export default function createPlugin(
+	options: {
+		loadOptions?: LoadOptions;
+		listControllerName?: string;
+	} = {},
+): PluginInstance {
+	const {
+		loadOptions = defaultLoadOptions,
+		listControllerName = defaultListControllerName,
+	} = options;
+
+	const actionWatcher = createActionWatcher();
+
+	return {
+		afterInit: function renderAwaitListFeatureSourcesLoadedInitPlugin(
+			context,
+		) {
+			context.storeEnhancer = context.storeEnhancer
+				? compose(context.storeEnhancer, actionWatcher.enhancer)
+				: actionWatcher.enhancer;
+		},
+
+		beforeRender: function renderAwaitListFeatureSourcesLoadedRenderPlugin(
+			context,
+		) {
+			if (!context.canPluginsDelayRender) {
+				return Promise.resolve(undefined);
+			}
+
+			return new Promise<void>(function (resolve) {
+				let featureSourcesToBeLoaded =
+					getFeatureSourcesToBeLoadedFromConfig(
+						context.baseMapsightConfig,
+						listControllerName,
+					);
+
+				if (!featureSourcesToBeLoaded.length) {
+					resolve();
+					return;
+				}
+
+				actionWatcher.handler = (action) => {
+					// wait for feature sources to be loaded
+					if (
+						action.type === LOAD_FEATURE_SOURCE_SUCCESS ||
+						action.type === LOAD_FEATURE_SOURCE_ERROR
+					) {
+						if (featureSourcesToBeLoaded.indexOf(action.id) > -1) {
+							featureSourcesToBeLoaded =
+								featureSourcesToBeLoaded.filter(
+									(f) => f !== action.id,
+								);
+						}
+
+						if (!featureSourcesToBeLoaded.length) {
+							resolve();
+						}
+					}
+				};
+				featureSourcesToBeLoaded.forEach((featureSourceId) =>
+					context.store?.dispatch(
+						load(FEATURE_SOURCES, featureSourceId, loadOptions),
+					),
+				);
+			});
+		},
+	};
+}
+
+function getFeatureSourcesToBeLoadedFromConfig(
+	baseMapsightConfig: MapsightUiContext["baseMapsightConfig"],
+	listControllerName: string,
+) {
+	return [
+		get(baseMapsightConfig, [listControllerName, "featureSource"]) as
+			| string
+			| undefined,
+	].filter((a): a is string => typeof a === "string");
+}

package/src/js/plugins/server/feature-deep-link.ts

@@ -0,0 +1,67 @@
+import {selectExclusively} from "@mapsight/core/lib/feature-selections/actions";
+
+import getQueryStringParameter from "@mapsight/lib-js/string/get-query-string-parameter";
+
+import * as c from "../../config/constants/controllers";
+import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
+import type {
+	ExternalMapsightUiRendererProps,
+	PluginInstance,
+} from "../../types.ts";
+
+const defaultFeatureSelectionsController = c.FEATURE_SELECTIONS;
+const defaultFeatureSelection = FEATURE_SELECTION_SELECT;
+const defaultGetParameter = "feature";
+const defaultRendererPropName = "requestUrlSearch";
+
+/**
+ * This plugin will select the feature identified by the defined get parameter and optionally remove parameters from the
+ * window.location using the history API.
+ *
+ * @param {object} [options] options
+ * @param {string} [options.rendererPropName="requestUrlSearch"] request url search property name passed to the renderer
+ * @param {string} [options.featureSelectionsController] name of the feature selections controller, defaults to mapsight ui default
+ * @param {string} [options.featureSelection="select"] name of the feature selection to track
+ * @param {string[] | boolean} [options.autoRemoveParameters] list of get parameters to remove once the feature
+ *                                            has been selected, defaults to ["feature", "cHash"]. Pass false to disable.
+ * @returns {import('../../types').PluginInstance} plugin instance
+ */
+export default function createPlugin(
+	options: {
+		featureSelectionsController?: string;
+		featureSelection?: string;
+		getParameter?: string;
+		rendererPropName?: keyof ExternalMapsightUiRendererProps;
+		autoRemoveParameters?: string[] | false;
+	} = {},
+): PluginInstance {
+	const {
+		featureSelectionsController = defaultFeatureSelectionsController,
+		featureSelection = defaultFeatureSelection,
+		getParameter = defaultGetParameter,
+		rendererPropName = defaultRendererPropName,
+	} = options;
+
+	return {
+		beforeRender: function handleFeatureDeepLink(context) {
+			const {store, rendererProps} = context;
+
+			if (!store) return;
+			if (!rendererProps?.[rendererPropName]) return;
+
+			const featureId = getQueryStringParameter(
+				rendererProps[rendererPropName],
+				getParameter,
+			);
+			if (featureId != null) {
+				store.dispatch(
+					selectExclusively(
+						featureSelectionsController,
+						featureSelection,
+						featureId,
+					),
+				);
+			}
+		},
+	};
+}

package/src/js/plugins/server-defaults.ts

@@ -0,0 +1,36 @@
+import type {PluginDefinition} from "../types.ts";
+import createFeatureSelectionDetailsUrlPlugin from "./common/feature-selection-details-url.ts";
+import createLangPlugin from "./common/lang.ts";
+import createOlProxyPlugin from "./common/ol-proxy.ts";
+import createFeatureDeepLinkPlugin from "./server/feature-deep-link.ts";
+
+/**
+ * Create the default set of plugins for use on the server IN ORDER!
+ *
+ * @param options options map for default plugins
+ * @returns sorted list of plugins
+ */
+export default function createDefaultPlugins(
+	options: {
+		olProxy?: Parameters<typeof createOlProxyPlugin>[0];
+		featureDeepLink?: Parameters<typeof createFeatureDeepLinkPlugin>[0];
+		featureSelectionDetailsUrl?: Parameters<
+			typeof createFeatureSelectionDetailsUrlPlugin
+		>[0];
+	} = {},
+): PluginDefinition[] {
+	return [
+		["lang", createLangPlugin()],
+		["olProxy", createOlProxyPlugin(options.olProxy)],
+		[
+			"featureDeepLink",
+			createFeatureDeepLinkPlugin(options.featureDeepLink),
+		],
+		[
+			"featureSelectionDetailsUrl",
+			createFeatureSelectionDetailsUrlPlugin(
+				options.featureSelectionDetailsUrl,
+			),
+		],
+	];
+}

package/src/js/renderer/browser-dom.tsx

@@ -0,0 +1,23 @@
+import ReactDOM from "react-dom";
+
+import App from "../components/app";
+import AppContext from "../components/helping/app-context";
+import type {MapsightUiRenderer} from "../types";
+
+/**
+ * Browser renderer (DOM) with re-hydration
+ */
+const mapsightUiBrowserDomRenderer: MapsightUiRenderer = (
+	container,
+	props,
+	hydrate = false,
+) => {
+	ReactDOM[hydrate ? "hydrate" : "render"](
+		<AppContext {...props}>
+			<App />
+		</AppContext>,
+		container,
+	);
+};
+
+export default mapsightUiBrowserDomRenderer;

package/src/js/renderer/server-string.tsx

@@ -0,0 +1,17 @@
+import ReactDOMServer from "react-dom/server";
+
+import App from "../components/app";
+import AppContext from "../components/helping/app-context";
+import type {MapsightUiRenderer} from "../types";
+
+/*
+ * Server side renderer for Node.js (renders a string)
+ */
+const mapsightUiServerStringRenderer: MapsightUiRenderer<string> = (_, props) =>
+	ReactDOMServer.renderToString(
+		<AppContext {...props}>
+			<App />
+		</AppContext>,
+	);
+
+export default mapsightUiServerStringRenderer;

package/src/js/server-handler.js

@@ -0,0 +1,39 @@
+import {create} from "./index";
+import serverStringRenderer from "./renderer/server-string";
+
+const defaultUrlPrefix = "/mapsight/";
+
+export default function createServerHandler(urlPrefix = defaultUrlPrefix) {
+	return (req, res, next) => {
+		if (req.url.indexOf(urlPrefix) !== 0) {
+			next();
+			return;
+		}
+
+		const options = req.body.options;
+		if (!options) {
+			res.writeHead(400);
+			console.error("empty request");
+			res.end();
+			return;
+		}
+
+		res.writeHead(200, {"Content-Type": "application/json; charset=utf-8"});
+
+		const {baseMapsightConfig = {}, createOptions = {}} = options;
+		createOptions.renderer = serverStringRenderer;
+
+		const {render} = create(null, null, baseMapsightConfig, createOptions);
+
+		render();
+		const html = render();
+		res.write(html);
+
+		// We are showing a feature detail?
+		//const featureId = options.feature;
+		//if (featureId) {
+		//	mapsight.dispatch(selectExclusively(FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT, featureId));
+		//}
+		res.end();
+	};
+}