@reventlessdev/reventless-map 0.1.0-alpha.1

package/src/MapData.res

@@ -0,0 +1,107 @@
+// Pure source → geo data mapping for MapView. Kept free of maplibre and
+// React so the shapes are testable and reusable (e.g. by a future
+// heatmap/route layer).
+
+type point = {
+  rowKey: string,
+  title: string,
+  lng: float,
+  lat: float,
+}
+
+// Accents may be CSS custom-property references (var(--…)) from the shared
+// canvas palette — those work in DOM styles but NOT on the WebGL canvas, so
+// map layers substitute a literal palette by source index.
+let literalPalette = ["#3b6ea5", "#7c9c5e", "#b0743c", "#7466a3", "#4d8a8a", "#a35f74"]
+
+let layerColor = (source: ReventlessUi.AutoViewMode.source, idx: int): string =>
+  switch source.accent {
+  | Some(a) if !String.startsWith(a, "var(") => a
+  | _ => literalPalette->Array.getUnsafe(mod(idx, Array.length(literalPalette)))
+  }
+
+let numberAt = (dict: Js.Dict.t<Js.Json.t>, field: string): option<float> =>
+  switch Js.Dict.get(dict, field) {
+  | None => None
+  | Some(v) =>
+    switch v->Js.Json.decodeNumber {
+    | Some(_) as n => n
+    // Tolerate stringly-typed coordinates from loose projections.
+    | None => v->Js.Json.decodeString->Option.flatMap(Float.fromString)
+    }
+  }
+
+let pointsOf = (source: ReventlessUi.AutoViewMode.source): array<point> =>
+  switch source.semantics.geo {
+  | None => []
+  | Some(geo) =>
+    ReventlessUi.AutoModes.prepareRows(source)->Array.filterMap(row => {
+      switch (numberAt(row.dict, geo.lngField), numberAt(row.dict, geo.latField)) {
+      | (Some(lng), Some(lat)) =>
+        let title =
+          source.semantics.labelField
+          ->Option.flatMap(f => Js.Dict.get(row.dict, f)->Option.flatMap(Js.Json.decodeString))
+          ->Option.getOr(row.key)
+        Some({rowKey: row.key, title, lng, lat})
+      | _ => None
+      }
+    })
+  }
+
+// GeoJSON FeatureCollection with rowKey/title properties — what the click
+// handler reads back off the feature.
+let featureCollection = (points: array<point>): Js.Json.t =>
+  Js.Json.object_(
+    Js.Dict.fromArray([
+      ("type", Js.Json.string("FeatureCollection")),
+      (
+        "features",
+        Js.Json.array(
+          points->Array.map(p =>
+            Js.Json.object_(
+              Js.Dict.fromArray([
+                ("type", Js.Json.string("Feature")),
+                (
+                  "geometry",
+                  Js.Json.object_(
+                    Js.Dict.fromArray([
+                      ("type", Js.Json.string("Point")),
+                      (
+                        "coordinates",
+                        Js.Json.array([Js.Json.number(p.lng), Js.Json.number(p.lat)]),
+                      ),
+                    ]),
+                  ),
+                ),
+                (
+                  "properties",
+                  Js.Json.object_(
+                    Js.Dict.fromArray([
+                      ("rowKey", Js.Json.string(p.rowKey)),
+                      ("title", Js.Json.string(p.title)),
+                    ]),
+                  ),
+                ),
+              ]),
+            )
+          ),
+        ),
+      ),
+    ]),
+  )
+
+// ((west, south), (east, north)) over every source's points.
+let bounds = (allPoints: array<point>): option<((float, float), (float, float))> =>
+  switch allPoints {
+  | [] => None
+  | points => {
+      let first = points->Array.getUnsafe(0)
+      let init = ((first.lng, first.lat), (first.lng, first.lat))
+      Some(
+        points->Array.reduce(init, (((w, s), (e, n)), p) => (
+          (Js.Math.min_float(w, p.lng), Js.Math.min_float(s, p.lat)),
+          (Js.Math.max_float(e, p.lng), Js.Math.max_float(n, p.lat)),
+        )),
+      )
+    }
+  }

