@prostgles/prostgles 2.3.6-dev.1786548258

package/client/src/dashboard/UserManager.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+import type { DBHandlerClient } from "prostgles-client";
+import { usePrglCore } from "src/useAppState/PrglCoreContextProvider";
+import { t } from "../i18n/i18nUtils";
+import { PasswordlessSetup } from "./AccessControl/PasswordlessSetup";
+import SmartTable from "./SmartTable";
+
+export type Users = {
+  created?: Date;
+  id?: string;
+  last_updated?: number;
+  password?: string;
+  status?: string;
+  type?: string;
+  username?: string;
+};
+
+export const UserManager = () => {
+  const { dbs, dbsTables, dbsMethodSchema, dbsSql, user } = usePrglCore();
+
+  let content: React.ReactNode;
+  if (user?.type !== "admin") {
+    content = <div>Must be admin to access this section</div>;
+  } else if (user.passwordless_admin) {
+    content = <PasswordlessSetup />;
+  } else {
+    content = (
+      <SmartTable
+        className="w-full"
+        db={dbs}
+        sql={dbsSql}
+        methods={dbsMethodSchema}
+        titlePrefix={t.Users["Prostgles UI users"]}
+        tableName="users"
+        tables={dbsTables}
+        showInsert={true}
+        allowEdit={true}
+        realtime={{}}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={
+        "flex-col relative w-full f-1 min-h-0 pt-1 " +
+        (window.isLowWidthScreen ? "" : " px-2 ")
+      }
+    >
+      {content}
+    </div>
+  );
+};

package/client/src/dashboard/W_Barchart/W_Barchart.tsx

@@ -0,0 +1,104 @@
+import ErrorComponent from "@components/ErrorComponent";
+import Loading from "@components/Loader/Loading";
+import { CellBarchart } from "@components/ProgressBar";
+import { Table } from "@components/Table/Table";
+import type { AnyObject } from "prostgles-types";
+import React from "react";
+import type { CommonWindowProps } from "../Dashboard/Dashboard";
+import type { WindowSyncItem } from "../Dashboard/dashboardUtils";
+import { type ActiveRow } from "../W_Table/W_Table";
+import Window from "../Window/Window";
+import { useBarchartData } from "./useBarchartData";
+import { kFormatter } from "../W_Table/tableUtils/kFormatter";
+
+export type W_BarchartProps = Omit<CommonWindowProps, "w"> & {
+  onClickRow: (
+    row: AnyObject | undefined,
+    tableName: string,
+    values: ActiveRow["barChart"],
+  ) => void;
+  myActiveRow: ActiveRow | undefined;
+  activeRowColor: string | undefined;
+  w: WindowSyncItem<"barchart">;
+};
+
+export const W_Barchart = ({
+  w,
+  prgl,
+  myLinks,
+  workspace,
+  getLinksAndWindows,
+}: W_BarchartProps) => {
+  const { barChartData, setSort, sort } = useBarchartData({
+    myLinks,
+    prgl,
+    getLinksAndWindows,
+  });
+  return (
+    <Window
+      getMenu={undefined}
+      childWindow={undefined}
+      w={w}
+      connection={prgl.connection}
+      layoutMode={workspace.layout_mode ?? "editable"}
+    >
+      {!barChartData ?
+        <Loading />
+      : barChartData.type === "error" ?
+        <ErrorComponent error={barChartData.message} />
+      : <Table
+          rows={barChartData.rows}
+          sort={
+            sort && [
+              {
+                key: sort.column,
+                asc: sort.direction === "asc",
+              },
+            ]
+          }
+          onSort={([newSort]) => {
+            setSort(
+              newSort && {
+                column: newSort.key,
+                direction: newSort.asc ? "asc" : "desc",
+              },
+            );
+          }}
+          cols={[
+            {
+              key: "label",
+              name: "label",
+              label: barChartData.labelColumn,
+              width: barChartData.labelMaxWidth,
+              sortable: true,
+              filter: false,
+              tsDataType: "string",
+              udt_name: "text",
+            },
+            {
+              key: "value",
+              name: "value",
+              label:
+                barChartData.statType?.funcName.slice(1).toUpperCase() ||
+                "Count",
+              sortable: true,
+              filter: false,
+              tsDataType: "number",
+              udt_name: "int4",
+              onRender: ({ value }) => (
+                <CellBarchart
+                  min={barChartData.min}
+                  max={barChartData.max}
+                  barColor={`rgb(${barChartData.colorArr.slice(0, 3).join(",")})`}
+                  textColor={"var(--text-0)"}
+                  value={Number(value)}
+                  message={kFormatter(Number(value))}
+                />
+              ),
+            },
+          ]}
+        />
+      }
+    </Window>
+  );
+};

package/client/src/dashboard/W_Barchart/fetchSQLBarchartData.ts

@@ -0,0 +1,7 @@
+import type { SQLHandler } from "prostgles-types";
+import type { LinkSyncItem } from "../Dashboard/dashboardUtils";
+
+export const fetchSQLBarchartData = async (
+  sql: SQLHandler,
+  linkOpts: Extract<LinkSyncItem["options"], { type: "barchart" }>,
+) => {};

package/client/src/dashboard/W_Barchart/useBarchartData.ts

@@ -0,0 +1,176 @@
+import { useState } from "react";
+import type { W_BarchartProps } from "./W_Barchart";
+import { usePromise, type TableHandlerClient } from "prostgles-client";
+import {
+  getSerialisableError,
+  includes,
+  type AnyObject,
+} from "prostgles-types";
+
+export const useBarchartData = ({
+  myLinks,
+  prgl,
+  getLinksAndWindows,
+}: Pick<W_BarchartProps, "myLinks" | "prgl" | "getLinksAndWindows">) => {
+  const [sort, setSort] = useState<
+    { column: string; direction: "asc" | "desc" } | undefined
+  >(undefined);
+  const { db, sql } = prgl;
+  const { windows } = getLinksAndWindows();
+  const barChartData = usePromise(async () => {
+    const firstLink = myLinks[0];
+    if (!firstLink) {
+      return {
+        type: "error" as const,
+        message: "No links found for barchart",
+      };
+    }
+
+    const linkOpts = firstLink.options;
+    if (linkOpts.type !== "barchart") {
+      return {
+        type: "error" as const,
+        message: `Invalid link type for barchart: ${firstLink.options.type}`,
+      };
+    }
+    const { columns, statType } = linkOpts;
+    const [column] = columns;
+    if (!column) {
+      return {
+        type: "error" as const,
+        message: "No label column defined for barchart",
+      };
+    }
+    const { colorArr, name: labelColumn } = column;
+    const { dataSource } = linkOpts;
+    if (dataSource?.type === "sql") {
+      // const { dataSource } = linkOpts;
+      if (!sql) {
+        return {
+          type: "error" as const,
+          message: "Running SQL not allowed ",
+        };
+      }
+
+      try {
+        const sorting =
+          sort ?
+            `ORDER BY ${sort.column === "label" ? 1 : 2} ${sort.direction === "asc" ? "ASC" : "DESC"}`
+          : "";
+        const result = await sql(
+          `
+          SELECT ${[
+            labelColumn + " AS label",
+            statType ?
+              `${statType.funcName}(${statType.numericColumn}) AS value`
+            : "COUNT(*) AS value",
+          ].join(", ")}
+          FROM (
+            ${dataSource.sql}
+          ) prostgles_barchart_table
+          GROUP BY 1
+          ${sorting}
+        `,
+          undefined,
+          {
+            returnType: "default-with-rollback",
+          },
+        );
+        return {
+          type: "data" as const,
+          linkOpts,
+          rows: result.rows,
+          labelColumn,
+          colorArr,
+          statType,
+          ...getMinMax(result.rows),
+        };
+      } catch (error) {
+        return {
+          type: "error" as const,
+          // message: `Error fetching barchart data: ${error}`,
+          message: getSerialisableError(error),
+        };
+      }
+    } else if (
+      dataSource?.type === "local-table" ||
+      dataSource?.type === "table"
+    ) {
+      const { w1_id, w2_id } = firstLink;
+      const linkTable =
+        w1_id !== w2_id ?
+          windows.find(
+            (w) => w.type === "table" && [w1_id, w2_id].includes(w.id),
+          )
+        : undefined;
+      const tableName =
+        dataSource.type === "local-table" ?
+          dataSource.localTableName
+        : linkTable?.table_name;
+      const filter =
+        dataSource.type === "local-table" ?
+          dataSource.smartGroupFilter
+        : undefined;
+      const tableHandler =
+        !tableName ? undefined : (
+          (db[tableName] as TableHandlerClient | undefined)
+        );
+      if (!tableHandler?.find) {
+        return {
+          type: "error" as const,
+          message: `Local table ${tableName} not found/allowed`,
+        };
+      }
+
+      const funcName = statType ? statType.funcName : "$countAll";
+      const numericColumn = statType?.numericColumn;
+      const rows = await tableHandler.find(filter, {
+        select: {
+          label: { $column: [labelColumn] },
+          value: {
+            [funcName]: numericColumn ? [numericColumn] : [],
+          },
+        },
+        orderBy: sort && {
+          key: sort.column,
+          asc: sort.direction === "asc",
+        },
+
+        limit: 1000,
+      });
+      return {
+        type: "data" as const,
+        linkOpts,
+        rows,
+        labelColumn,
+        colorArr,
+        statType,
+        ...getMinMax(rows),
+      };
+    }
+  }, [myLinks, db, sort, windows]);
+
+  return { barChartData, sort, setSort };
+};
+
+const getMinMax = (rows: AnyObject[]) => {
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  let labelMaxWidth = 50;
+  rows.forEach(({ value, label }) => {
+    const val = value;
+    if (typeof val === "number") {
+      if (val < min) min = val;
+      if (val > max) max = val;
+    }
+    const labelStr =
+      includes(["string", "number"], typeof label) ?
+        label.toString()
+      : JSON.stringify(label || "");
+    const labelLength = labelStr.length * 8;
+    if (labelLength > labelMaxWidth) labelMaxWidth = labelLength;
+  });
+  if (min === Number.POSITIVE_INFINITY) min = 0;
+  if (max === Number.NEGATIVE_INFINITY) max = 0;
+  return { min, max, labelMaxWidth };
+};

package/client/src/dashboard/W_Map/OSM/OverpassQuery.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { CodeEditorWithSaveButton } from "../../CodeEditor/CodeEditorWithSaveButton";
+
+type P = {
+  query: string;
+  onChange: (value: string) => void;
+  autoSave?: boolean;
+};
+export const OverpassQuery = ({ query, onChange, autoSave }: P) => {
+  return (
+    <div style={{ minWidth: "500px" }}>
+      <CodeEditorWithSaveButton
+        language="text"
+        label="Overpass Query"
+        autoSave={autoSave}
+        value={query}
+        onSave={onChange}
+      />
+    </div>
+  );
+};

package/client/src/dashboard/W_Map/OSM/fetchOSMCountryBoundary.ts

@@ -0,0 +1,73 @@
+const fetchCountryBoundary = async (countryName: string) => {
+  // Define the Overpass API query to get the boundary of a specific country in GeoJSON format
+  const overpassQuery = `
+      [out:json];
+      relation["type"="boundary"]["boundary"="administrative"]["admin_level"="2"]["name:en"="${countryName}"];
+      out body;
+      >;
+      out skel qt;
+  `;
+
+  // Encode the query for the Overpass API request
+  const overpassUrl =
+    "https://overpass-api.de/api/interpreter?data=" +
+    encodeURIComponent(overpassQuery);
+
+  try {
+    // Fetch data from the Overpass API
+    const response = await fetch(overpassUrl);
+    const data = await response.json();
+
+    // Filter for the relation that contains the boundary and the name in English
+    const relation = data.elements.find(
+      (element) => element.type === "relation" && element.tags["name:en"],
+    );
+
+    if (!relation) {
+      throw new Error(`Boundary for country '${countryName}' not found`);
+    }
+
+    // Create a mapping of node IDs to coordinates (lat, lon)
+    const nodeMap: Record<string, [number, number]> = {};
+    data.elements.forEach((element) => {
+      if (element.type === "node") {
+        nodeMap[element.id] = [element.lon, element.lat]; // Store longitude and latitude as a pair
+      }
+    });
+
+    // Extract the ways that form the polygon and their respective nodes
+    const coordinates = relation.members
+      .filter((member) => member.type === "way")
+      .map((way) => way.ref)
+      .map((ref) =>
+        data.elements
+          .find((element) => element.type === "way" && element.id === ref)
+          .nodes.map((nodeId) => nodeMap[nodeId]),
+      );
+
+    // Construct the GeoJSON object
+    const geojson = {
+      type: "Feature",
+      properties: {
+        name: relation.tags["name:en"] || relation.tags.name || "Unknown",
+      },
+      geometry: {
+        type: "Polygon",
+        coordinates: [coordinates.flat()],
+      },
+    };
+
+    return geojson;
+  } catch (error) {
+    console.error("Error fetching country boundary:", error);
+  }
+};
+
+// Example usage:
+fetchCountryBoundary("Germany")
+  .then((geojson) => {
+    console.log("Country Boundary GeoJSON:", geojson);
+  })
+  .catch((error) => {
+    console.error(error);
+  });

package/client/src/dashboard/W_Map/OSM/getOSMData.ts

@@ -0,0 +1,240 @@
+import { isDefined } from "../../../utils/utils";
+import type { GeoJSONFeature } from "../../Map/DeckGLMap";
+import { osmRelationToGeoJSON } from "./osmToGeoJSON";
+
+const OVERPASS_URL = "https://overpass-api.de/api/interpreter";
+
+type OSMElementType = "node" | "way" | "relation";
+
+type OSMElementBase = {
+  id: number;
+  type: OSMElementType;
+  tags?: Partial<{ [key: string]: string }>;
+};
+
+export type OSMNode = OSMElementBase & {
+  type: "node";
+  lat: number;
+  lon: number;
+};
+
+export type OSMWay = Omit<OSMElementBase, "type"> & {
+  type: "way";
+  nodes: number[]; // Array of node IDs
+};
+
+export type OSMRelationMemberWay = {
+  ref: number; // Reference ID of the member element
+  type: "way";
+  role: "outer" | "inner";
+};
+export type OSMRelationMemberNode = {
+  ref: number; // Reference ID of the member element
+  type: "node";
+  role: "admin_centre" | "label";
+};
+export type OSMRelationMember = OSMRelationMemberWay | OSMRelationMemberNode;
+
+export type OSMRelation = OSMElementBase & {
+  type: "relation";
+  members: OSMRelationMember[];
+};
+
+export type OSMElement = OSMNode | OSMWay | OSMRelation;
+
+const checkIfFailedResponse = (response: Response) => {
+  if (!response.ok) {
+    throw new Error(
+      `Overpass API request failed: ${response.status} ${response.statusText}`,
+    );
+  }
+};
+
+const cachedFeatures: Map<number, GeoJSONFeature> = new Map();
+export const getOSMData = async (query: string, bbox: string) => {
+  const response = await fetch(OVERPASS_URL, {
+    method: "POST",
+    body: query.replace(/\${bbox}/g, bbox),
+    cache: "default",
+  });
+  checkIfFailedResponse(response);
+  const data: {
+    elements: OSMElement[];
+  } = await response.json();
+  const cache = data.elements.map((d) => cachedFeatures.get(d.id));
+  const nonCached = data.elements.filter((d, i) => !cache[i]);
+  const features = await getOSMDataAsGeoJson({
+    elements: nonCached,
+  });
+  console.log(data.elements, features);
+  return {
+    data,
+    features: [...cache.filter(isDefined), ...features],
+  };
+};
+
+const cachedElements: Map<number, OSMElement> = new Map();
+const fetchElements = async <T extends "node" | "way">(
+  type: T,
+  ids: number[],
+): Promise<Map<number, T extends "node" ? OSMNode : OSMWay>> => {
+  if (!ids.length) return new Map();
+  const limit = 10000;
+  let batchNodeIds: number[];
+  let step = 0;
+  const nonCachedIds = ids.filter((id) => !cachedElements.has(id));
+  let elements: any[] = ids
+    .map((id) => cachedElements.get(id))
+    .filter(isDefined);
+  do {
+    batchNodeIds = nonCachedIds.splice(0, limit);
+    step++;
+    if (!batchNodeIds.length) break;
+    const response = await fetch(OVERPASS_URL, {
+      method: "POST",
+      body: `[out:json];${type}(id:${batchNodeIds.join(",")});out ${limit};`,
+    });
+    checkIfFailedResponse(response);
+    const nodeBatch = await response.json().then((res) => res.elements);
+    elements = [...elements, ...nodeBatch];
+    nodeBatch.forEach((node: any) => {
+      cachedElements.set(node.id, node);
+    });
+  } while (batchNodeIds.length);
+
+  const map = new Map<number, any>();
+  elements.forEach((node: any) => {
+    map.set(node.id, node);
+  });
+  return map;
+};
+
+const wayToLineString = (
+  way: OSMWay,
+  nodes: Map<number, OSMNode>,
+): GeoJSONFeature["geometry"] => {
+  const coordinates: [number, number][] = way.nodes
+    .map((nodeId: number) => {
+      const node = nodes.get(nodeId);
+      return node ?
+          ([node.lon, node.lat] satisfies [number, number])
+        : undefined;
+    })
+    .filter(isDefined);
+
+  return {
+    type: "LineString",
+    coordinates,
+  };
+};
+
+export const getOSMDataAsGeoJson = async (responseData: {
+  elements: OSMElement[];
+}): Promise<GeoJSONFeature[]> => {
+  const unique = <T>(arr: T[]) => Array.from(new Set(arr));
+  const wayIds = unique(
+    responseData.elements
+      .flatMap((e) =>
+        e.type === "relation" ?
+          e.members
+            .flatMap((m) => (m.type === "way" ? m.ref : undefined))
+            .filter(isDefined)
+        : undefined,
+      )
+      .filter(isDefined),
+  );
+  const _nodeIds = unique(
+    responseData.elements.flatMap((e) => {
+      if (e.type === "node") return [e.id];
+      if (e.type === "way") return e.nodes;
+      // if(e.type === "relation") return e.members.map(member => member.ref);
+      return [];
+    }),
+  );
+  const ways = await fetchElements("way", wayIds);
+  const wayNodeIds = unique(
+    ways
+      .values()
+      //@ts-ignore
+      .toArray()
+      .flatMap((w) => w.nodes),
+  );
+  const nodeIds = unique([..._nodeIds, ...wayNodeIds]);
+  const nodes = await fetchElements("node", nodeIds);
+
+  const features: GeoJSONFeature[] = responseData.elements
+    .flatMap((element) => {
+      const commonProps: Pick<GeoJSONFeature, "id" | "properties" | "type"> = {
+        id: element.id,
+        type: "Feature",
+        properties: {
+          _is_from_osm: true,
+          ...element.tags,
+        },
+      };
+      if (element.type === "node") {
+        return {
+          ...commonProps,
+          geometry: {
+            type: "Point",
+            coordinates: [element.lon, element.lat],
+          },
+        } satisfies GeoJSONFeature;
+      } else if (element.type === "way") {
+        return {
+          ...commonProps,
+          geometry: wayToLineString(element, nodes),
+        } satisfies GeoJSONFeature;
+
+        /*
+      A relation can be a multipolygon or a route, node, etc.
+    */
+      } else if ((element as any).type === "relation") {
+        // return ways.values().toArray().map(way => ({
+        //   ...commonProps,
+        //   geometry: wayToLineString(way, nodes),
+        // }))
+
+        return osmRelationToGeoJSON(element, nodes, ways) ?? [];
+        // // Convert ways to GeoJSON coordinates
+        // const convertWayToCoordinates = (m: OSMRelationMemberWay) => {
+        //   const way = ways.find((el) => el.id === m.ref);
+        //   if(!way) {
+        //     console.warn(`Way with ID ${m.ref} not found`);
+        //     return undefined;
+        //   }
+        //   if(!way.nodes.length) {
+        //     console.warn(`Way with ID ${m.ref} has no nodes`);
+        //     return undefined;
+        //   }
+        //   const polygon: [number,number][] = way.nodes.map(nodeId => {
+        //     const node = nodes.find((el) => el.id === nodeId);
+        //     if(!node) return;
+        //     const point: [number,number] = [node.lon, node.lat];
+        //     return point;
+        //   }).filter(isDefined);
+
+        //   return polygon;
+        // };
+
+        // const outerWays = element.members.filter((m): m is OSMRelationMemberWay => m.type === "way" && m.role === "outer");
+        // const innerWays = element.members.filter((m): m is OSMRelationMemberWay => m.type === "way" && m.role === "inner");
+
+        // const coordinates: [number,number][][] = [];
+
+        // const outerPolygon: Polygon["coordinates"] = outerWays.map(ow => convertWayToCoordinates(ow)).filter(isDefined);
+        // // const innerPolygons
+        // return {
+        //   ...commonProps,
+        //   geometry: {
+        //     type: "Polygon",
+        //     coordinates: outerPolygon,
+        //   },
+        // } satisfies GeoJSONFeature;
+      }
+      return undefined;
+    })
+    .filter(isDefined);
+
+  return features;
+};