Merge pull request #1113 from datopian/changeset-release/main

Version Packages

.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "nrwl.angular-console",
-    "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner",
-    "dbaeumer.vscode-eslint"
-  ]
-}

README.md

@@ -1,31 +1,56 @@
 <h1 align="center">
-🌀 Portal.JS
-<br />
-Rapidly build rich data portals using a modern frontend framework
+  <a href="https://datahub.io/">
+    <img alt="datahub" src="http://datahub.io/datahub-cube.svg" width="146">
+  </a>
 </h1>
 
-* [What is Portal.JS ?](#What-is-Portal.JS)
-    * [Features](#Features)
-      * [For developers](#For-developers)
-* [Docs](#Docs)
-* [Community](#Community)
-* [Appendix](#Appendix)
-    * [What happened to Recline?](#What-happened-to-Recline?)
+<p align="center">
+  Bugs, issues and suggestions re DataHub Cloud ☁️ and DataHub OpenSource 🌀
+  <br />
+  <br /><a href="https://discord.gg/xfFDMPU9dC"><img src="https://dcbadge.vercel.app/api/server/xfFDMPU9dC" /></a>
+</p>
 
-# What is Portal.JS
+## DataHub
 
-🌀 Portal.JS is a framework for rapidly building rich data portal frontends using a modern frontend approach. Portal.JS can be used to present a single dataset or build a full-scale data catalog/portal.
+This repo and issue tracker are for 
 
-Built in JavaScript and React on top of the popular [Next.js](https://nextjs.com/) framework. Portal.JS assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for [CKAN](https://ckan.org/).
+- DataHub Cloud ☁️ - https://datahub.io/
+- DataHub 🌀 - https://datahub.io/opensource
 
-## Features
+### Issues
+
+Found a bug: 👉 https://github.com/datopian/datahub/issues/new
+
+### Discussions
+
+Got a suggestion, a question, want some support or just want to shoot the breeze 🙂
+
+Head to the discussion forum: 👉 https://github.com/datopian/datahub/discussions
+
+### Chat on Discord
+
+If you would prefer to get help via live chat check out our discord 👉
+
+[Discord](https://discord.gg/xfFDMPU9dC)
+
+### Docs
+
+https://datahub.io/docs
+
+## DataHub OpenSource 🌀
+
+DataHub 🌀 is a platform for rapidly creating rich data portal and publishing systems using a modern frontend approach. Datahub can be used to publish a single dataset or build a full-scale data catalog/portal.
+
+DataHub is built in JavaScript and React on top of the popular [Next.js](https://nextjs.com/) framework. DataHub assumes a "decoupled" approach where the frontend is a separate service from the backend and interacts with backend(s) via an API. It can be used with any backend and has out of the box support for [CKAN](https://ckan.org/), GitHub, Frictionless Data Packages and more.
+
+### Features
 
 - 🗺️ Unified sites: present data and content in one seamless site, pulling datasets from a DMS (e.g. CKAN) and content from a CMS (e.g. Wordpress) with a common internal API.
 - 👩‍💻 Developer friendly: built with familiar frontend tech (JavaScript, React, Next.js).
 - 🔋 Batteries included: full set of portal components out of the box e.g. catalog search, dataset showcase, blog, etc.
 - 🎨 Easy to theme and customize: installable themes, use standard CSS and React+CSS tooling. Add new routes quickly.
 - 🧱 Extensible: quickly extend and develop/import your own React components
-- 📝 Well documented: full set of documentation plus the documentation of Next.js and Apollo.
+- 📝 Well documented: full set of documentation plus the documentation of Next.js.
 
 ### For developers
 
@@ -33,25 +58,3 @@ Built in JavaScript and React on top of the popular [Next.js](https://nextjs.com
 - 🚀 Next.js framework: so everything in Next.js for free: Server Side Rendering, Static Site Generation, huge number of examples and integrations, etc.
   - Server Side Rendering (SSR) => Unlimited number of pages, SEO and more whilst still using React.
   - Static Site Generation (SSG) => Ultra-simple deployment, great performance, great lighthouse scores and more (good for small sites)
-
-#### **Check out the [Portal.JS website](https://portaljs.org/) for a gallery of live portals**
-
-___
-
-# Docs
-
-Access the Portal.JS documentation at:
-
-https://portaljs.org/docs
-
-- [Examples](https://portaljs.org/docs#examples)
-
-# Community
-
-If you have questions about anything related to Portal.JS, you're always welcome to ask our community on [GitHub Discussions](https://github.com/datopian/portal.js/discussions) or on our [Discord server](https://discord.gg/EeyfGrGu4U).
-
-# Appendix
-
-## What happened to Recline?
-
-Portal.JS used to be Recline(JS). If you are looking for the old Recline codebase it still exists:  see the [`recline` branch](https://github.com/datopian/portal.js/tree/recline). If you want context for the rename see [this issue](https://github.com/datopian/portal.js/issues/520).

examples/fivethirtyeight/README.md

@@ -1,3 +1,9 @@
+# PortalJS Demo replicating the FiveThirtyEight data portal
+
+## 👉 https://fivethirtyeight.portaljs.org 👈
+
+Here's a blog post we wrote about it: https://www.datopian.com/blog/fivethirtyeight-replica
+
 This is a replica of the awesome data.fivethirtyeight.com using PortalJS.
 
 You might be asking why we did that, there are three main reasons:

packages/components/CHANGELOG.md

@@ -1,5 +1,85 @@
 # @portaljs/components
 
+## 1.0.0
+
+### Major Changes
+
+- [#1103](https://github.com/datopian/datahub/pull/1103) [`48cd812a`](https://github.com/datopian/datahub/commit/48cd812a488a069a419d8ecc67f24f94d4d1d1d6) Thanks [@demenech](https://github.com/demenech)! - Components API tidying up and storybook docs improvements.
+
+## 0.6.0
+
+### Minor Changes
+
+- [`a044f56e`](https://github.com/datopian/portaljs/commit/a044f56e3cbe0519ddf9d24d78b0bb7eac917e1c) Thanks [@luccasmmg](https://github.com/luccasmmg)! - Added plotly components
+
+## 0.5.10
+
+### Patch Changes
+
+- [#1083](https://github.com/datopian/portaljs/pull/1083) [`86a2945e`](https://github.com/datopian/portaljs/commit/86a2945ee68dfcea0299984ca9cc9070d68fe1c2) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created integration with datastore api for table component
+
+## 0.5.9
+
+### Patch Changes
+
+- [#1081](https://github.com/datopian/portaljs/pull/1081) [`2bbf3134`](https://github.com/datopian/portaljs/commit/2bbf3134896df3ecc66560bdf95bece143614c7b) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Fixed error to remove anchor from document
+
+## 0.5.8
+
+### Patch Changes
+
+- [#1079](https://github.com/datopian/portaljs/pull/1079) [`058d2367`](https://github.com/datopian/portaljs/commit/058d23678a024890f8a6d909ded9fc8fc11cf145) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Changed the download behaviour of the bucket viewer component and removed loading component while downloading
+
+## 0.5.7
+
+### Patch Changes
+
+- [#1077](https://github.com/datopian/portaljs/pull/1077) [`6d7acd27`](https://github.com/datopian/portaljs/commit/6d7acd27ed9299cbcc14eab906f2f0eb414656b8) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created property to present a component while is loading the download of the file and fixed download bug on pagination
+
+## 0.5.6
+
+### Patch Changes
+
+- [#1075](https://github.com/datopian/portaljs/pull/1075) [`26dcffc2`](https://github.com/datopian/portaljs/commit/26dcffc279057f80a579134e862085ba042c06c3) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Fixed problem presenting the download component in the first load of the bucket viewer
+
+## 0.5.5
+
+### Patch Changes
+
+- [#1073](https://github.com/datopian/portaljs/pull/1073) [`cf24042a`](https://github.com/datopian/portaljs/commit/cf24042a910567e98eeb75ade42ce0149bdb62d1) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Fixed filter by startDate error
+
+## 0.5.4
+
+### Patch Changes
+
+- [#1071](https://github.com/datopian/portaljs/pull/1071) [`27c99add`](https://github.com/datopian/portaljs/commit/27c99adde8fa36ad2c2e03f227f93aa62454eefa) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Added pagination and filter properties for the BucketViewer component
+
+## 0.5.3
+
+### Patch Changes
+
+- [#1066](https://github.com/datopian/portaljs/pull/1066) [`dd03a493`](https://github.com/datopian/portaljs/commit/dd03a493beca5459d1ef447b2df505609fc64e95) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created Iframe component
+
+## 0.5.2
+
+### Patch Changes
+
+- [#1063](https://github.com/datopian/portaljs/pull/1063) [`b13e3ade`](https://github.com/datopian/portaljs/commit/b13e3ade3ccefe7dffe84f824bdedd3e512ce499) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created auto zoom configuration for the map component
+
+## 0.5.1
+
+### Patch Changes
+
+- [#1061](https://github.com/datopian/portaljs/pull/1061) [`4ddfc112`](https://github.com/datopian/portaljs/commit/4ddfc1126a3f0b8137ea47a08a36c56b7373b8f6) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created the style property in the Map component
+
+## 0.5.0
+
+### Minor Changes
+
+- [#1055](https://github.com/datopian/portaljs/pull/1055) [`712f4a3b`](https://github.com/datopian/portaljs/commit/712f4a3b0f074e654879bb75059f51e06b422b32) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Creation of BucketViewer component to show the data of public buckets
+
+- [#1057](https://github.com/datopian/portaljs/pull/1057) [`61c750b7`](https://github.com/datopian/portaljs/commit/61c750b7e11fe52bf04d25f192440ee1bb307404) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Exporting BucketViewer to be accessed out of the folder
+
 ## 0.4.0
 
 ### Minor Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [
@@ -29,6 +29,8 @@
     "@githubocto/flat-ui": "^0.14.1",
     "@heroicons/react": "^2.0.17",
     "@planet/maps": "^8.1.0",
+    "@react-pdf-viewer/core": "3.6.0",
+    "@react-pdf-viewer/default-layout": "3.6.0",
     "@tanstack/react-table": "^8.8.5",
     "ag-grid-react": "^30.0.4",
     "chroma-js": "^2.4.2",
@@ -37,19 +39,19 @@
     "next-mdx-remote": "^4.4.1",
     "ol": "^7.4.0",
     "papaparse": "^5.4.1",
+    "pdfjs-dist": "2.15.349",
+    "plotly.js": "^2.30.1",
     "postcss-url": "^10.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "react-leaflet": "^4.2.1",
+    "react-plotly.js": "^2.6.0",
     "react-query": "^3.39.3",
     "react-vega": "^7.6.0",
     "vega": "5.25.0",
     "vega-lite": "5.1.0",
     "vitest": "^0.31.4",
-    "@react-pdf-viewer/core": "3.6.0",
-    "@react-pdf-viewer/default-layout": "3.6.0",
-    "pdfjs-dist": "2.15.349",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

packages/components/src/components/BucketViewer.tsx

@@ -0,0 +1,222 @@
+import { CSSProperties, ReactNode, useEffect, useState } from 'react';
+import LoadingSpinner from './LoadingSpinner';
+
+export interface BucketViewerFilterSearchedDataEvent {
+  startDate?: Date;
+  endDate?: Date;
+}
+
+export interface BucketViewerProps {
+  onLoadTotalNumberOfItems?: (total: number) => void;
+  domain: string;
+  downloadConfig?: {
+    hoverOfTheFileComponent?: ReactNode;
+  };
+  suffix?: string;
+  className?: string;
+  paginationConfig?: BucketViewerPaginationConfig;
+  filterState?: BucketViewerFilterSearchedDataEvent;
+  dataMapperFn: (rawData: Response) => Promise<BucketViewerData[]>;
+}
+
+export interface BucketViewerPaginationConfig {
+  containerClassName?: string;
+  containerStyles?: CSSProperties;
+  itemsPerPage: number;
+}
+
+export interface BucketViewerData {
+  fileName: string;
+  downloadFileUri: string;
+  dateProps?: {
+    date: Date;
+    dateFormatter?: (date: Date) => string;
+  };
+}
+
+export function BucketViewer({
+  domain,
+  suffix,
+  dataMapperFn,
+  className,
+  filterState,
+  paginationConfig,
+  downloadConfig,
+  onLoadTotalNumberOfItems,
+}: BucketViewerProps) {
+  suffix = suffix ?? '/';
+
+  const { hoverOfTheFileComponent } = downloadConfig ?? {};
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showDownloadComponentOnLine, setShowDownloadComponentOnLine] =
+    useState(-1);
+  const [currentPage, setCurrentPage] = useState<number>(0);
+  const [lastPage, setLastPage] = useState<number>(0);
+  const [bucketFiles, setBucketFiles] = useState<BucketViewerData[]>([]);
+  const [paginatedData, setPaginatedData] = useState<BucketViewerData[]>([]);
+  const [filteredData, setFilteredData] = useState<BucketViewerData[]>([]);
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetch(`${domain}${suffix}`)
+      .then((res) => dataMapperFn(res))
+      .then((data) => {
+        setBucketFiles(data);
+        setFilteredData(data);
+      })
+      .finally(() => setIsLoading(false));
+  }, [domain, suffix]);
+
+  useEffect(() => {
+    if (paginationConfig) {
+      const startIndex = paginationConfig
+        ? currentPage * paginationConfig.itemsPerPage
+        : 0;
+
+      const endIndex = paginationConfig
+        ? startIndex + paginationConfig.itemsPerPage
+        : 0;
+
+      setLastPage(
+        Math.ceil(filteredData.length / paginationConfig.itemsPerPage) - 1
+      );
+      setPaginatedData(filteredData.slice(startIndex, endIndex));
+    }
+  }, [currentPage, filteredData]);
+
+  useEffect(() => {
+    if (onLoadTotalNumberOfItems) onLoadTotalNumberOfItems(filteredData.length);
+  }, [filteredData]);
+
+  useEffect(() => {
+    if (!filterState) return;
+
+    if (filterState.startDate && filterState.endDate) {
+      setFilteredData(
+        bucketFiles.filter(({ dateProps }) =>
+          dateProps
+            ? dateProps.date.getTime() >= filterState.startDate.getTime() &&
+              dateProps.date.getTime() <= filterState.endDate.getTime()
+            : true
+        )
+      );
+    } else if (filterState.startDate) {
+      setFilteredData(
+        bucketFiles.filter(({ dateProps }) =>
+          dateProps
+            ? dateProps.date.getTime() >= filterState.startDate.getTime()
+            : true
+        )
+      );
+    } else if (filterState.endDate) {
+      setFilteredData(
+        bucketFiles.filter(({ dateProps }) =>
+          dateProps
+            ? dateProps.date.getTime() <= filterState.endDate.getTime()
+            : true
+        )
+      );
+    } else {
+      setFilteredData(bucketFiles);
+    }
+  }, [filterState]);
+
+  return isLoading ? (
+    <div className="w-full flex items-center justify-center h-[300px]">
+      <LoadingSpinner />
+    </div>
+  ) : bucketFiles ? (
+    <>
+      {...(paginationConfig && bucketFiles ? paginatedData : filteredData)?.map(
+        (data, i) => (
+          <ul
+            onClick={() => {
+              const a: HTMLAnchorElement = document.createElement('a');
+              a.href = data.downloadFileUri;
+              a.target = `_blank`;
+              a.download = data.fileName;
+              document.body.appendChild(a);
+              a.click();
+              document.body.removeChild(a);
+            }}
+            key={i}
+            onMouseEnter={() => setShowDownloadComponentOnLine(i)}
+            onMouseLeave={() => setShowDownloadComponentOnLine(undefined)}
+            className={`${
+              className ??
+              'mb-2 border-b-[2px] border-b-[red] hover:cursor-pointer'
+            }`}
+          >
+            {hoverOfTheFileComponent && showDownloadComponentOnLine === i ? (
+              hoverOfTheFileComponent
+            ) : (
+              <></>
+            )}
+            <div className="flex justify-between w-full items-center">
+              <div>
+                <li>{data.fileName}</li>
+                {data.dateProps && data.dateProps.dateFormatter ? (
+                  <li>{data.dateProps.dateFormatter(data.dateProps.date)}</li>
+                ) : (
+                  <></>
+                )}
+              </div>
+            </div>
+          </ul>
+        )
+      )}
+      {paginationConfig ? (
+        <ul
+          className={
+            paginationConfig.containerClassName
+              ? paginationConfig.containerClassName
+              : 'flex justify-end gap-x-[0.5rem] w-full'
+          }
+          style={paginationConfig.containerStyles ?? {}}
+        >
+          <li>
+            <button
+              className="hover:cursor-pointer hover:disabled:cursor-not-allowed"
+              disabled={currentPage === 0}
+              onClick={() => setCurrentPage(0)}
+            >
+              First
+            </button>
+          </li>
+          <li>
+            <button
+              className="hover:cursor-pointer hover:disabled:cursor-not-allowed"
+              onClick={() => setCurrentPage(currentPage - 1)}
+              disabled={currentPage === 0}
+            >
+              Previous
+            </button>
+          </li>
+          <label>{currentPage + 1}</label>
+
+          <li>
+            <button
+              onClick={() => setCurrentPage(currentPage + 1)}
+              disabled={currentPage >= lastPage}
+              className="hover:cursor-pointer hover:disabled:cursor-not-allowed"
+            >
+              Next
+            </button>
+          </li>
+
+          <li>
+            <button
+              onClick={() => setCurrentPage(lastPage)}
+              disabled={currentPage >= lastPage}
+              className="hover:cursor-pointer hover:disabled:cursor-not-allowed"
+            >
+              Last
+            </button>
+          </li>
+        </ul>
+      ) : (
+        <></>
+      )}
+    </>
+  ) : null;
+}

packages/components/src/components/Catalog.tsx

@@ -7,7 +7,12 @@ export function Catalog({
   datasets,
   facets,
 }: {
-  datasets: any[];
+  datasets: {
+    _id: string | number;
+    metadata: { title: string; [k: string]: string | number };
+    url_path: string;
+    [k: string]: any;
+  }[];
   facets: string[];
 }) {
   const [indexFilter, setIndexFilter] = useState('');
@@ -56,7 +61,7 @@ export function Catalog({
     //Then check if the selectedValue for the given facet is included in the dataset metadata
     .filter((dataset) => {
       //Avoids a server rendering breakage
-      if (!watch() || Object.keys(watch()).length === 0) return true
+      if (!watch() || Object.keys(watch()).length === 0) return true;
       //This will filter only the key pairs of the metadata values that were selected as facets
       const datasetFacets = Object.entries(dataset.metadata).filter((entry) =>
         facets.includes(entry[0])
@@ -86,9 +91,7 @@ export function Catalog({
           className="p-2 ml-1 text-sm shadow border border-block"
           {...register(elem[0] + '.selectedValue')}
         >
-          <option value="">
-            Filter by {elem[0]}
-          </option>
+          <option value="">Filter by {elem[0]}</option>
           {(elem[1] as { possibleValues: string[] }).possibleValues.map(
             (val) => (
               <option
@@ -102,10 +105,10 @@ export function Catalog({
           )}
         </select>
       ))}
-      <ul className='mb-5 pl-6 mt-5 list-disc'>
+      <ul className="mb-5 pl-6 mt-5 list-disc">
         {filteredDatasets.map((dataset) => (
-          <li className='py-2' key={dataset._id}>
-            <a className='font-medium underline' href={dataset.url_path}>
+          <li className="py-2" key={dataset._id}>
+            <a className="font-medium underline" href={dataset.url_path}>
               {dataset.metadata.title
                 ? dataset.metadata.title
                 : dataset.url_path}
@@ -116,4 +119,3 @@ export function Catalog({
     </>
   );
 }
-

packages/components/src/components/Excel.tsx

@@ -4,12 +4,14 @@ import { read, utils } from 'xlsx';
 import { AgGridReact } from 'ag-grid-react';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { Data } from '../types/properties';
 
 export type ExcelProps = {
-  url: string;
+  data: Required<Pick<Data, 'url'>>;
 };
 
-export function Excel({ url }: ExcelProps) {
+export function Excel({ data }: ExcelProps) {
+  const url = data.url;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [activeSheetName, setActiveSheetName] = useState<string>();
   const [workbook, setWorkbook] = useState<any>();

packages/components/src/components/FlatUiTable.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import Papa from 'papaparse';
 import { Grid } from '@githubocto/flat-ui';
 import LoadingSpinner from './LoadingSpinner';
+import { Data } from '../types/properties';
 
 const queryClient = new QueryClient();
 
@@ -36,30 +37,25 @@ export async function parseCsv(file: string, parsingConfig): Promise<any> {
 }
 
 export interface FlatUiTableProps {
-  url?: string;
-  data?: { [key: string]: number | string }[];
-  rawCsv?: string;
-  randomId?: number;
+  data: Data;
+  uniqueId?: number;
   bytes: number;
   parsingConfig: any;
 }
 export const FlatUiTable: React.FC<FlatUiTableProps> = ({
-  url,
   data,
-  rawCsv,
+  uniqueId,
   bytes = 5132288,
   parsingConfig = {},
 }) => {
-  const randomId = Math.random();
+  uniqueId = uniqueId ?? Math.random();
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <TableInner
         bytes={bytes}
-        url={url}
         data={data}
-        rawCsv={rawCsv}
-        randomId={randomId}
+        uniqueId={uniqueId}
         parsingConfig={parsingConfig}
       />
     </QueryClientProvider>
@@ -67,33 +63,32 @@ export const FlatUiTable: React.FC<FlatUiTableProps> = ({
 };
 
 const TableInner: React.FC<FlatUiTableProps> = ({
-  url,
   data,
-  rawCsv,
-  randomId,
+  uniqueId,
   bytes,
   parsingConfig,
 }) => {
-  if (data) {
+  const url = data.url;
+  const csv = data.csv;
+  const values = data.values;
+
+  if (values) {
     return (
       <div className="w-full" style={{ height: '500px' }}>
-        <Grid data={data} />
+        <Grid data={values} />
       </div>
     );
   }
   const { data: csvString, isLoading: isDownloadingCSV } = useQuery(
-    ['dataCsv', url, randomId],
+    ['dataCsv', url, uniqueId],
     () => getCsv(url as string, bytes),
     { enabled: !!url }
   );
   const { data: parsedData, isLoading: isParsing } = useQuery(
-    ['dataPreview', csvString, randomId],
+    ['dataPreview', csvString, uniqueId],
     () =>
-      parseCsv(
-        rawCsv ? (rawCsv as string) : (csvString as string),
-        parsingConfig
-      ),
-    { enabled: rawCsv ? true : !!csvString }
+      parseCsv(csv ? (csv as string) : (csvString as string), parsingConfig),
+    { enabled: csv ? true : !!csvString }
   );
   if (isParsing || isDownloadingCSV)
     <div className="w-full flex justify-center items-center h-[500px]">

packages/components/src/components/Iframe.tsx

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { Data } from '../types/properties';
+
+export interface IframeProps {
+  data: Required<Pick<Data, 'url'>>;
+  style?: CSSProperties;
+}
+
+export function Iframe({ data, style }: IframeProps) {
+  const url = data.url;
+  return (
+    <iframe
+      src={url}
+      style={style ?? { width: `100%`, height: `100%` }}
+    ></iframe>
+  );
+}

packages/components/src/components/LineChart.tsx

@@ -2,31 +2,33 @@ import { useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
 import { VegaLite } from './VegaLite';
 import loadData from '../lib/loadData';
+import { Data } from '../types/properties';
 
 type AxisType = 'quantitative' | 'temporal';
 type TimeUnit = 'year' | undefined; // or ...
 
 export type LineChartProps = {
-  data: Array<Array<string | number>> | string | { x: string; y: number }[];
+  data: Omit<Data, 'csv'>;
   title?: string;
-  xAxis?: string;
+  xAxis: string;
   xAxisType?: AxisType;
-  xAxisTimeUnit: TimeUnit;
-  yAxis?: string;
+  xAxisTimeUnit?: TimeUnit;
+  yAxis: string;
   yAxisType?: AxisType;
   fullWidth?: boolean;
 };
 
 export function LineChart({
-  data = [],
-  fullWidth = false,
+  data,
   title = '',
-  xAxis = 'x',
+  xAxis,
   xAxisType = 'temporal',
   xAxisTimeUnit = 'year', //  TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
-  yAxis = 'y',
+  yAxis,
   yAxisType = 'quantitative',
 }: LineChartProps) {
+  const url = data.url;
+  const values = data.values;
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   //  By default, assumes data is an Array...
@@ -64,13 +66,12 @@ export function LineChart({
   } as any;
 
   useEffect(() => {
-    //  If data is string, assume it's a URL
-    if (typeof data === 'string') {
+    if (url) {
       setIsLoading(true);
 
       //  Manualy loading the data allows us to do other kinds
       //  of stuff later e.g. load a file partially
-      loadData(data).then((res: any) => {
+      loadData(url).then((res: any) => {
         setSpecData({ values: res, format: { type: 'csv' } });
         setIsLoading(false);
       });
@@ -78,12 +79,8 @@ export function LineChart({
   }, []);
 
   var vegaData = {};
-  if (Array.isArray(data)) {
-    var dataObj;
-    dataObj = data.map((r) => {
-      return { x: r[0], y: r[1] };
-    });
-    vegaData = { table: dataObj };
+  if (values) {
+    vegaData = { table: values };
   }
 
   return isLoading ? (
@@ -91,6 +88,6 @@ export function LineChart({
       <LoadingSpinner />
     </div>
   ) : (
-    <VegaLite fullWidth={fullWidth} data={vegaData} spec={spec} />
+    <VegaLite data={vegaData} spec={spec} />
   );
 }

packages/components/src/components/Map.tsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
 import loadData from '../lib/loadData';
 import chroma from 'chroma-js';
+import { GeospatialData } from '../types/properties';
 import {
   MapContainer,
   TileLayer,
@@ -14,7 +15,7 @@ import * as L from 'leaflet';
 
 export type MapProps = {
   layers: {
-    data: string | GeoJSON.GeoJSON;
+    data: GeospatialData;
     name: string;
     colorScale?: {
       starting: string;
@@ -25,11 +26,14 @@ export type MapProps = {
           propNames: string[];
         }
       | boolean;
-    _id?: number;
   }[];
   title?: string;
   center?: { latitude: number | undefined; longitude: number | undefined };
   zoom?: number;
+  style?: CSSProperties;
+  autoZoomConfiguration?: {
+    layerName: string;
+  };
 };
 
 export function Map({
@@ -44,23 +48,27 @@ export function Map({
   center = { latitude: 45, longitude: 45 },
   zoom = 2,
   title = '',
+  style = {},
+  autoZoomConfiguration = undefined,
 }: MapProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [layersData, setLayersData] = useState<any>([]);
 
   useEffect(() => {
     const loadDataPromises = layers.map(async (layer) => {
+      const url = layer.data.url;
+      const geojson = layer.data.geojson;
       let layerData: any;
 
-      if (typeof layer.data === 'string') {
+      if (url) {
         //  If "data" is string, assume it's a URL
         setIsLoading(true);
-        layerData = await loadData(layer.data).then((res: any) => {
+        layerData = await loadData(url).then((res: any) => {
           return JSON.parse(res);
         });
       } else {
         //  Else, expect raw GeoJSON
-        layerData = layer.data;
+        layerData = geojson;
       }
 
       if (layer.colorScale) {
@@ -96,6 +104,7 @@ export function Map({
       zoom={zoom}
       scrollWheelZoom={false}
       className="h-80 w-full"
+      style={style ?? {}}
       // @ts-ignore
       whenReady={(map: any) => {
         //  Enable zoom using scroll wheel
@@ -115,6 +124,24 @@ export function Map({
         };
 
         if (title) info.addTo(map.target);
+        if (!autoZoomConfiguration) return;
+
+        let layerToZoomBounds = L.latLngBounds(L.latLng(0, 0), L.latLng(0, 0));
+
+        layers.forEach((layer) => {
+          if (layer.name === autoZoomConfiguration.layerName) {
+            const data = layersData.find(
+              (layerData) => layerData.name === layer.name
+            )?.data;
+
+            if (data) {
+              layerToZoomBounds = L.geoJSON(data).getBounds();
+              return;
+            }
+          }
+        });
+
+        map.target.fitBounds(layerToZoomBounds);
       }}
     >
       <TileLayer

packages/components/src/components/PdfViewer.tsx

@@ -1,22 +1,24 @@
 // Core viewer
 import { Viewer, Worker, SpecialZoomLevel } from '@react-pdf-viewer/core';
 import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+import { Data } from '../types/properties';
 
 // Import styles
 import '@react-pdf-viewer/core/lib/styles/index.css';
 import '@react-pdf-viewer/default-layout/lib/styles/index.css';
 
 export interface PdfViewerProps {
-  url: string;
+  data: Required<Pick<Data, 'url'>>;
   layout: boolean;
   parentClassName?: string;
 }
 
 export function PdfViewer({
-  url,
+  data,
   layout = false,
-  parentClassName,
+  parentClassName = 'h-screen',
 }: PdfViewerProps) {
+  const url = data.url;
   const defaultLayoutPluginInstance = defaultLayoutPlugin();
   return (
     <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">

packages/components/src/components/Plotly.tsx

@@ -0,0 +1,9 @@
+import Plot, { PlotParams } from "react-plotly.js";
+
+export const Plotly: React.FC<PlotParams> = (props) => {
+  return (
+    <div>
+      <Plot {...props} />
+    </div>
+  );
+};

packages/components/src/components/PlotlyBarChart.tsx

@@ -0,0 +1,153 @@
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
+import { Plotly } from './Plotly';
+import Papa, { ParseConfig } from 'papaparse';
+import LoadingSpinner from './LoadingSpinner';
+import { Data } from '../types/properties';
+
+const queryClient = new QueryClient();
+
+async function getCsv(url: string, bytes: number) {
+  const response = await fetch(url, {
+    headers: {
+      Range: `bytes=0-${bytes}`,
+    },
+  });
+  const data = await response.text();
+  return data;
+}
+
+async function parseCsv(
+  file: string,
+  parsingConfig: ParseConfig
+): Promise<any> {
+  return new Promise((resolve, reject) => {
+    Papa.parse(file, {
+      ...parsingConfig,
+      header: true,
+      dynamicTyping: true,
+      skipEmptyLines: true,
+      transform: (value: string): string => {
+        return value.trim();
+      },
+      complete: (results: any) => {
+        return resolve(results);
+      },
+      error: (error: any) => {
+        return reject(error);
+      },
+    });
+  });
+}
+
+export interface PlotlyBarChartProps {
+  data: Data;
+  uniqueId?: number;
+  bytes?: number;
+  parsingConfig?: ParseConfig;
+  xAxis: string;
+  yAxis: string;
+  // TODO: commented out because this doesn't work. I believe
+  // this would only make any difference on charts with multiple
+  // traces.
+  // lineLabel?: string;
+  title?: string;
+}
+
+export const PlotlyBarChart: React.FC<PlotlyBarChartProps> = ({
+  data,
+  bytes = 5132288,
+  parsingConfig = {},
+  xAxis,
+  yAxis,
+  // lineLabel,
+  title = '',
+}) => {
+  const uniqueId = Math.random();
+  return (
+    // Provide the client to your App
+    <QueryClientProvider client={queryClient}>
+      <PlotlyBarChartInner
+        data={data}
+        uniqueId={uniqueId}
+        bytes={bytes}
+        parsingConfig={parsingConfig}
+        xAxis={xAxis}
+        yAxis={yAxis}
+        // lineLabel={lineLabel ?? yAxis}
+        title={title}
+      />
+    </QueryClientProvider>
+  );
+};
+
+const PlotlyBarChartInner: React.FC<PlotlyBarChartProps> = ({
+  data,
+  uniqueId,
+  bytes,
+  parsingConfig,
+  xAxis,
+  yAxis,
+  // lineLabel,
+  title,
+}) => {
+  if (data.values) {
+    return (
+      <div className="w-full" style={{ height: '500px' }}>
+        <Plotly
+          layout={{
+            title,
+          }}
+          data={[
+            {
+              x: data.values.map((d) => d[xAxis]),
+              y: data.values.map((d) => d[yAxis]),
+              type: 'bar',
+              // name: lineLabel,
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+  const { data: csvString, isLoading: isDownloadingCSV } = useQuery(
+    ['dataCsv', data.url, uniqueId],
+    () => getCsv(data.url as string, bytes ?? 5132288),
+    { enabled: !!data.url }
+  );
+  const { data: parsedData, isLoading: isParsing } = useQuery(
+    ['dataPreview', csvString, uniqueId],
+    () =>
+      parseCsv(
+        data.csv ? (data.csv as string) : (csvString as string),
+        parsingConfig ?? {}
+      ),
+    { enabled: data.csv ? true : !!csvString }
+  );
+  if (isParsing || isDownloadingCSV)
+    <div className="w-full flex justify-center items-center h-[500px]">
+      <LoadingSpinner />
+    </div>;
+  if (parsedData)
+    return (
+      <div className="w-full" style={{ height: '500px' }}>
+        <Plotly
+          layout={{
+            title,
+          }}
+          data={[
+            {
+              x: parsedData.data.map((d: any) => d[xAxis]),
+              y: parsedData.data.map((d: any) => d[yAxis]),
+              type: 'bar',
+              // name: lineLabel, TODO: commented out because this doesn't work
+            },
+          ]}
+        />
+      </div>
+    );
+  return (
+    <div className="w-full flex justify-center items-center h-[500px]">
+      <LoadingSpinner />
+    </div>
+  );
+};

packages/components/src/components/PlotlyLineChart.tsx

@@ -0,0 +1,155 @@
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
+import { Plotly } from './Plotly';
+import Papa, { ParseConfig } from 'papaparse';
+import LoadingSpinner from './LoadingSpinner';
+import { Data } from '../types/properties';
+
+const queryClient = new QueryClient();
+
+async function getCsv(url: string, bytes: number) {
+  const response = await fetch(url, {
+    headers: {
+      Range: `bytes=0-${bytes}`,
+    },
+  });
+  const data = await response.text();
+  return data;
+}
+
+async function parseCsv(
+  file: string,
+  parsingConfig: ParseConfig
+): Promise<any> {
+  return new Promise((resolve, reject) => {
+    Papa.parse(file, {
+      ...parsingConfig,
+      header: true,
+      dynamicTyping: true,
+      skipEmptyLines: true,
+      transform: (value: string): string => {
+        return value.trim();
+      },
+      complete: (results: any) => {
+        return resolve(results);
+      },
+      error: (error: any) => {
+        return reject(error);
+      },
+    });
+  });
+}
+
+export interface PlotlyLineChartProps {
+  data: Data;
+  bytes?: number;
+  parsingConfig?: ParseConfig;
+  xAxis: string;
+  yAxis: string;
+  lineLabel?: string;
+  title?: string;
+  uniqueId?: number;
+}
+
+export const PlotlyLineChart: React.FC<PlotlyLineChartProps> = ({
+  data,
+  bytes = 5132288,
+  parsingConfig = {},
+  xAxis,
+  yAxis,
+  lineLabel,
+  title = '',
+  uniqueId,
+}) => {
+  uniqueId = uniqueId ?? Math.random();
+  return (
+    // Provide the client to your App
+    <QueryClientProvider client={queryClient}>
+      <LineChartInner
+        data={data}
+        uniqueId={uniqueId}
+        bytes={bytes}
+        parsingConfig={parsingConfig}
+        xAxis={xAxis}
+        yAxis={yAxis}
+        lineLabel={lineLabel ?? yAxis}
+        title={title}
+      />
+    </QueryClientProvider>
+  );
+};
+
+const LineChartInner: React.FC<PlotlyLineChartProps> = ({
+  data,
+  uniqueId,
+  bytes,
+  parsingConfig,
+  xAxis,
+  yAxis,
+  lineLabel,
+  title,
+}) => {
+  const values = data.values;
+  const url = data.url;
+  const csv = data.csv;
+
+  if (values) {
+    return (
+      <div className="w-full" style={{ height: '500px' }}>
+        <Plotly
+          layout={{
+            title,
+          }}
+          data={[
+            {
+              x: values.map((d) => d[xAxis]),
+              y: values.map((d) => d[yAxis]),
+              mode: 'lines',
+              name: lineLabel,
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+  const { data: csvString, isLoading: isDownloadingCSV } = useQuery(
+    ['dataCsv', url, uniqueId],
+    () => getCsv(url as string, bytes ?? 5132288),
+    { enabled: !!url }
+  );
+  const { data: parsedData, isLoading: isParsing } = useQuery(
+    ['dataPreview', csvString, uniqueId],
+    () =>
+      parseCsv(
+        csv ? (csv as string) : (csvString as string),
+        parsingConfig ?? {}
+      ),
+    { enabled: csv ? true : !!csvString }
+  );
+  if (isParsing || isDownloadingCSV)
+    <div className="w-full flex justify-center items-center h-[500px]">
+      <LoadingSpinner />
+    </div>;
+  if (parsedData)
+    return (
+      <div className="w-full" style={{ height: '500px' }}>
+        <Plotly
+          layout={{
+            title,
+          }}
+          data={[
+            {
+              x: parsedData.data.map((d: any) => d[xAxis]),
+              y: parsedData.data.map((d: any) => d[yAxis]),
+              mode: 'lines',
+              name: lineLabel,
+            },
+          ]}
+        />
+      </div>
+    );
+  return (
+    <div className="w-full flex justify-center items-center h-[500px]">
+      <LoadingSpinner />
+    </div>
+  );
+};

packages/components/src/components/Table.tsx

@@ -6,6 +6,8 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  Table as ReactTable,
   useReactTable,
 } from '@tanstack/react-table';
 
@@ -25,12 +27,19 @@ import DebouncedInput from './DebouncedInput';
 import loadData from '../lib/loadData';
 import LoadingSpinner from './LoadingSpinner';
 
+export type TableData = { cols: {key: string, name: string}[]; data: any[]; total: number };
+
 export type TableProps = {
   data?: Array<{ [key: string]: number | string }>;
   cols?: Array<{ [key: string]: string }>;
   csv?: string;
   url?: string;
   fullWidth?: boolean;
+  datastoreConfig?: {
+    dataStoreURI: string;
+    rowsPerPage?: number;
+    dataMapperFn: (data) => Promise<TableData> | TableData;
+  };
 };
 
 export const Table = ({
@@ -39,8 +48,28 @@ export const Table = ({
   csv = '',
   url = '',
   fullWidth = false,
+  datastoreConfig,
 }: TableProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [pageMap, setPageMap] = useState(new Map<number, boolean>());
+  const {
+    dataMapperFn,
+    dataStoreURI,
+    rowsPerPage = 10,
+  } = datastoreConfig ?? {};
+
+  const [globalFilter, setGlobalFilter] = useState('');
+  const [isLoadingPage, setIsLoadingPage] = useState<boolean>(false);
+  const [totalOfRows, setTotalOfRows] = useState<number>(0);
+
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: rowsPerPage,
+  });
+
+  const [lastIndex, setLastIndex] = useState(pageSize);
+  const [startIndex, setStartIndex] = useState(0);
+  const [hasSorted, setHasSorted] = useState(false);
 
   if (csv) {
     const out = parseCsv(csv);
@@ -62,21 +91,56 @@ export const Table = ({
     );
   }, [data, cols]);
 
-  const [globalFilter, setGlobalFilter] = useState('');
+  let table: ReactTable<unknown>;
 
-  const table = useReactTable({
-    data,
-    columns: tableCols,
-    getCoreRowModel: getCoreRowModel(),
-    state: {
-      globalFilter,
-    },
-    globalFilterFn: globalFilterFn,
-    onGlobalFilterChange: setGlobalFilter,
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
+  if (datastoreConfig) {
+    useEffect(() => {
+      setIsLoading(true);
+      fetch(`${dataStoreURI}&limit=${rowsPerPage}&offset=0`)
+        .then((res) => res.json())
+        .then(async (res) => {
+          const { data, cols, total } = await dataMapperFn(res);
+          setData(data);
+          setCols(cols);
+          setTotalOfRows(Math.ceil(total / rowsPerPage));
+          pageMap.set(0, true);
+        })
+        .finally(() => setIsLoading(false));
+    }, [dataStoreURI]);
+
+    table = useReactTable({
+      data,
+      pageCount: totalOfRows,
+      columns: tableCols,
+      getCoreRowModel: getCoreRowModel(),
+      state: {
+        pagination: { pageIndex, pageSize },
+      },
+      getFilteredRowModel: getFilteredRowModel(),
+      manualPagination: true,
+      onPaginationChange: setPagination,
+      getSortedRowModel: getSortedRowModel(),
+    });
+
+    useEffect(() => {
+      if (!hasSorted) return;
+      queryDataByText(globalFilter);
+    }, [table.getState().sorting]);
+  } else {
+    table = useReactTable({
+      data,
+      columns: tableCols,
+      getCoreRowModel: getCoreRowModel(),
+      state: {
+        globalFilter,
+      },
+      globalFilterFn: globalFilterFn,
+      onGlobalFilterChange: setGlobalFilter,
+      getFilteredRowModel: getFilteredRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+    });
+  }
 
   useEffect(() => {
     if (url) {
@@ -91,6 +155,70 @@ export const Table = ({
     }
   }, [url]);
 
+  const queryDataByText = (filter) => {
+    setIsLoadingPage(true);
+    const sortedParam = getSortParam();
+    fetch(
+      `${dataStoreURI}&limit=${rowsPerPage}&offset=0&q=${filter}${sortedParam}`
+    )
+      .then((res) => res.json())
+      .then(async (res) => {
+        const { data, total = 0 } = await dataMapperFn(res);
+        setTotalOfRows(Math.ceil(total / rowsPerPage));
+        setData(data);
+        const newMap = new Map();
+        newMap.set(0, true);
+        setPageMap(newMap);
+        table.setPageIndex(0);
+        setStartIndex(0);
+        setLastIndex(pageSize);
+      })
+      .finally(() => setIsLoadingPage(false));
+  };
+
+  const getSortParam = () => {
+    const sort = table.getState().sorting;
+    return sort.length == 0
+      ? ``
+      : '&sort=' +
+          sort
+            .map(
+              (x, i) =>
+                `${x.id}${
+                  i === sort.length - 1 ? (x.desc ? ` desc` : ` asc`) : `,`
+                }`
+            )
+            .reduce((x1, x2) => x1 + x2);
+  };
+
+  const queryPaginatedData = (newPageIndex) => {
+    let newStartIndex = newPageIndex * pageSize;
+    setStartIndex(newStartIndex);
+    setLastIndex(newStartIndex + pageSize);
+
+    if (!pageMap.get(newPageIndex)) pageMap.set(newPageIndex, true);
+    else return;
+
+    const sortedParam = getSortParam();
+
+    setIsLoadingPage(true);
+    fetch(
+      `${dataStoreURI}&limit=${rowsPerPage}&offset=${
+        newStartIndex + pageSize
+      }&q=${globalFilter}${sortedParam}`
+    )
+      .then((res) => res.json())
+      .then(async (res) => {
+        const { data: responseData } = await dataMapperFn(res);
+        responseData.forEach((e) => {
+          data[newStartIndex] = e;
+          newStartIndex++;
+        });
+        setData([...data]);
+      })
+      .finally(() => setIsLoadingPage(false));
+  };
+
   return isLoading ? (
     <div className="w-full h-full min-h-[500px] flex items-center justify-center">
       <LoadingSpinner />
@@ -99,7 +227,10 @@ export const Table = ({
     <div className={`${fullWidth ? 'w-[90vw] ml-[calc(50%-45vw)]' : 'w-full'}`}>
       <DebouncedInput
         value={globalFilter ?? ''}
-        onChange={(value: any) => setGlobalFilter(String(value))}
+        onChange={(value: any) => {
+          if (datastoreConfig) queryDataByText(String(value));
+          setGlobalFilter(String(value));
+        }}
         className="p-2 text-sm shadow border border-block"
         placeholder="Search all columns..."
       />
@@ -114,7 +245,10 @@ export const Table = ({
                       className: h.column.getCanSort()
                         ? 'cursor-pointer select-none'
                         : '',
-                      onClick: h.column.getToggleSortingHandler(),
+                      onClick: (v) => {
+                        setHasSorted(true);
+                        h.column.getToggleSortingHandler()(v);
+                      },
                     }}
                   >
                     {flexRender(h.column.columnDef.header, h.getContext())}
@@ -135,15 +269,28 @@ export const Table = ({
           ))}
         </thead>
         <tbody>
-          {table.getRowModel().rows.map((r) => (
-            <tr key={r.id} className="border-b border-b-slate-200">
-              {r.getVisibleCells().map((c) => (
-                <td key={c.id} className="py-2">
-                  {flexRender(c.column.columnDef.cell, c.getContext())}
-                </td>
-              ))}
+          {datastoreConfig && isLoadingPage ? (
+            <tr>
+              <td colSpan={cols.length} rowSpan={cols.length}>
+                <div className="w-full h-full flex items-center justify-center pt-6">
+                  <LoadingSpinner />
+                </div>
+              </td>
             </tr>
-          ))}
+          ) : (
+            (datastoreConfig
+              ? table.getRowModel().rows.slice(startIndex, lastIndex)
+              : table.getRowModel().rows
+            ).map((r) => (
+              <tr key={r.id} className="border-b border-b-slate-200">
+                {r.getVisibleCells().map((c) => (
+                  <td key={c.id} className="py-2">
+                    {flexRender(c.column.columnDef.cell, c.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
         </tbody>
       </table>
       <div className="flex gap-2 items-center justify-center mt-10">
@@ -151,7 +298,10 @@ export const Table = ({
           className={`w-6 h-6 ${
             !table.getCanPreviousPage() ? 'opacity-25' : 'opacity-100'
           }`}
-          onClick={() => table.setPageIndex(0)}
+          onClick={() => {
+            if (datastoreConfig) queryPaginatedData(0);
+            table.setPageIndex(0);
+          }}
           disabled={!table.getCanPreviousPage()}
         >
           <ChevronDoubleLeftIcon />
@@ -160,7 +310,12 @@ export const Table = ({
           className={`w-6 h-6 ${
             !table.getCanPreviousPage() ? 'opacity-25' : 'opacity-100'
           }`}
-          onClick={() => table.previousPage()}
+          onClick={() => {
+            if (datastoreConfig) {
+              queryPaginatedData(table.getState().pagination.pageIndex - 1);
+            }
+            table.previousPage();
+          }}
           disabled={!table.getCanPreviousPage()}
         >
           <ChevronLeftIcon />
@@ -176,7 +331,11 @@ export const Table = ({
           className={`w-6 h-6 ${
             !table.getCanNextPage() ? 'opacity-25' : 'opacity-100'
           }`}
-          onClick={() => table.nextPage()}
+          onClick={() => {
+            if (datastoreConfig)
+              queryPaginatedData(table.getState().pagination.pageIndex + 1);
+            table.nextPage();
+          }}
           disabled={!table.getCanNextPage()}
         >
           <ChevronRightIcon />
@@ -185,7 +344,11 @@ export const Table = ({
           className={`w-6 h-6 ${
             !table.getCanNextPage() ? 'opacity-25' : 'opacity-100'
           }`}
-          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          onClick={() => {
+            const pageIndexToNavigate = table.getPageCount() - 1;
+            if (datastoreConfig) queryPaginatedData(pageIndexToNavigate);
+            table.setPageIndex(pageIndexToNavigate);
+          }}
           disabled={!table.getCanNextPage()}
         >
           <ChevronDoubleRightIcon />

packages/components/src/components/Vega.tsx

@@ -1,6 +1,7 @@
 //  Wrapper for the Vega component
 import { Vega as VegaOg } from "react-vega";
+import { VegaProps } from "react-vega/lib/Vega";
 
-export function Vega(props) {
+export function Vega(props: VegaProps) {
   return <VegaOg {...props} />;
 }

packages/components/src/components/VegaLite.tsx

@@ -1,8 +1,9 @@
 //  Wrapper for the Vega Lite component
-import { VegaLite as VegaLiteOg } from "react-vega";
-import applyFullWidthDirective from "../lib/applyFullWidthDirective";
+import { VegaLite as VegaLiteOg } from 'react-vega';
+import { VegaLiteProps } from 'react-vega/lib/VegaLite';
+import applyFullWidthDirective from '../lib/applyFullWidthDirective';
 
-export function VegaLite(props) {
+export function VegaLite(props: VegaLiteProps) {
   const Component = applyFullWidthDirective({ Component: VegaLiteOg });
 
   return <Component {...props} />;

packages/components/src/index.ts

@@ -1,10 +1,17 @@
-export * from './components/Table';
 export * from './components/Catalog';
 export * from './components/LineChart';
 export * from './components/Vega';
 export * from './components/VegaLite';
 export * from './components/FlatUiTable';
-export * from './components/OpenLayers/OpenLayers';
 export * from './components/Map';
 export * from './components/PdfViewer';
 export * from "./components/Excel";
+export * from "./components/Iframe";
+export * from "./components/Plotly";
+export * from "./components/PlotlyLineChart";
+export * from "./components/PlotlyBarChart";
+// NOTE: components that are hidden for now
+// TODO: deprecate those components?
+// export * from './components/Table';
+// export * from "./components/BucketViewer";
+// export * from './components/OpenLayers/OpenLayers';

packages/components/src/types/properties.ts

@@ -0,0 +1,18 @@
+/*
+ * All components should use this interface for
+ * its data property.
+ * Based on vega.
+ *
+ */
+
+type URL = string; // Just in case we want to transform it into an object with configurations
+export interface Data {
+  url?: URL;
+  values?: { [key: string]: number | string }[];
+  csv?: string;
+}
+
+export interface GeospatialData {
+  url?: URL;
+  geojson?: GeoJSON.GeoJSON;
+}

packages/components/stories/BucketViewer.bkp.ts

@@ -0,0 +1,100 @@
+// NOTE: this component was renamed with .bkp so that it's hidden
+// from the Storybook app
+
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import {
+  BucketViewer,
+  BucketViewerProps,
+} from '../src/components/BucketViewer';
+import LoadingSpinner from '../src/components/LoadingSpinner';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/BucketViewer',
+  component: BucketViewer,
+  tags: ['autodocs'],
+  argTypes: {
+    domain: {
+      description: 'Bucket domain URI',
+    },
+    suffix: {
+      description: 'Suffix of bucket domain',
+    },
+    downloadConfig: {
+      description: `Bucket file download configuration`,
+    },
+    filterState: {
+      description: `State with values used to filter the bucket files`,
+    },
+    paginationConfig: {
+      description: `Configuration to show and stylise the pagination on the component`,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<BucketViewerProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Normal: Story = {
+  name: 'Bucket viewer',
+  args: {
+    domain: 'https://ssen-smart-meter.datopian.workers.dev',
+    suffix: '/',
+    dataMapperFn: async (rawData: Response) => {
+      const result = await rawData.json();
+      return result.objects.map((e) => ({
+        downloadFileUri: e.downloadLink,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
+        dateProps: {
+          date: new Date(e.uploaded),
+          dateFormatter: (date) => date.toLocaleDateString(),
+        },
+      }));
+    },
+  },
+};
+
+export const WithPagination: Story = {
+  name: 'With pagination',
+  args: {
+    domain: 'https://ssen-smart-meter.datopian.workers.dev',
+    suffix: '/',
+    paginationConfig: {
+      itemsPerPage: 3,
+    },
+    dataMapperFn: async (rawData: Response) => {
+      const result = await rawData.json();
+      return result.objects.map((e) => ({
+        downloadFileUri: e.downloadLink,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
+        dateProps: {
+          date: new Date(e.uploaded),
+          dateFormatter: (date) => date.toLocaleDateString(),
+        },
+      }));
+    },
+  },
+};
+
+export const WithComponentOnHoverOfEachBucketFile: Story = {
+  name: 'With component on hover of each bucket file',
+  args: {
+    domain: 'https://ssen-smart-meter.datopian.workers.dev',
+    suffix: '/',
+    downloadConfig: { hoverOfTheFileComponent: `HOVER COMPONENT` },
+    dataMapperFn: async (rawData: Response) => {
+      const result = await rawData.json();
+      return result.objects.map((e) => ({
+        downloadFileUri: e.downloadLink,
+        fileName: e.key.replace(/^(\w+\/)/g, ''),
+        dateProps: {
+          date: new Date(e.uploaded),
+          dateFormatter: (date) => date.toLocaleDateString(),
+        },
+      }));
+    },
+  },
+};

packages/components/stories/Catalog.stories.ts

@@ -10,11 +10,14 @@ const meta: Meta = {
   argTypes: {
     datasets: {
       description:
-        'Lists of datasets to be displayed in the list, will usually be automatically available',
+        "Array of items to be displayed on the searchable list. Must have the following properties: \n\n \
+`_id`: item's unique id \n\n \
+`url_path`: href of the item \n\n \
+`metadata`: object with a `title` property, that will be displayed as the title of the item, together with any other custom fields that might or not be faceted.",
     },
     facets: {
       description:
-        'List of frontmatter fields that should be used as filters, needs to match exactly with the field name',
+        "Array of strings, which are name of properties in the datasets' `metadata`, which are going to be faceted.",
     },
   },
 };
@@ -31,99 +34,35 @@ export const WithoutFacets: Story = {
       {
         _id: '07026b22d49916754df1dc8ffb9ccd1c31878aae',
         url_path: 'dataset-4',
-        file_path: 'content/dataset-4/index.md',
         metadata: {
           title: 'Detecting Abusive Albanian',
-          'link-to-publication': 'https://arxiv.org/abs/2107.13592',
-          'link-to-data': 'https://doi.org/10.6084/m9.figshare.19333298.v1',
-          'task-description':
-            'Hierarchical (offensive/not; untargeted/targeted; person/group/other)',
-          'details-of-task':
-            'Detect and categorise abusive language in social media data',
-          'size-of-dataset': 11874,
-          'percentage-abusive': 13.2,
-          language: 'Albanian',
-          'level-of-annotation': ['Posts'],
-          platform: ['Instagram', 'Youtube'],
-          medium: ['Text'],
-          reference:
-            'Nurce, E., Keci, J., Derczynski, L., 2021. Detecting Abusive Albanian. arXiv:2107.13592',
         },
       },
       {
         _id: '42c86cf3c4fbbab11d91c2a7d6dcb8f750bc4e19',
         url_path: 'dataset-1',
-        file_path: 'content/dataset-1/index.md',
         metadata: {
           title: 'AbuseEval v1.0',
-          'link-to-publication':
-            'http://www.lrec-conf.org/proceedings/lrec2020/pdf/2020.lrec-1.760.pdf',
-          'link-to-data': 'https://github.com/tommasoc80/AbuseEval',
-          'task-description':
-            'Explicitness annotation of offensive and abusive content',
-          'details-of-task':
-            'Enriched versions of the OffensEval/OLID dataset with the distinction of explicit/implicit offensive messages and the new dimension for abusive messages. Labels for offensive language: EXPLICIT, IMPLICT, NOT; Labels for abusive language: EXPLICIT, IMPLICT, NOTABU',
-          'size-of-dataset': 14100,
-          'percentage-abusive': 20.75,
-          language: 'English',
-          'level-of-annotation': ['Tweets'],
-          platform: ['Twitter'],
-          medium: ['Text'],
-          reference:
-            'Caselli, T., Basile, V., Jelena, M., Inga, K., and Michael, G. 2020. "I feel offended, don’t be abusive! implicit/explicit messages in offensive and abusive language". The 12th Language Resources and Evaluation Conference (pp. 6193-6202). European Language Resources Association.',
         },
       },
       {
         _id: '80001dd32a752421fdcc64e91fbd237dc31d6bb3',
         url_path: 'dataset-2',
-        file_path: 'content/dataset-2/index.md',
         metadata: {
           title:
             'Abusive Language Detection on Arabic Social Media (Al Jazeera)',
-          'link-to-publication': 'https://www.aclweb.org/anthology/W17-3008',
-          'link-to-data':
-            'http://alt.qcri.org/~hmubarak/offensive/AJCommentsClassification-CF.xlsx',
-          'task-description':
-            'Ternary (Obscene, Offensive but not obscene, Clean)',
-          'details-of-task': 'Incivility',
-          'size-of-dataset': 32000,
-          'percentage-abusive': 0.81,
-          language: 'Arabic',
-          'level-of-annotation': ['Posts'],
-          platform: ['AlJazeera'],
-          medium: ['Text'],
-          reference:
-            'Mubarak, H., Darwish, K. and Magdy, W., 2017. Abusive Language Detection on Arabic Social Media. In: Proceedings of the First Workshop on Abusive Language Online. Vancouver, Canada: Association for Computational Linguistics, pp.52-56.',
         },
       },
       {
         _id: '96649d05d8193f4333b10015af76c6562971bd8c',
         url_path: 'dataset-3',
-        file_path: 'content/dataset-3/index.md',
         metadata: {
           title: 'CoRAL: a Context-aware Croatian Abusive Language Dataset',
-          'link-to-publication':
-            'https://aclanthology.org/2022.findings-aacl.21/',
-          'link-to-data':
-            'https://github.com/shekharRavi/CoRAL-dataset-Findings-of-the-ACL-AACL-IJCNLP-2022',
-          'task-description':
-            'Multi-class based on context dependency categories (CDC)',
-          'details-of-task': 'Detectioning CDC from abusive comments',
-          'size-of-dataset': 2240,
-          'percentage-abusive': 100,
-          language: 'Croatian',
-          'level-of-annotation': ['Posts'],
-          platform: ['Posts'],
-          medium: ['Newspaper Comments'],
-          reference:
-            'Ravi Shekhar, Mladen Karan and Matthew Purver (2022). CoRAL: a Context-aware Croatian Abusive Language Dataset. Findings of the ACL: AACL-IJCNLP.',
         },
       },
     ],
   },
 };
-;
-
 export const WithFacets: Story = {
   name: 'Catalog with facets',
   args: {
@@ -131,7 +70,6 @@ export const WithFacets: Story = {
       {
         _id: '07026b22d49916754df1dc8ffb9ccd1c31878aae',
         url_path: 'dataset-4',
-        file_path: 'content/dataset-4/index.md',
         metadata: {
           title: 'Detecting Abusive Albanian',
           'link-to-publication': 'https://arxiv.org/abs/2107.13592',
@@ -220,7 +158,6 @@ export const WithFacets: Story = {
         },
       },
     ],
-    facets: ['language', 'platform']
+    facets: ['language', 'platform'],
   },
 };
-;

packages/components/stories/Excel.stories.ts

@@ -4,13 +4,13 @@ import { Excel, ExcelProps } from '../src/components/Excel';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
-  title: 'Components/Excel',
+  title: 'Components/Tabular/Excel',
   component: Excel,
   tags: ['autodocs'],
   argTypes: {
-    url: {
+    data: {
       description:
-        'Url of the file to be displayed e.g.: "https://url.to/data.csv"',
+        'Object with a `url` property pointing to the Excel file to be displayed, e.g.: `{ url: "https://url.to/data.csv" }`',
     },
   },
 };
@@ -22,13 +22,17 @@ type Story = StoryObj<ExcelProps>;
 export const SingleSheet: Story = {
   name: 'Excel file with just one sheet',
   args: {
-    url: 'https://sheetjs.com/pres.xlsx',
+    data: {
+      url: 'https://sheetjs.com/pres.xlsx',
+    },
   },
 };
 
 export const MultipleSheet: Story = {
   name: 'Excel file with multiple sheets',
   args: {
-    url: 'https://storage.portaljs.org/IC-Gantt-Chart-Project-Template-8857.xlsx',
+    data: {
+      url: 'https://storage.portaljs.org/IC-Gantt-Chart-Project-Template-8857.xlsx',
+    },
   },
 };

packages/components/stories/FlatUiTable.stories.ts

@@ -4,29 +4,31 @@ import { FlatUiTable, FlatUiTableProps } from '../src/components/FlatUiTable';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
-  title: 'Components/FlatUiTable',
+  title: 'Components/Tabular/FlatUiTable',
   component: FlatUiTable,
   tags: ['autodocs'],
   argTypes: {
     data: {
       description:
-        'Data to be displayed in the table, must be setup as an array of key value pairs',
-    },
-    csv: {
-      description: 'CSV data as string.',
-    },
-    url: {
-      description:
-        'Fetch the data from a CSV file remotely. only the first 5MB of data will be displayed',
+        'Data to be displayed. \n\n \
+Must be an object with one of the following properties: `url`, `values` or `csv` \n\n \
+`url`: URL pointing to a CSV file. \n\n \
+`values`: array of objects. \n\n \
+`csv`: string with valid CSV. \n\n \
+',
     },
     bytes: {
       description:
-        'Fetch the data from a CSV file remotely. only the first <bytes> of data will be displayed',
+        'Fetch the data from a CSV file remotely. Only the first <bytes> of data will be displayed. Defaults to 5MB.',
     },
     parsingConfig: {
       description:
         'Configuration for parsing the CSV data. See https://www.papaparse.com/docs#config for more details',
     },
+    uniqueId: {
+      description:
+        'Provide a unique ID to help with cache revalidation of the fetched data.',
+    },
   },
 };
 
@@ -36,34 +38,40 @@ type Story = StoryObj<FlatUiTableProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const FromColumnsAndData: Story = {
-  name: 'Table data',
+  name: 'Table from array or objects',
   args: {
-    data: [
-      { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
-      { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
-      { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
-      { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
-      { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
-      { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
-      { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
-    ],
+    data: {
+      values: [
+        { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
+        { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
+        { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
+        { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
+        { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+        { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+        { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+      ],
+    },
   },
 };
 
 export const FromRawCSV: Story = {
-  name: 'Table from raw CSV',
+  name: 'Table from inline CSV',
   args: {
-    rawCsv: `
+    data: {
+      csv: `
     Year,Temp Anomaly
     1850,-0.418
     2020,0.923
     `,
+    },
   },
 };
 
 export const FromURL: Story = {
   name: 'Table from URL',
   args: {
-    url: 'https://storage.openspending.org/alberta-budget/__os_imported__alberta_total.csv',
+    data: {
+      url: 'https://storage.openspending.org/alberta-budget/__os_imported__alberta_total.csv',
+    },
   },
 };

packages/components/stories/Iframe.stories.ts

@@ -0,0 +1,33 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Iframe, IframeProps } from '../src/components/Iframe';
+
+const meta: Meta = {
+  title: 'Components/Embedding/Iframe',
+  component: Iframe,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        'Object with a `url` property pointing to the page to be embeded.',
+    },
+    style: {
+      description:
+        'Style object of the component. See example at https://react.dev/learn#displaying-data. Defaults to `{ width: "100%", height: "100%" }`',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<IframeProps>;
+
+export const Normal: Story = {
+  name: 'Iframe',
+  args: {
+    data: {
+      url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9',
+    },
+    style: { width: `100%`, height: `100%` },
+  },
+};

packages/components/stories/LineChart.stories.ts

@@ -4,37 +4,36 @@ import { LineChart, LineChartProps } from '../src/components/LineChart';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
-  title: 'Components/LineChart',
+  title: 'Components/Charts/LineChart',
   component: LineChart,
   tags: ['autodocs'],
   argTypes: {
     data: {
       description:
-        'Data to be displayed.\n\n E.g.: [["1990", 1], ["1991", 2]] \n\nOR\n\n "https://url.to/data.csv"',
+        'Data to be displayed. \n\n \
+Must be an object with one of the following properties: `url` or `values` \n\n \
+`url`: URL pointing to a CSV file. \n\n \
+`values`: array of objects \n\n',
     },
     title: {
-      description: 'Title to display on the chart. Optional.',
+      description: 'Title to display on the chart.',
     },
     xAxis: {
       description:
-        'Name of the X axis on the data. Required when the "data" parameter is an URL.',
+        'Name of the column header or object property that represents the X-axis on the data.',
     },
     xAxisType: {
-      description: 'Type of the X axis',
+      description: 'Type of the X-axis.',
     },
     xAxisTimeUnit: {
-      description: 'Time unit of the X axis (optional)',
+      description: 'Time unit of the X-axis, in case its type is `temporal.`',
     },
     yAxis: {
       description:
-        'Name of the Y axis on the data. Required when the "data" parameter is an URL.',
+        'Name of the column header or object property that represents the Y-axis on the data.',
     },
     yAxisType: {
-      description: 'Type of the Y axis',
-    },
-    fullWidth: {
-      description:
-        'Whether the component should be rendered as full bleed or not',
+      description: 'Type of the Y-axis',
     },
   },
 };
@@ -47,21 +46,27 @@ type Story = StoryObj<LineChartProps>;
 export const FromDataPoints: Story = {
   name: 'Line chart from array of data points',
   args: {
-    data: [
-      ['1850', -0.41765878],
-      ['1851', -0.2333498],
-      ['1852', -0.22939907],
-      ['1853', -0.27035445],
-      ['1854', -0.29163003],
-    ],
+    data: {
+      values: [
+        { year: '1850', value: -0.41765878 },
+        { year: '1851', value: -0.2333498 },
+        { year: '1852', value: -0.22939907 },
+        { year: '1853', value: -0.27035445 },
+        { year: '1854', value: -0.29163003 },
+      ],
+    },
+    xAxis: 'year',
+    yAxis: 'value',
   },
 };
 
 export const FromURL: Story = {
   name: 'Line chart from URL',
   args: {
+    data: {
+      url: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv',
+    },
     title: 'Oil Price x Year',
-    data: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv',
     xAxis: 'Date',
     yAxis: 'Price',
   },

packages/components/stories/Map.stories.ts

@@ -4,22 +4,33 @@ import { Map, MapProps } from '../src/components/Map';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
-  title: 'Components/Map',
+  title: 'Components/Geospatial/Map',
   component: Map,
   tags: ['autodocs'],
   argTypes: {
     layers: {
       description:
-        'Data to be displayed.\n\n GeoJSON Object \n\nOR\n\n URL to GeoJSON Object',
+        'Array of layers to be displayed on the map. Should be an object with: \n\n \
+`data`: object with either a `url` property pointing to a GeoJSON file or a `geojson` property with a GeoJSON object. \n\n \
+`name`: name of the layer. \n\n \
+`colorscale`: object with a `starting` and `ending` colors that will be used to create a gradient and color the map. \n\n \
+`tooltip`: `true` to show all available features on the tooltip, object with a `propNames` property as an array of strings to choose which features to display. \n\n',
     },
     title: {
-      description: 'Title to display on the map. Optional.',
+      description: 'Title to display on the map.',
     },
     center: {
       description: 'Initial coordinates of the center of the map',
     },
     zoom: {
-      description: 'Zoom level',
+      description: 'Initial zoom level',
+    },
+    style: {
+      description: "CSS styles to be applied to the map's container.",
+    },
+    autoZoomConfiguration: {
+      description:
+        "Pass a layer's name to automatically zoom to the bounding area of a layer.",
     },
   },
 };
@@ -34,7 +45,9 @@ export const GeoJSONPolygons: Story = {
   args: {
     layers: [
       {
-        data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        data: {
+          url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        },
         name: 'Polygons',
         tooltip: { propNames: ['name'] },
         colorScale: {
@@ -54,7 +67,9 @@ export const GeoJSONPoints: Story = {
   args: {
     layers: [
       {
-        data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        data: {
+          url: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        },
         name: 'Points',
         tooltip: { propNames: ['Location'] },
       },
@@ -70,12 +85,16 @@ export const GeoJSONMultipleLayers: Story = {
   args: {
     layers: [
       {
-        data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        data: {
+          url: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        },
         name: 'Points',
         tooltip: true,
       },
       {
-        data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        data: {
+          url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        },
         name: 'Polygons',
         tooltip: true,
         colorScale: {
@@ -89,3 +108,35 @@ export const GeoJSONMultipleLayers: Story = {
     zoom: 2,
   },
 };
+
+export const GeoJSONMultipleLayersWithAutoZoomInSpecifiedLayer: Story = {
+  name: 'GeoJSON polygons and points map with auto zoom in the points layer',
+  args: {
+    layers: [
+      {
+        data: {
+          url: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        },
+        name: 'Points',
+        tooltip: true,
+      },
+      {
+        data: {
+          url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        },
+        name: 'Polygons',
+        tooltip: true,
+        colorScale: {
+          starting: '#ff0000',
+          ending: '#00ff00',
+        },
+      },
+    ],
+    title: 'Polygons and points',
+    center: { latitude: 45, longitude: 0 },
+    zoom: 2,
+    autoZoomConfiguration: {
+      layerName: 'Points',
+    },
+  },
+};

packages/components/stories/OpenLayers.bkp.tsx

@@ -1,3 +1,6 @@
+// NOTE: this component was renamed with .bkp so that it's hidden
+// from the Storybook app
+
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import OpenLayers from '../src/components/OpenLayers/OpenLayers';

packages/components/stories/PdfViewer.stories.ts

@@ -3,19 +3,21 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { PdfViewer, PdfViewerProps } from '../src/components/PdfViewer';
 
 const meta: Meta = {
-  title: 'Components/PdfViewer',
+  title: 'Components/Embedding/PdfViewer',
   component: PdfViewer,
   tags: ['autodocs'],
   argTypes: {
-    url: {
-      description: 'URL to PDF file',
+    data: {
+      description:
+        'Object with a `url` property pointing to the PDF file to be displayed, e.g.: `{ url: "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK" }`.',
     },
     parentClassName: {
-      description: 'Classname for the parent div of the pdf viewer',
-    },
-    layour: {
       description:
-        'Set to true if you want to have a layout with zoom level, page count, printing button etc',
+        'HTML classes to be applied to the container of the PDF viewer. [Tailwind](https://tailwindcss.com/) classes, such as `h-96` to define the height of the component, can be used on this field.',
+    },
+    layout: {
+      description:
+        'Set to `true` if you want to display a layout with zoom level, page count, printing button and other controls.',
       defaultValue: false,
     },
   },
@@ -25,26 +27,23 @@ export default meta;
 
 type Story = StoryObj<PdfViewerProps>;
 
-export const PdfViewerStory: Story = {
-  name: 'PdfViewer',
+export const PdfViewerStoryWithoutControlsLayout: Story = {
+  name: 'PDF Viewer without controls layout',
   args: {
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
-  },
-};
-
-export const PdfViewerStoryWithLayout: Story = {
-  name: 'PdfViewer with the default layout',
-  args: {
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
-    layout: true,
-  },
-};
-
-export const PdfViewerStoryWithHeight: Story = {
-  name: 'PdfViewer with a custom height',
-  args: {
-    url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    data: {
+      url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    },
+    parentClassName: 'h-96',
+  },
+};
+
+export const PdfViewerStoryWithControlsLayout: Story = {
+  name: 'PdfViewer with controls layout',
+  args: {
+    data: {
+      url: 'https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK',
+    },
+    layout: true,
     parentClassName: 'h-96',
-    layout: true,
   },
 };

packages/components/stories/Plotly.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Plotly } from '../src/components/Plotly';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/Charts/Plotly',
+  component: Plotly,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        "Plotly's `data` prop. You can find references on how to use these props at https://github.com/plotly/react-plotly.js/#basic-props.",
+    },
+    layout: {
+      description:
+        "Plotly's `layout` prop. You can find references on how to use these props at https://github.com/plotly/react-plotly.js/#basic-props.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<any>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  name: 'Line chart',
+  args: {
+    data: [
+      {
+        x: [1, 2, 3],
+        y: [2, 6, 3],
+        type: 'scatter',
+        mode: 'lines+markers',
+        marker: { color: 'red' },
+      },
+    ],
+    layout: {
+      title: 'Chart built with Plotly',
+      xaxis: {
+        title: 'x Axis',
+      },
+      yaxis: {
+        title: 'y Axis',
+      },
+    },
+  },
+};

packages/components/stories/PlotlyBarChart.stories.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PlotlyBarChart,
+  PlotlyBarChartProps,
+} from '../src/components/PlotlyBarChart';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/Charts/PlotlyBarChart',
+  component: PlotlyBarChart,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        'Data to be displayed. \n\n \
+Must be an object with one of the following properties: `url`, `values` or `csv` \n\n \
+`url`: URL pointing to a CSV file. \n\n \
+`values`: array of objects (check out [this example](/?path=/story/components-plotlybarchart--from-data-points)) \n\n \
+`csv`: string with valid CSV (check out [this example](/?path=/story/components-plotlybarchart--from-inline-csv)) \n\n \
+',
+    },
+    bytes: {
+      // TODO: likely this should be an extra option on the data parameter,
+      // specific to URLs
+      description:
+        "How many bytes to read from the url so that the entire file doesn's have to be fetched.",
+    },
+    parsingConfig: {
+      description:
+        'If using URL or CSV, this parsing config will be used to parse the data. Check https://www.papaparse.com/ for more info.',
+    },
+    title: {
+      description: 'Title to display on the chart.',
+    },
+    // TODO: commented out because this doesn't work
+    // lineLabel: {
+    //   description:
+    //     'Label to display on the line, Optional, will use yAxis if not provided',
+    // },
+    xAxis: {
+      description:
+        'Name of the column header or object property that represents the X-axis on the data.',
+    },
+    yAxis: {
+      description:
+        'Name of the column header or object property that represents the Y-axis on the data.',
+    },
+    uniqueId: {
+      description: 'Provide a unique ID to help with cache revalidation of the fetched data.'
+    }
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PlotlyBarChartProps>;
+
+export const FromDataPoints: Story = {
+  name: 'Bar chart from array of data points',
+  args: {
+    data: {
+      values: [
+        { year: '1850', temperature: -0.41765878 },
+        { year: '1851', temperature: -0.2333498 },
+        { year: '1852', temperature: -0.22939907 },
+        { year: '1853', temperature: -0.27035445 },
+        { year: '1854', temperature: -0.29163003 },
+      ],
+    },
+    xAxis: 'year',
+    yAxis: 'temperature',
+  },
+};
+
+export const FromURL: Story = {
+  name: 'Bar chart from URL',
+  args: {
+    title: 'Apple Stock Prices',
+    data: {
+      url: 'https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv',
+    },
+    xAxis: 'Date',
+    yAxis: 'AAPL.Open',
+  },
+};
+
+export const FromInlineCSV: Story = {
+  name: 'Bar chart from inline CSV',
+  args: {
+    title: 'Apple Stock Prices',
+    data: {
+      csv: `Date,AAPL.Open,AAPL.High,AAPL.Low,AAPL.Close,AAPL.Volume,AAPL.Adjusted,dn,mavg,up,direction
+2015-02-17,127.489998,128.880005,126.919998,127.830002,63152400,122.905254,106.7410523,117.9276669,129.1142814,Increasing
+2015-02-18,127.629997,128.779999,127.449997,128.720001,44891700,123.760965,107.842423,118.9403335,130.0382439,Increasing
+2015-02-19,128.479996,129.029999,128.330002,128.449997,37362400,123.501363,108.8942449,119.8891668,130.8840887,Decreasing
+2015-02-20,128.619995,129.5,128.050003,129.5,48948400,124.510914,109.7854494,120.7635001,131.7415509,Increasing`,
+    },
+    xAxis: 'Date',
+    yAxis: 'AAPL.Open',
+  },
+};

packages/components/stories/PlotlyLineChart.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PlotlyLineChart,
+  PlotlyLineChartProps,
+} from '../src/components/PlotlyLineChart';
+
+const meta: Meta = {
+  title: 'Components/Charts/PlotlyLineChart',
+  component: PlotlyLineChart,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        'Data to be displayed. \n\n \
+Must be an object with one of the following properties: `url`, `values` or `csv` \n\n \
+`url`: URL pointing to a CSV file. \n\n \
+`values`: array of objects. \n\n \
+`csv`: string with valid CSV. \n\n \
+',
+    },
+    bytes: {
+      // TODO: likely this should be an extra option on the data parameter,
+      // specific to URLs
+      description:
+        "How many bytes to read from the url so that the entire file doesn's have to be fetched.",
+    },
+    parsingConfig: {
+      description:
+        'If using URL or CSV, this parsing config will be used to parse the data. Check https://www.papaparse.com/ for more info',
+    },
+    title: {
+      description: 'Title to display on the chart.',
+    },
+    lineLabel: {
+      description:
+        'Label to display on the line, will use yAxis if not provided',
+    },
+    xAxis: {
+      description:
+        'Name of the column header or object property that represents the X-axis on the data.',
+    },
+    yAxis: {
+      description:
+        'Name of the column header or object property that represents the Y-axis on the data.',
+    },
+    uniqueId: {
+      description:
+        'Provide a unique ID to help with cache revalidation of the fetched data.',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PlotlyLineChartProps>;
+
+export const FromDataPoints: Story = {
+  name: 'Line chart from array of data points',
+  args: {
+    data: {
+      values: [
+        { year: '1850', temperature: -0.41765878 },
+        { year: '1851', temperature: -0.2333498 },
+        { year: '1852', temperature: -0.22939907 },
+        { year: '1853', temperature: -0.27035445 },
+        { year: '1854', temperature: -0.29163003 },
+      ],
+    },
+    xAxis: 'year',
+    yAxis: 'temperature',
+  },
+};
+
+export const FromURL: Story = {
+  name: 'Line chart from URL',
+  args: {
+    title: 'Oil Price x Year',
+    data: {
+      url: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv',
+    },
+    xAxis: 'Date',
+    yAxis: 'Price',
+  },
+};
+
+export const FromInlineCSV: Story = {
+  name: 'Bar chart from inline CSV',
+  args: {
+    title: 'Apple Stock Prices',
+    data: {
+      csv: `Date,AAPL.Open,AAPL.High,AAPL.Low,AAPL.Close,AAPL.Volume,AAPL.Adjusted,dn,mavg,up,direction
+2015-02-17,127.489998,128.880005,126.919998,127.830002,63152400,122.905254,106.7410523,117.9276669,129.1142814,Increasing
+2015-02-18,127.629997,128.779999,127.449997,128.720001,44891700,123.760965,107.842423,118.9403335,130.0382439,Increasing
+2015-02-19,128.479996,129.029999,128.330002,128.449997,37362400,123.501363,108.8942449,119.8891668,130.8840887,Decreasing
+2015-02-20,128.619995,129.5,128.050003,129.5,48948400,124.510914,109.7854494,120.7635001,131.7415509,Increasing`,
+    },
+    xAxis: 'Date',
+    yAxis: 'AAPL.Open',
+  },
+};

packages/components/stories/Table.bkp.ts

@@ -1,25 +1,33 @@
+// NOTE: this component was renamed with .bkp so that it's hidden
+// from the Storybook app
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Table, TableProps } from '../src/components/Table';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
-  title: 'Components/Table',
+  title: 'Components/Tabular/Table',
   component: Table,
   tags: ['autodocs'],
   argTypes: {
     data: {
-      description: "Data to be displayed in the table, must also set \"cols\" to work."
+      description:
+        'Data to be displayed in the table, must also set "cols" to work.',
     },
     cols: {
-      description: "Columns to be displayed in the table, must also set \"data\" to work."
+      description:
+        'Columns to be displayed in the table, must also set "data" to work.',
     },
     csv: {
-      description: "CSV data as string.",
+      description: 'CSV data as string.',
     },
     url: {
-      description: "Fetch the data from a CSV file remotely."
-    }
+      description: 'Fetch the data from a CSV file remotely.',
+    },
+    datastoreConfig: {
+      description: `Configuration to use CKAN's datastore API extension integrated with the component`,
+    },
   },
 };
 
@@ -29,7 +37,7 @@ type Story = StoryObj<TableProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const FromColumnsAndData: Story = {
-  name: "Table from columns and data",
+  name: 'Table from columns and data',
   args: {
     data: [
       { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
@@ -49,21 +57,40 @@ export const FromColumnsAndData: Story = {
   },
 };
 
+export const WithDataStoreIntegration: Story = {
+  name: 'Table with datastore integration',
+  args: {
+    datastoreConfig: {
+      dataStoreURI: `https://www.civicdata.com/api/action/datastore_search?resource_id=46ec0807-31ff-497f-bfa0-f31c796cdee8`,
+      dataMapperFn: ({
+        result,
+      }: {
+        result: { fields: { id }[]; records: []; total: number };
+      }) => {
+        return {
+          data: result.records,
+          cols: result.fields.map((x) => ({ key: x.id, name: x.id })),
+          total: result.total,
+        };
+      },
+    },
+  },
+};
+
 export const FromRawCSV: Story = {
-  name: "Table from raw CSV",
+  name: 'Table from raw CSV',
   args: {
     csv: `
     Year,Temp Anomaly
     1850,-0.418
     2020,0.923
-    `
-  }
+    `,
+  },
 };
 
 export const FromURL: Story = {
-  name: "Table from URL",
+  name: 'Table from URL',
   args: {
-    url: "https://raw.githubusercontent.com/datasets/finance-vix/main/data/vix-daily.csv"
-  }
+    url: 'https://raw.githubusercontent.com/datasets/finance-vix/main/data/vix-daily.csv',
+  },
 };
-

packages/components/stories/Vega.stories.ts

@@ -4,9 +4,19 @@ import { Vega } from '../src/components/Vega';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
-  title: 'Components/Vega',
+  title: 'Components/Charts/Vega',
   component: Vega,
   tags: ['autodocs'],
+  argTypes: {
+    data: {
+      description:
+        "Vega's `data` prop. You can find references on how to use this prop at https://vega.github.io/vega/docs/data/",
+    },
+    spec: {
+      description:
+        "Vega's `spec` prop. You can find references on how to use this prop at https://vega.github.io/vega/docs/specification/",
+    },
+  },
 };
 
 export default meta;
@@ -15,7 +25,7 @@ type Story = StoryObj<any>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Primary: Story = {
-  name: 'Chart built with Vega',
+  name: 'Bar chart',
   args: {
     data: {
       table: [

packages/components/stories/VegaLite.stories.ts

@@ -4,7 +4,7 @@ import { VegaLite } from '../src/components/VegaLite';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
-  title: 'Components/VegaLite',
+  title: 'Components/Charts/VegaLite',
   component: VegaLite,
   tags: ['autodocs'],
   argTypes: {
@@ -25,7 +25,7 @@ type Story = StoryObj<any>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Primary: Story = {
-  name: 'Chart built with Vega Lite',
+  name: 'Bar chart',
   args: {
     data: {
       table: [

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/core",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Core Portal.JS components, configs and utils.",
   "repository": {
     "type": "git",

packages/core/src/ui/SiteToc/SiteToc.tsx

@@ -46,8 +46,8 @@ export const SiteToc: React.FC<Props> = ({ currentPath, nav }) => {
 
   return (
     <nav data-testid="lhs-sidebar" className="flex flex-col space-y-3 text-sm">
-      {sortNavGroupChildren(nav).map((n) => (
-        <NavComponent item={n} isActive={false} />
+      {sortNavGroupChildren(nav).map((n, index) => (
+        <NavComponent key={index} item={n} isActive={false} />
       ))}
     </nav>
   );
@@ -96,8 +96,8 @@ const NavComponent: React.FC<{
             leaveTo="transform scale-95 opacity-0"
           >
             <Disclosure.Panel className="flex flex-col space-y-3 pl-5 mt-3">
-              {sortNavGroupChildren(item.children).map((subItem) => (
-                <NavComponent item={subItem} isActive={false} />
+              {sortNavGroupChildren(item.children).map((subItem, index) => (
+                <NavComponent key={index} item={subItem} isActive={false} />
               ))}
             </Disclosure.Panel>
           </Transition>

packages/core/src/ui/analytics/GoogleAnalytics.tsx

@@ -0,0 +1,36 @@
+import Script from 'next/script.js'
+
+export interface GoogleAnalyticsProps {
+  googleAnalyticsId: string
+}
+
+export const GA = ({ googleAnalyticsId }: GoogleAnalyticsProps) => {
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}
+      />
+
+      <Script strategy="afterInteractive" id="ga-script">
+        {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${googleAnalyticsId}');
+        `}
+      </Script>
+    </>
+  )
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const logEvent = (action, category, label, value) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.gtag?.('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}

packages/core/src/ui/analytics/Plausible.tsx

@@ -0,0 +1,41 @@
+import Script from 'next/script.js'
+
+export interface PlausibleProps {
+  plausibleDataDomain: string
+  dataApi?: string
+  src?: string
+}
+
+/**
+ * Plausible analytics component.
+ * To proxy the requests through your own domain, you can use the dataApi and src attribute.
+ * See [Plausible docs](https://plausible.io/docs/proxy/guides/nextjs#step-2-adjust-your-deployed-script)
+ * for more information.
+ *
+ */
+export const Plausible = ({
+  plausibleDataDomain,
+  dataApi = undefined,
+  src = 'https://plausible.io/js/plausible.js',
+}: PlausibleProps) => {
+  return (
+    <>
+      <Script
+        strategy="lazyOnload"
+        data-domain={plausibleDataDomain}
+        data-api={dataApi}
+        src={src}
+      />
+      <Script strategy="lazyOnload" id="plausible-script">
+        {`
+            window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
+        `}
+      </Script>
+    </>
+  )
+}
+
+// https://plausible.io/docs/custom-event-goals
+export const logEvent = (eventName, ...rest) => {
+  return window.plausible?.(eventName, ...rest)
+}

packages/core/src/ui/analytics/Posthog.tsx

@@ -0,0 +1,25 @@
+import Script from 'next/script.js'
+
+export interface PosthogProps {
+  posthogProjectApiKey: string
+  apiHost?: string
+}
+
+/**
+ * Posthog analytics component.
+ * See [Posthog docs](https://posthog.com/docs/libraries/js#option-1-add-javascript-snippet-to-your-html-badgerecommendedbadge) for more information.
+ *
+ */
+export const Posthog = ({
+  posthogProjectApiKey,
+  apiHost = 'https://app.posthog.com',
+}: PosthogProps) => {
+  return (
+    <Script strategy="lazyOnload" id="posthog-script">
+      {`
+          !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+          posthog.init('${posthogProjectApiKey}',{api_host:'${apiHost}'})
+      `}
+    </Script>
+  )
+}

packages/core/src/ui/analytics/SimpleAnalytics.tsx

@@ -0,0 +1,29 @@
+import Script from 'next/script.js'
+
+export interface SimpleAnalyticsProps {
+  src?: string
+}
+
+export const SimpleAnalytics = ({
+  src = 'https://scripts.simpleanalyticscdn.com/latest.js',
+}: SimpleAnalyticsProps) => {
+  return (
+    <>
+      <Script strategy="lazyOnload" id="sa-script">
+        {`
+            window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};
+        `}
+      </Script>
+      <Script strategy="lazyOnload" src={src} />
+    </>
+  )
+}
+
+// https://docs.simpleanalytics.com/events
+export const logEvent = (eventName, callback) => {
+  if (callback) {
+    return window.sa_event?.(eventName, callback)
+  } else {
+    return window.sa_event?.(eventName)
+  }
+}

packages/core/src/ui/analytics/Umami.tsx

@@ -0,0 +1,20 @@
+import Script from 'next/script.js'
+
+export interface UmamiProps {
+  umamiWebsiteId: string
+  src?: string
+}
+
+export const Umami = ({
+  umamiWebsiteId,
+  src = 'https://analytics.umami.is/script.js',
+}: UmamiProps) => {
+  return (
+    <Script
+      async
+      defer
+      data-website-id={umamiWebsiteId}
+      src={src} // Replace with your umami instance
+    />
+  )
+}

packages/core/src/ui/analytics/index.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { GA, GoogleAnalyticsProps } from "./GoogleAnalytics";
+import { Plausible, PlausibleProps } from "./Plausible";
+import { SimpleAnalytics, SimpleAnalyticsProps } from "./SimpleAnalytics";
+import { Umami, UmamiProps } from "./Umami";
+import { Posthog, PosthogProps } from "./Posthog";
+
+declare global {
+    interface Window {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        gtag?: (...args: any[]) => void;
+        plausible?: (...args: any[]) => void;
+        sa_event?: (...args: any[]) => void;
+    }
+}
+
+export interface AnalyticsConfig {
+    googleAnalytics?: GoogleAnalyticsProps;
+    plausibleAnalytics?: PlausibleProps;
+    umamiAnalytics?: UmamiProps;
+    posthogAnalytics?: PosthogProps;
+    simpleAnalytics?: SimpleAnalyticsProps;
+}
+
+/**
+ * @example
+ * const analytics: AnalyticsConfig = {
+ *  plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+ *  simpleAnalytics: false, // true or false
+ *  umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
+ *  posthogProjectApiKey: '', // e.g. AhnJK8392ndPOav87as450xd
+ *  googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
+ * }
+ */
+export interface AnalyticsProps {
+    analyticsConfig: AnalyticsConfig;
+}
+
+const isProduction = true || process.env["NODE_ENV"] === "production";
+
+/**
+ * Supports Plausible, Simple Analytics, Umami, Posthog or Google Analytics.
+ * All components default to the hosted service, but can be configured to use a self-hosted
+ * or proxied version of the script by providing the `src` / `apiHost` props.
+ *
+ * Note: If you want to use an analytics provider you have to add it to the
+ * content security policy in the `next.config.js` file.
+ * @param {AnalyticsProps} { analytics }
+ * @return {*}
+ */
+export const Analytics = ({ analyticsConfig }: AnalyticsProps) => {
+    return (
+        <>
+            {isProduction && analyticsConfig.plausibleAnalytics && (
+                <Plausible {...analyticsConfig.plausibleAnalytics} />
+            )}
+            {isProduction && analyticsConfig.simpleAnalytics && (
+                <SimpleAnalytics {...analyticsConfig.simpleAnalytics} />
+            )}
+            {isProduction && analyticsConfig.posthogAnalytics && (
+                <Posthog {...analyticsConfig.posthogAnalytics} />
+            )}
+            {isProduction && analyticsConfig.umamiAnalytics && (
+                <Umami {...analyticsConfig.umamiAnalytics} />
+            )}
+            {isProduction && analyticsConfig.googleAnalytics && (
+                <GA {...analyticsConfig.googleAnalytics} />
+            )}
+        </>
+    );
+};
+
+export { GA, Plausible, SimpleAnalytics, Umami, Posthog };
+
+export type {
+    GoogleAnalyticsProps,
+    PlausibleProps,
+    UmamiProps,
+    PosthogProps,
+    SimpleAnalyticsProps,
+};

packages/core/src/ui/index.ts

@@ -21,3 +21,4 @@ export { SiteToc, NavItem, NavGroup } from "./SiteToc";
 export { Comments, CommentsConfig } from "./Comments";
 export { AuthorConfig } from "./types";
 export { Hero } from "./Hero";
+export { Analytics, AnalyticsConfig } from "./analytics";

packages/core/src/utils/gtag.ts

@@ -7,6 +7,8 @@ export const pageview = ({
   analyticsID: string;
 }) => {
   if (typeof window.gtag !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     window.gtag("config", analyticsID, {
       page_path: url,
     });
@@ -16,6 +18,8 @@ export const pageview = ({
 // https://developers.google.com/analytics/devguides/collection/gtagjs/events
 export const event = ({ action, category, label, value }) => {
   if (typeof window.gtag !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     window.gtag("event", action, {
       event_category: category,
       event_label: label,

packages/remark-wiki-link/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @portaljs/remark-wiki-link
 
+## 1.2.0
+
+### Minor Changes
+
+- [#1084](https://github.com/datopian/datahub/pull/1084) [`57952e08`](https://github.com/datopian/datahub/commit/57952e0817770138881e7492dc9f43e9910b56a8) Thanks [@mohamedsalem401](https://github.com/mohamedsalem401)! - Add image resize feature
+
 ## 1.1.2
 
 ### Patch Changes

packages/remark-wiki-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/remark-wiki-link",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Parse and render wiki-style links in markdown especially Obsidian style links.",
   "repository": {
     "type": "git",

packages/remark-wiki-link/src/lib/fromMarkdown.ts

@@ -1,23 +1,23 @@
-import { isSupportedFileFormat } from "./isSupportedFileFormat";
+import { isSupportedFileFormat } from './isSupportedFileFormat';
 
 const defaultWikiLinkResolver = (target: string) => {
   // for [[#heading]] links
   if (!target) {
     return [];
   }
-  let permalink = target.replace(/\/index$/, "");
+  let permalink = target.replace(/\/index$/, '');
   // TODO what to do with [[index]] link?
   if (permalink.length === 0) {
-    permalink = "/";
+    permalink = '/';
   }
   return [permalink];
 };
 
 export interface FromMarkdownOptions {
   pathFormat?:
-  | "raw" // default; use for regular relative or absolute paths
-  | "obsidian-absolute" // use for Obsidian-style absolute paths (with no leading slash)
-  | "obsidian-short"; // use for Obsidian-style shortened paths (shortest path possible)
+    | 'raw' // default; use for regular relative or absolute paths
+    | 'obsidian-absolute' // use for Obsidian-style absolute paths (with no leading slash)
+    | 'obsidian-short'; // use for Obsidian-style shortened paths (shortest path possible)
   permalinks?: string[]; // list of permalinks to match possible permalinks of a wiki link against
   wikiLinkResolver?: (name: string) => string[]; // function to resolve wiki links to an array of possible permalinks
   newClassName?: string; // class name to add to links that don't have a matching permalink
@@ -25,14 +25,23 @@ export interface FromMarkdownOptions {
   hrefTemplate?: (permalink: string) => string; // function to generate the href attribute of a link
 }
 
+export function getImageSize(size: string) {
+  // eslint-disable-next-line prefer-const
+  let [width, height] = size.split('x');
+
+  if (!height) height = width;
+
+  return { width, height };
+}
+
 // mdas-util-from-markdown extension
 // https://github.com/syntax-tree/mdast-util-from-markdown#extension
 function fromMarkdown(opts: FromMarkdownOptions = {}) {
-  const pathFormat = opts.pathFormat || "raw";
+  const pathFormat = opts.pathFormat || 'raw';
   const permalinks = opts.permalinks || [];
   const wikiLinkResolver = opts.wikiLinkResolver || defaultWikiLinkResolver;
-  const newClassName = opts.newClassName || "new";
-  const wikiLinkClassName = opts.wikiLinkClassName || "internal";
+  const newClassName = opts.newClassName || 'new';
+  const wikiLinkClassName = opts.wikiLinkClassName || 'internal';
   const defaultHrefTemplate = (permalink: string) => permalink;
 
   const hrefTemplate = opts.hrefTemplate || defaultHrefTemplate;
@@ -44,9 +53,9 @@ function fromMarkdown(opts: FromMarkdownOptions = {}) {
   function enterWikiLink(token) {
     this.enter(
       {
-        type: "wikiLink",
+        type: 'wikiLink',
         data: {
-          isEmbed: token.isType === "embed",
+          isEmbed: token.isType === 'embed',
           target: null, // the target of the link, e.g. "Foo Bar#Heading" in "[[Foo Bar#Heading]]"
           alias: null, // the alias of the link, e.g. "Foo" in "[[Foo Bar|Foo]]"
           permalink: null, // TODO shouldn't this be named just "link"?
@@ -80,18 +89,18 @@ function fromMarkdown(opts: FromMarkdownOptions = {}) {
     } = wikiLink;
     // eslint-disable-next-line no-useless-escape
     const wikiLinkWithHeadingPattern = /^(.*?)(#.*)?$/u;
-    const [, path, heading = ""] = target.match(wikiLinkWithHeadingPattern);
+    const [, path, heading = ''] = target.match(wikiLinkWithHeadingPattern);
 
     const possibleWikiLinkPermalinks = wikiLinkResolver(path);
 
     const matchingPermalink = permalinks.find((e) => {
       return possibleWikiLinkPermalinks.find((p) => {
-        if (pathFormat === "obsidian-short") {
+        if (pathFormat === 'obsidian-short') {
           if (e === p || e.endsWith(p)) {
             return true;
           }
-        } else if (pathFormat === "obsidian-absolute") {
-          if (e === "/" + p) {
+        } else if (pathFormat === 'obsidian-absolute') {
+          if (e === '/' + p) {
             return true;
           }
         } else {
@@ -106,20 +115,19 @@ function fromMarkdown(opts: FromMarkdownOptions = {}) {
     // TODO this is ugly
     const link =
       matchingPermalink ||
-      (pathFormat === "obsidian-absolute"
-        ? "/" + possibleWikiLinkPermalinks[0]
+      (pathFormat === 'obsidian-absolute'
+        ? '/' + possibleWikiLinkPermalinks[0]
         : possibleWikiLinkPermalinks[0]) ||
-      "";
+      '';
 
     wikiLink.data.exists = !!matchingPermalink;
     wikiLink.data.permalink = link;
-
     // remove leading # if the target is a heading on the same page
-    const displayName = alias || target.replace(/^#/, "");
-    const headingId = heading.replace(/\s+/g, "-").toLowerCase();
+    const displayName = alias || target.replace(/^#/, '');
+    const headingId = heading.replace(/\s+/g, '-').toLowerCase();
     let classNames = wikiLinkClassName;
     if (!matchingPermalink) {
-      classNames += " " + newClassName;
+      classNames += ' ' + newClassName;
     }
 
     if (isEmbed) {
@@ -127,44 +135,55 @@ function fromMarkdown(opts: FromMarkdownOptions = {}) {
       if (!isSupportedFormat) {
         // Temporarily render note transclusion as a regular wiki link
         if (!format) {
-          wikiLink.data.hName = "a";
+          wikiLink.data.hName = 'a';
           wikiLink.data.hProperties = {
-            className: classNames + " " + "transclusion",
+            className: classNames + ' ' + 'transclusion',
             href: hrefTemplate(link) + headingId,
           };
-          wikiLink.data.hChildren = [{ type: "text", value: displayName }];
-
+          wikiLink.data.hChildren = [{ type: 'text', value: displayName }];
         } else {
-          wikiLink.data.hName = "p";
+          wikiLink.data.hName = 'p';
           wikiLink.data.hChildren = [
             {
-              type: "text",
+              type: 'text',
               value: `![[${target}]]`,
             },
           ];
         }
-      } else if (format === "pdf") {
-        wikiLink.data.hName = "iframe";
+      } else if (format === 'pdf') {
+        wikiLink.data.hName = 'iframe';
         wikiLink.data.hProperties = {
           className: classNames,
-          width: "100%",
+          width: '100%',
           src: `${hrefTemplate(link)}#toolbar=0`,
         };
       } else {
-        wikiLink.data.hName = "img";
-        wikiLink.data.hProperties = {
-          className: classNames,
-          src: hrefTemplate(link),
-          alt: displayName,
-        };
+        const hasDimensions = alias && /^\d+(x\d+)?$/.test(alias);
+        // Take the target as alt text except if alt name was provided [[target|alt text]]
+        const altText = hasDimensions || !alias ? target : alias;
+
+        wikiLink.data.hName = 'img';  
+        wikiLink.data.hProperties = {  
+            className: classNames,  
+            src: hrefTemplate(link),  
+            alt: altText
+        };  
+
+        if (hasDimensions) {  
+          const { width, height } = getImageSize(alias as string);  
+          Object.assign(wikiLink.data.hProperties, {  
+            width,  
+            height,  
+          }); 
+        }
       }
     } else {
-      wikiLink.data.hName = "a";
+      wikiLink.data.hName = 'a';
       wikiLink.data.hProperties = {
         className: classNames,
         href: hrefTemplate(link) + headingId,
       };
-      wikiLink.data.hChildren = [{ type: "text", value: displayName }];
+      wikiLink.data.hChildren = [{ type: 'text', value: displayName }];
     }
   }
 

packages/remark-wiki-link/src/lib/html.ts

@@ -1,23 +1,24 @@
-import { isSupportedFileFormat } from "./isSupportedFileFormat";
+import { getImageSize } from './fromMarkdown';
+import { isSupportedFileFormat } from './isSupportedFileFormat';
 
 const defaultWikiLinkResolver = (target: string) => {
   // for [[#heading]] links
   if (!target) {
     return [];
   }
-  let permalink = target.replace(/\/index$/, "");
+  let permalink = target.replace(/\/index$/, '');
   // TODO what to do with [[index]] link?
   if (permalink.length === 0) {
-    permalink = "/";
+    permalink = '/';
   }
   return [permalink];
 };
 
 export interface HtmlOptions {
   pathFormat?:
-  | "raw" // default; use for regular relative or absolute paths
-  | "obsidian-absolute" // use for Obsidian-style absolute paths (with no leading slash)
-  | "obsidian-short"; // use for Obsidian-style shortened paths (shortest path possible)
+  | 'raw' // default; use for regular relative or absolute paths
+  | 'obsidian-absolute' // use for Obsidian-style absolute paths (with no leading slash)
+  | 'obsidian-short'; // use for Obsidian-style shortened paths (shortest path possible)
   permalinks?: string[]; // list of permalinks to match possible permalinks of a wiki link against
   wikiLinkResolver?: (name: string) => string[]; // function to resolve wiki links to an array of possible permalinks
   newClassName?: string; // class name to add to links that don't have a matching permalink
@@ -28,11 +29,11 @@ export interface HtmlOptions {
 // Micromark HtmlExtension
 // https://github.com/micromark/micromark#htmlextension
 function html(opts: HtmlOptions = {}) {
-  const pathFormat = opts.pathFormat || "raw";
+  const pathFormat = opts.pathFormat || 'raw';
   const permalinks = opts.permalinks || [];
   const wikiLinkResolver = opts.wikiLinkResolver || defaultWikiLinkResolver;
-  const newClassName = opts.newClassName || "new";
-  const wikiLinkClassName = opts.wikiLinkClassName || "internal";
+  const newClassName = opts.newClassName || 'new';
+  const wikiLinkClassName = opts.wikiLinkClassName || 'internal';
   const defaultHrefTemplate = (permalink: string) => permalink;
   const hrefTemplate = opts.hrefTemplate || defaultHrefTemplate;
 
@@ -41,21 +42,21 @@ function html(opts: HtmlOptions = {}) {
   }
 
   function enterWikiLink() {
-    let stack = this.getData("wikiLinkStack");
-    if (!stack) this.setData("wikiLinkStack", (stack = []));
+    let stack = this.getData('wikiLinkStack');
+    if (!stack) this.setData('wikiLinkStack', (stack = []));
 
     stack.push({});
   }
 
   function exitWikiLinkTarget(token) {
     const target = this.sliceSerialize(token);
-    const current = top(this.getData("wikiLinkStack"));
+    const current = top(this.getData('wikiLinkStack'));
     current.target = target;
   }
 
   function exitWikiLinkAlias(token) {
     const alias = this.sliceSerialize(token);
-    const current = top(this.getData("wikiLinkStack"));
+    const current = top(this.getData('wikiLinkStack'));
     current.alias = alias;
   }
 
@@ -111,7 +112,9 @@ function html(opts: HtmlOptions = {}) {
         // Temporarily render note transclusion as a regular wiki link
         if (!format) {
           this.tag(
-            `<a href="${hrefTemplate(link + headingId)}" class="${classNames} transclusion">`
+            `<a href="${hrefTemplate(
+              link + headingId
+            )}" class="${classNames} transclusion">`
           );
           this.raw(displayName);
           this.tag("</a>");
@@ -125,11 +128,18 @@ function html(opts: HtmlOptions = {}) {
           )}#toolbar=0" class="${classNames}" />`
         );
       } else {
-        this.tag(
-          `<img src="${hrefTemplate(
-            link
-          )}" alt="${displayName}" class="${classNames}" />`
-        );
+        const hasDimensions = alias && /^\d+(x\d+)?$/.test(alias);
+        // Take the target as alt text except if alt name was provided [[target|alt text]]
+        const altText = hasDimensions || !alias ? target : alias;
+        let imgAttributes = `src="${hrefTemplate(
+          link
+        )}" alt="${altText}" class="${classNames}"`;
+
+        if (hasDimensions) {
+          const { width, height } = getImageSize(alias as string);
+          imgAttributes += ` width="${width}" height="${height}"`;
+        }
+        this.tag(`<img ${imgAttributes} />`);
       }
     } else {
       this.tag(

packages/remark-wiki-link/test/micromarkExtensionWikiLink.spec.ts

@@ -48,7 +48,7 @@ describe("micromark-extension-wiki-link", () => {
           html({
             permalinks: ["/some/folder/Wiki Link"],
             pathFormat: "obsidian-short",
-          }) as any // TODO type fix
+          }) as any, // TODO type fix
         ],
       });
       expect(serialized).toBe(
@@ -75,7 +75,7 @@ describe("micromark-extension-wiki-link", () => {
           html({
             permalinks: ["/some/folder/Wiki Link"],
             pathFormat: "obsidian-absolute",
-          }) as any // TODO type fix
+          }) as any, // TODO type fix
         ],
       });
       expect(serialized).toBe(
@@ -97,10 +97,14 @@ describe("micromark-extension-wiki-link", () => {
     });
 
     test("parses a wiki link with heading and alias", () => {
-      const serialized = micromark("[[Wiki Link#Some Heading|Alias]]", "ascii", {
-        extensions: [syntax()],
-        htmlExtensions: [html() as any], // TODO type fix
-      });
+      const serialized = micromark(
+        "[[Wiki Link#Some Heading|Alias]]",
+        "ascii",
+        {
+          extensions: [syntax()],
+          htmlExtensions: [html() as any], // TODO type fix
+        }
+      );
       // note: lowercased and hyphenated heading
       expect(serialized).toBe(
         '<p><a href="Wiki Link#some-heading" class="internal new">Alias</a></p>'
@@ -134,7 +138,7 @@ describe("micromark-extension-wiki-link", () => {
         extensions: [syntax()],
         htmlExtensions: [html() as any], // TODO type fix
       });
-      expect(serialized).toBe("<p>![[My Image.xyz]]</p>");
+      expect(serialized).toBe('<p>![[My Image.xyz]]</p>');
     });
 
     test("parses and image ambed with a matching permalink", () => {
@@ -147,6 +151,28 @@ describe("micromark-extension-wiki-link", () => {
       );
     });
 
+    // TODO: Fix alt attribute
+    test("Can identify the dimensions of the image if exists", () => {
+      const serialized = micromark("![[My Image.jpg|200]]", "ascii", {
+        extensions: [syntax()],
+        htmlExtensions: [html({ permalinks: ["My Image.jpg"] }) as any], // TODO type fix
+      });
+      expect(serialized).toBe(
+        '<p><img src="My Image.jpg" alt="My Image.jpg" class="internal" width="200" height="200" /></p>'
+        );
+      });
+      
+    // TODO: Fix alt attribute
+      test("Can identify the dimensions of the image if exists", () => {
+      const serialized = micromark("![[My Image.jpg|200x200]]", "ascii", {
+        extensions: [syntax()],
+        htmlExtensions: [html({ permalinks: ["My Image.jpg"] }) as any], // TODO type fix
+      });
+      expect(serialized).toBe(
+        '<p><img src="My Image.jpg" alt="My Image.jpg" class="internal" width="200" height="200" /></p>'
+      );
+    });
+
     test("parses an image embed with a matching permalink and Obsidian-style shortedned path", () => {
       const serialized = micromark("![[My Image.jpg]]", {
         extensions: [syntax()],
@@ -154,7 +180,7 @@ describe("micromark-extension-wiki-link", () => {
           html({
             permalinks: ["/assets/My Image.jpg"],
             pathFormat: "obsidian-short",
-          }) as any // TODO type fix
+          }) as any, // TODO type fix
         ],
       });
       expect(serialized).toBe(
@@ -189,7 +215,7 @@ describe("micromark-extension-wiki-link", () => {
         extensions: [syntax()],
         htmlExtensions: [html() as any], // TODO type fix
       });
-      expect(serialized).toBe("<p>[[Wiki Link</p>");
+      expect(serialized).toBe('<p>[[Wiki Link</p>');
     });
 
     test("doesn't parse a wiki link with one missing closing bracket", () => {
@@ -197,7 +223,7 @@ describe("micromark-extension-wiki-link", () => {
         extensions: [syntax()],
         htmlExtensions: [html() as any], // TODO type fix
       });
-      expect(serialized).toBe("<p>[[Wiki Link]</p>");
+      expect(serialized).toBe('<p>[[Wiki Link]</p>');
     });
 
     test("doesn't parse a wiki link with a missing opening bracket", () => {
@@ -205,7 +231,7 @@ describe("micromark-extension-wiki-link", () => {
         extensions: [syntax()],
         htmlExtensions: [html() as any], // TODO type fix
       });
-      expect(serialized).toBe("<p>[Wiki Link]]</p>");
+      expect(serialized).toBe('<p>[Wiki Link]]</p>');
     });
 
     test("doesn't parse a wiki link in single brackets", () => {
@@ -213,7 +239,7 @@ describe("micromark-extension-wiki-link", () => {
         extensions: [syntax()],
         htmlExtensions: [html() as any], // TODO type fix
       });
-      expect(serialized).toBe("<p>[Wiki Link]</p>");
+      expect(serialized).toBe('<p>[Wiki Link]</p>');
     });
   });
 
@@ -225,7 +251,7 @@ describe("micromark-extension-wiki-link", () => {
           html({
             newClassName: "test-new",
             wikiLinkClassName: "test-wiki-link",
-          }) as any // TODO type fix
+          }) as any, // TODO type fix
         ],
       });
       expect(serialized).toBe(
@@ -251,7 +277,7 @@ describe("micromark-extension-wiki-link", () => {
             wikiLinkResolver: (page) => [
               page.replace(/\s+/, "-").toLowerCase(),
             ],
-          }) as any // TODO type fix
+          }) as any, // TODO type fix
         ],
       });
       expect(serialized).toBe(
@@ -330,5 +356,5 @@ describe("micromark-extension-wiki-link", () => {
       });
       expect(serialized).toBe(`<p><a href="li nk-w(i)th-àcèô íã_a(n)d_underline!:ª%@'*º$ °~./\\#li-nk-w(i)th-àcèô-íã_a(n)d_underline!:ª%@'*º$-°~./\\" class="internal new">li nk-w(i)th-àcèô íã_a(n)d_underline!:ª%@'*º$ °~./\\#LI NK-W(i)th-àcèô íã_a(n)d_uNdErlinE!:ª%@'*º$ °~./\\</a></p>`);
     });
-  })
+  });
 });

packages/remark-wiki-link/test/remarkWikiLink.spec.ts

@@ -246,6 +246,28 @@ describe("remark-wiki-link", () => {
         expect(node.data?.hName).toEqual("img");
         expect((node.data?.hProperties as any).src).toEqual("My Image.png");
         expect((node.data?.hProperties as any).alt).toEqual("My Image.png");
+        expect((node.data?.hProperties as any).width).toBeUndefined();
+        expect((node.data?.hProperties as any).height).toBeUndefined();
+      });
+    });
+
+    test("Can identify the dimensions of the image if exists", () => {
+      const processor = unified().use(markdown).use(wikiLinkPlugin);
+
+      let ast = processor.parse("![[My Image.png|132x612]]");
+      ast = processor.runSync(ast);
+
+      expect(select("wikiLink", ast)).not.toEqual(null);
+
+      visit(ast, "wikiLink", (node: Node) => {
+        expect(node.data?.isEmbed).toEqual(true);
+        expect(node.data?.target).toEqual("My Image.png");
+        expect(node.data?.permalink).toEqual("My Image.png");
+        expect(node.data?.hName).toEqual("img");
+        expect((node.data?.hProperties as any).src).toEqual("My Image.png");
+        expect((node.data?.hProperties as any).alt).toEqual("My Image.png");
+        expect((node.data?.hProperties as any).width).toBe("132");
+        expect((node.data?.hProperties as any).height).toBe("612");
       });
     });
 
@@ -365,13 +387,17 @@ describe("remark-wiki-link", () => {
     test("parses a link with special characters and symbols", () => {
       const processor = unified().use(markdown).use(wikiLinkPlugin);
 
-      let ast = processor.parse("[[li nk-w(i)th-àcèô íã_a(n)d_underline!:ª%@'*º$ °~./\\#li-nk-w(i)th-àcèô íã_a(n)D_UNDERLINE!:ª%@'*º$ °~./\\]]");
+      let ast = processor.parse(
+        "[[li nk-w(i)th-àcèô íã_a(n)d_underline!:ª%@'*º$ °~./\\#li-nk-w(i)th-àcèô íã_a(n)D_UNDERLINE!:ª%@'*º$ °~./\\]]"
+      );
       ast = processor.runSync(ast);
       expect(select("wikiLink", ast)).not.toEqual(null);
 
       visit(ast, "wikiLink", (node: Node) => {
         expect(node.data?.exists).toEqual(false);
-        expect(node.data?.permalink).toEqual("li nk-w(i)th-àcèô íã_a(n)d_underline!:ª%@'*º$ °~./\\");
+        expect(node.data?.permalink).toEqual(
+          "li nk-w(i)th-àcèô íã_a(n)d_underline!:ª%@'*º$ °~./\\"
+        );
         expect(node.data?.alias).toEqual(null);
         expect(node.data?.hName).toEqual("a");
         expect((node.data?.hProperties as any).className).toEqual(
@@ -383,9 +409,9 @@ describe("remark-wiki-link", () => {
         expect((node.data?.hChildren as any)[0].value).toEqual(
           "li nk-w(i)th-àcèô íã_a(n)d_underline!:ª%@'*º$ °~./\\#li-nk-w(i)th-àcèô íã_a(n)D_UNDERLINE!:ª%@'*º$ °~./\\"
         );
-      })
+      });
     });
-  })
+  });
 
   describe("invalid wiki links", () => {
     test("doesn't parse a wiki link with two missing closing brackets", () => {
@@ -586,4 +612,3 @@ describe("remark-wiki-link", () => {
     });
   });
 });
-

site/content/config.js

@@ -69,7 +69,7 @@ const config = {
     },
   },
   github: 'https://github.com/datopian/portaljs',
-  discord: 'https://discord.gg/EeyfGrGu4U',
+  discord: 'https://discord.gg/xfFDMPU9dC',
   tableOfContents: true,
   analytics: 'G-96GWZHMH57',
   // editLinkShow: true,

tools/tsconfig.tools.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../dist/out-tsc/tools",
-    "rootDir": ".",
-    "module": "commonjs",
-    "target": "es5",
-    "types": ["node"],
-    "importHelpers": false
-  },
-  "include": ["**/*.ts"]
-}