package/src/MapData.res.mjs

@@ -0,0 +1,159 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Js_dict from "@rescript/runtime/lib/es6/Js_dict.js";
+import * as Js_json from "@rescript/runtime/lib/es6/Js_json.js";
+import * as Stdlib_Array from "@rescript/runtime/lib/es6/Stdlib_Array.js";
+import * as Stdlib_Float from "@rescript/runtime/lib/es6/Stdlib_Float.js";
+import * as Primitive_int from "@rescript/runtime/lib/es6/Primitive_int.js";
+import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
+import * as AutoModes$ReventlessUi from "@reventlessdev/reventless-ui/src/auto/AutoModes.res.mjs";
+
+let literalPalette = [
+  "#3b6ea5",
+  "#7c9c5e",
+  "#b0743c",
+  "#7466a3",
+  "#4d8a8a",
+  "#a35f74"
+];
+
+function layerColor(source, idx) {
+  let a = source.accent;
+  if (a !== undefined) {
+    if (a.startsWith("var(")) {
+      return literalPalette[Primitive_int.mod_(idx, literalPalette.length)];
+    } else {
+      return a;
+    }
+  } else {
+    return literalPalette[Primitive_int.mod_(idx, literalPalette.length)];
+  }
+}
+
+function numberAt(dict, field) {
+  let v = Js_dict.get(dict, field);
+  if (v === undefined) {
+    return;
+  }
+  let n = Js_json.decodeNumber(v);
+  if (n !== undefined) {
+    return n;
+  } else {
+    return Stdlib_Option.flatMap(Js_json.decodeString(v), Stdlib_Float.fromString);
+  }
+}
+
+function pointsOf(source) {
+  let geo = source.semantics.geo;
+  if (geo !== undefined) {
+    return Stdlib_Array.filterMap(AutoModes$ReventlessUi.prepareRows(source), row => {
+      let match = numberAt(row.dict, geo.lngField);
+      let match$1 = numberAt(row.dict, geo.latField);
+      if (match === undefined) {
+        return;
+      }
+      if (match$1 === undefined) {
+        return;
+      }
+      let title = Stdlib_Option.getOr(Stdlib_Option.flatMap(source.semantics.labelField, f => Stdlib_Option.flatMap(Js_dict.get(row.dict, f), Js_json.decodeString)), row.key);
+      return {
+        rowKey: row.key,
+        title: title,
+        lng: match,
+        lat: match$1
+      };
+    });
+  } else {
+    return [];
+  }
+}
+
+function featureCollection(points) {
+  return Js_dict.fromArray([
+    [
+      "type",
+      "FeatureCollection"
+    ],
+    [
+      "features",
+      points.map(p => Js_dict.fromArray([
+        [
+          "type",
+          "Feature"
+        ],
+        [
+          "geometry",
+          Js_dict.fromArray([
+            [
+              "type",
+              "Point"
+            ],
+            [
+              "coordinates",
+              [
+                p.lng,
+                p.lat
+              ]
+            ]
+          ])
+        ],
+        [
+          "properties",
+          Js_dict.fromArray([
+            [
+              "rowKey",
+              p.rowKey
+            ],
+            [
+              "title",
+              p.title
+            ]
+          ])
+        ]
+      ]))
+    ]
+  ]);
+}
+
+function bounds(allPoints) {
+  if (allPoints.length === 0) {
+    return;
+  }
+  let first = allPoints[0];
+  let init_0 = [
+    first.lng,
+    first.lat
+  ];
+  let init_1 = [
+    first.lng,
+    first.lat
+  ];
+  let init = [
+    init_0,
+    init_1
+  ];
+  return Stdlib_Array.reduce(allPoints, init, (param, p) => {
+    let match = param[1];
+    let match$1 = param[0];
+    return [
+      [
+        Math.min(match$1[0], p.lng),
+        Math.min(match$1[1], p.lat)
+      ],
+      [
+        Math.max(match[0], p.lng),
+        Math.max(match[1], p.lat)
+      ]
+    ];
+  });
+}
+
+export {
+  literalPalette,
+  layerColor,
+  numberAt,
+  pointsOf,
+  featureCollection,
+  bounds,
+}
+/* AutoModes-ReventlessUi Not a pure module */

package/src/MapMode.res

@@ -0,0 +1,109 @@
+// Phase 5 — registers the "map" view mode with reventless-ui's registry.
+// Registration is an explicit opt-in (MapMode.init() from the host app),
+// never a module side effect of reventless-ui: apps without geo data never
+// load this package or maplibre-gl.
+
+let defaultStyle = "https://demotiles.maplibre.org/style.json"
+
+let styleRef = ref(defaultStyle)
+
+// The geocoder handed to the geo-point form input (address search → coords).
+// None ⇒ the input still works as a click-to-place map, just without search.
+let geocoderRef: ref<option<GeoInput.geocoder>> = ref(None)
+
+let mapIcon =
+  <span ariaHidden=true style={ReactDOM.Style.make(~fontSize="0.9em", ~lineHeight="1", ())}>
+    {React.string(`◎`)}
+  </span>
+
+// ─── geo-point form input (SchemaForm pluggable-input registry) ──────────────
+//
+// A `geo-point` field carries a whole `{lat, lng}` object; GeoInput owns the
+// JSON encode/decode of that object into the field's string formState value,
+// so the submit-time coercion (which parses object-typed fields back) round-
+// trips it. Registered by init() alongside the map view mode — one opt-in
+// lights up both the map display and the map-backed command input.
+
+let encodePoint = (~lat: float, ~lng: float): string =>
+  Js.Json.stringifyAny({"lat": lat, "lng": lng})->Option.getOr("")
+
+let decodePoint = (value: string): option<(float, float)> =>
+  if value == "" {
+    None
+  } else {
+    switch Js.Json.parseExn(value)->Js.Json.decodeObject {
+    | Some(o) =>
+      switch (
+        Js.Dict.get(o, "lat")->Option.flatMap(Js.Json.decodeNumber),
+        Js.Dict.get(o, "lng")->Option.flatMap(Js.Json.decodeNumber),
+      ) {
+      | (Some(lat), Some(lng)) => Some((lat, lng))
+      | _ => None
+      }
+    | None => None
+    | exception _ => None
+    }
+  }
+
+let geoPointInput = (
+  ~key as _,
+  ~value,
+  ~onChange,
+  ~onBlur as _,
+  ~required as _,
+  ~hasError as _,
+) => {
+  let (lat, lng) = switch decodePoint(value) {
+  | Some((la, ln)) => (Some(la), Some(ln))
+  | None => (None, None)
+  }
+  <GeoInput
+    ?lat
+    ?lng
+    onChange={((la, ln)) => onChange(encodePoint(~lat=la, ~lng=ln))}
+    mapStyle=styleRef.contents
+    geocoder=?geocoderRef.contents
+  />
+}
+
+// Non-empty values must decode to a full (lat, lng); empty is valid (an
+// optional, not-yet-picked location).
+let geoPointValidate = (raw: string): option<string> =>
+  raw == "" || decodePoint(raw)->Option.isSome ? None : Some("Pick a location on the map")
+
+let registerGeoInput = (): unit =>
+  ReventlessUi.SemanticRenderers.register(
+    ReventlessUi.AutoSemantics.GeoPoint,
+    {
+      cell: (~key as _, ~value as _) => None,
+      detail: (~key as _, ~value as _) => None,
+      input: geoPointInput,
+      validateInput: geoPointValidate,
+    },
+  )
+
+// Call once at app startup, before the first auto page renders. `mapStyle`
+// should point at a full MapLibre style JSON (tiles + glyphs); the default
+// demo style is for development only. `geocoder` (optional) powers address
+// search in the geo-point command input; without it the input is still a
+// click-to-place map.
+let init = (~mapStyle: option<string>=?, ~geocoder: option<GeoInput.geocoder>=?, ()): unit => {
+  mapStyle->Option.forEach(s => styleRef := s)
+  geocoder->Option.forEach(g => geocoderRef := Some(g))
+  registerGeoInput()
+  ReventlessUi.AutoViewMode.register({
+    id: "map",
+    label: "Map",
+    icon: mapIcon,
+    // Canvas-composable: a "Map" canvas page layers every geo-capable read
+    // model of a plugin (one clustered layer each, plan Axis C1).
+    arity: Multi({min: 1}),
+    // Capable when the schema resolves a complete numeric lat/lng pair.
+    isCapable: schema => ReventlessUi.AutoSemantics.resolve(schema).geo->Option.isSome,
+    render: sources => <MapView sources mapStyle=styleRef.contents />,
+    // Keep in sync with the `optionalModes` entry in ui's ComponentManifest —
+    // this registration only exists at app runtime, so the manifest can't
+    // read it from the registry.
+    capability: "geo — a numeric lat/lng field pair",
+  })
+}

package/src/MapMode.res.mjs

@@ -0,0 +1,134 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Js_dict from "@rescript/runtime/lib/es6/Js_dict.js";
+import * as Js_json from "@rescript/runtime/lib/es6/Js_json.js";
+import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
+import * as JsxRuntime from "react/jsx-runtime";
+import * as MapView$ReventlessMap from "./MapView.res.mjs";
+import * as GeoInput$ReventlessMap from "./GeoInput.res.mjs";
+import * as AutoViewMode$ReventlessUi from "@reventlessdev/reventless-ui/src/auto/AutoViewMode.res.mjs";
+import * as AutoSemantics$ReventlessUi from "@reventlessdev/reventless-ui/src/auto/AutoSemantics.res.mjs";
+import * as SemanticRenderers$ReventlessUi from "@reventlessdev/reventless-ui/src/auto/SemanticRenderers.res.mjs";
+
+let defaultStyle = "https://demotiles.maplibre.org/style.json";
+
+let styleRef = {
+  contents: defaultStyle
+};
+
+let geocoderRef = {
+  contents: undefined
+};
+
+let mapIcon = JsxRuntime.jsx("span", {
+  children: `◎`,
+  "aria-hidden": true,
+  style: {
+    fontSize: "0.9em",
+    lineHeight: "1"
+  }
+});
+
+function encodePoint(lat, lng) {
+  return Stdlib_Option.getOr(JSON.stringify({
+    lat: lat,
+    lng: lng
+  }), "");
+}
+
+function decodePoint(value) {
+  if (value === "") {
+    return;
+  }
+  let o;
+  try {
+    o = Js_json.decodeObject(JSON.parse(value));
+  } catch (exn) {
+    return;
+  }
+  if (o === undefined) {
+    return;
+  }
+  let match = Stdlib_Option.flatMap(Js_dict.get(o, "lat"), Js_json.decodeNumber);
+  let match$1 = Stdlib_Option.flatMap(Js_dict.get(o, "lng"), Js_json.decodeNumber);
+  if (match !== undefined && match$1 !== undefined) {
+    return [
+      match,
+      match$1
+    ];
+  }
+}
+
+function geoPointInput(param, value, onChange, param$1, param$2, param$3) {
+  let match = decodePoint(value);
+  let match$1 = match !== undefined ? [
+      match[0],
+      match[1]
+    ] : [
+      undefined,
+      undefined
+    ];
+  return JsxRuntime.jsx(GeoInput$ReventlessMap.make, {
+    lat: match$1[0],
+    lng: match$1[1],
+    onChange: param => onChange(encodePoint(param[0], param[1])),
+    mapStyle: styleRef.contents,
+    geocoder: geocoderRef.contents
+  });
+}
+
+function geoPointValidate(raw) {
+  if (raw === "" || Stdlib_Option.isSome(decodePoint(raw))) {
+    return;
+  } else {
+    return "Pick a location on the map";
+  }
+}
+
+function registerGeoInput() {
+  SemanticRenderers$ReventlessUi.register("GeoPoint", {
+    cell: (param, param$1) => {},
+    detail: (param, param$1) => {},
+    input: geoPointInput,
+    validateInput: geoPointValidate
+  });
+}
+
+function init(mapStyle, geocoder, param) {
+  Stdlib_Option.forEach(mapStyle, s => {
+    styleRef.contents = s;
+  });
+  Stdlib_Option.forEach(geocoder, g => {
+    geocoderRef.contents = g;
+  });
+  registerGeoInput();
+  AutoViewMode$ReventlessUi.register({
+    id: "map",
+    label: "Map",
+    icon: mapIcon,
+    arity: {
+      TAG: "Multi",
+      min: 1
+    },
+    isCapable: schema => Stdlib_Option.isSome(AutoSemantics$ReventlessUi.resolve(schema, undefined).geo),
+    render: sources => JsxRuntime.jsx(MapView$ReventlessMap.make, {
+      sources: sources,
+      mapStyle: styleRef.contents
+    }),
+    capability: "geo — a numeric lat/lng field pair"
+  });
+}
+
+export {
+  defaultStyle,
+  styleRef,
+  geocoderRef,
+  mapIcon,
+  encodePoint,
+  decodePoint,
+  geoPointInput,
+  geoPointValidate,
+  registerGeoInput,
+  init,
+}
+/* mapIcon Not a pure module */

package/src/MapView.res

@@ -0,0 +1,182 @@
+// Phase 5 — the map view mode: one clustered point layer per source, accent
+// colors, click → the source's drill detail. Registered by MapMode.init()
+// (never by reventless-ui itself), so non-geo apps pay no bundle cost.
+//
+// The style URL must point at a full MapLibre style (tiles + glyphs); the
+// default demo style is fine for development, real apps pass their own via
+// MapMode.init(~mapStyle=…). Remember to import maplibre-gl's CSS once in
+// the app (see README).
+
+open Maplibre.MaplibreBindings
+
+let sourceId = (idx: int): string => "autoui-src-" ++ Int.toString(idx)
+let clusterLayerId = (idx: int): string => "autoui-clusters-" ++ Int.toString(idx)
+let pointLayerId = (idx: int): string => "autoui-points-" ++ Int.toString(idx)
+
+// Layer/spec JSON is built from trusted internal values only (indices +
+// palette colors), so template-parsing is safe and beats hand-rolling
+// nested Js.Dict pyramids.
+let json = Js.Json.parseExn
+
+let clusterSourceSpec = (data: Js.Json.t): Js.Json.t => {
+  let spec = Js.Dict.fromArray([
+    ("type", Js.Json.string("geojson")),
+    ("data", data),
+    ("cluster", Js.Json.boolean(true)),
+    ("clusterRadius", Js.Json.number(40.0)),
+    ("clusterMaxZoom", Js.Json.number(14.0)),
+  ])
+  Js.Json.object_(spec)
+}
+
+let clusterLayerSpec = (idx: int, color: string): Js.Json.t =>
+  json(`{
+    "id": "${clusterLayerId(idx)}",
+    "type": "circle",
+    "source": "${sourceId(idx)}",
+    "filter": ["has", "point_count"],
+    "paint": {
+      "circle-color": "${color}",
+      "circle-opacity": 0.6,
+      "circle-radius": ["step", ["get", "point_count"], 12, 10, 16, 50, 22]
+    }
+  }`)
+
+let pointLayerSpec = (idx: int, color: string): Js.Json.t =>
+  json(`{
+    "id": "${pointLayerId(idx)}",
+    "type": "circle",
+    "source": "${sourceId(idx)}",
+    "filter": ["!", ["has", "point_count"]],
+    "paint": {
+      "circle-color": "${color}",
+      "circle-radius": 6,
+      "circle-stroke-width": 1.5,
+      "circle-stroke-color": "#ffffff"
+    }
+  }`)
+
+let featureRowKey = (e: mapMouseEvent): option<string> =>
+  e.features
+  ->Js.Nullable.toOption
+  ->Option.flatMap(fs => fs->Array.get(0))
+  ->Option.flatMap(f =>
+    f.properties
+    ->Js.Json.decodeObject
+    ->Option.flatMap(o => Js.Dict.get(o, "rowKey"))
+    ->Option.flatMap(Js.Json.decodeString)
+  )
+
+@react.component
+let make = (~sources: array<ReventlessUi.AutoViewMode.source>, ~mapStyle: string) => {
+  let containerRef = React.useRef(Js.Nullable.null)
+  let mapRef: React.ref<option<map>> = React.useRef(None)
+  let (loaded, setLoaded) = React.useState(() => false)
+  // Click handlers register once per layer but must see the CURRENT sources
+  // (the canvas re-renders with fresh rows / hidden layers).
+  let sourcesRef = React.useRef(sources)
+  sourcesRef.current = sources
+  let didFit = React.useRef(false)
+  let installedSources: React.ref<array<string>> = React.useRef([])
+
+  React.useEffect0(() => {
+    switch containerRef.current->Js.Nullable.toOption {
+    | None => None
+    | Some(el) =>
+      let map = makeMap({container: el, style: mapStyle, center: (0.0, 20.0), zoom: 1.5})
+      let _ = map->addControl(makeNavigationControl())
+      map->on("load", () => setLoaded(_ => true))
+      mapRef.current = Some(map)
+      Some(
+        () => {
+          mapRef.current = None
+          map->remove
+        },
+      )
+    }
+  })
+
+  let openRowByKey = (idx: int, rowKey: string): unit =>
+    sourcesRef.current
+    ->Array.get(idx)
+    ->Option.forEach(source =>
+      ReventlessUi.AutoModes.prepareRows(source)
+      ->Array.find(r => r.key == rowKey)
+      ->Option.forEach(r => source.onOpenRow(~rowId=r.key, ~rowData=r.json))
+    )
+
+  // Sync layers whenever sources change: first sighting of a source index
+  // installs source + layers + handlers; afterwards only the data updates.
+  React.useEffect2(() => {
+    switch (mapRef.current, loaded) {
+    | (Some(map), true) =>
+      sources->Array.forEachWithIndex((source, idx) => {
+        let points = MapData.pointsOf(source)
+        let data = MapData.featureCollection(points)
+        let id = sourceId(idx)
+        switch map->getSource(id) {
+        | Some(geo) => geo->setData(data)
+        | None =>
+          if !(installedSources.current->Array.includes(id)) {
+            Array.push(installedSources.current, id)
+            map->addSource(id, clusterSourceSpec(data))
+            let color = MapData.layerColor(source, idx)
+            map->addLayer(clusterLayerSpec(idx, color))
+            map->addLayer(pointLayerSpec(idx, color))
+            map->onLayer("click", pointLayerId(idx), e =>
+              featureRowKey(e)->Option.forEach(k => openRowByKey(idx, k))
+            )
+            map->onLayer("click", clusterLayerId(idx), e =>
+              map->flyTo({center: (e.lngLat.lng, e.lngLat.lat), zoom: map->getZoom +. 2.0})
+            )
+          }
+        }
+      })
+      // Fit once, when the first non-empty data lands.
+      if !didFit.current {
+        let allPoints = sources->Array.flatMap(MapData.pointsOf)
+        switch MapData.bounds(allPoints) {
+        | Some(b) =>
+          didFit.current = true
+          map->fitBounds(b, {padding: 48, maxZoom: 12.0, duration: 0})
+        | None => ()
+        }
+      }
+    | _ => ()
+    }
+    None
+  }, (sources, loaded))
+
+  let total = sources->Array.reduce(0, (n, s) => n + Array.length(s.rows))
+
+  <div
+    style={ReactDOM.Style.make(~position="relative", ~width="100%", ~height="520px", ())}>
+    <div
+      ref={ReactDOM.Ref.domRef(containerRef)}
+      style={ReactDOM.Style.make(
+        ~position="absolute",
+        ~top="0",
+        ~bottom="0",
+        ~left="0",
+        ~right="0",
+        ~borderRadius="8px",
+        ~overflow="hidden",
+        (),
+      )}
+    />
+    <span
+      style={ReactDOM.Style.make(
+        ~position="absolute",
+        ~bottom="4px",
+        ~left="8px",
+        ~fontSize="11px",
+        ~opacity="0.7",
+        ~background="rgba(255,255,255,0.8)",
+        ~padding="1px 6px",
+        ~borderRadius="4px",
+        (),
+      )}>
+      {React.string(`Showing the ${Int.toString(total)} loaded item(s)`)}
+    </span>
+  </div>
+}