@kanaries/graphic-walker 0.4.3 → 0.4.5

package/dist/hooks/service.d.ts

@@ -0,0 +1,3 @@
+import { IGeoUrl } from '../interfaces';
+import type { FeatureCollection } from "geojson";
+export declare function useGeoJSON(geojson?: FeatureCollection, url?: IGeoUrl): FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties> | undefined;

package/dist/interfaces.d.ts

@@ -223,8 +223,13 @@ export interface IVisualConfig {
     };
     geojson?: FeatureCollection;
     geoKey?: string;
+    geoUrl?: IGeoUrl;
     limit: number;
 }
+export interface IGeoUrl {
+    type: 'GeoJSON' | 'TopoJSON';
+    url: string;
+}
 export interface IVisSpec {
     readonly visId: string;
     readonly name?: string;

package/dist/store/visualSpecStore.d.ts

@@ -1,4 +1,4 @@
-import { DataSet, DraggableFieldState, IFilterRule, IGeographicData, ISortMode, IStackMode, IViewField, IVisualConfig, Specification, IComputationFunction } from '../interfaces';
+import { DataSet, DraggableFieldState, IFilterRule, IGeographicData, ISortMode, IStackMode, IViewField, IVisualConfig, Specification, IComputationFunction, IGeoUrl } from '../interfaces';
 import { VisSpecWithHistory } from '../models/visSpecHistory';
 import { IStoInfo } from '../utils/save';
 import { CommonStore } from './commonStore';
@@ -723,12 +723,16 @@ export declare class VizSpecStore {
                 bbox?: import("geojson").BBox | undefined;
             } | undefined;
             readonly geoKey?: string | undefined;
+            readonly geoUrl?: {
+                type: "GeoJSON" | "TopoJSON";
+                url: string;
+            } | undefined;
             readonly limit: number;
         };
     }[];
     importStoInfo(stoInfo: IStoInfo): void;
     importRaw(raw: string): void;
-    setGeographicData(data: IGeographicData, geoKey: string): void;
+    setGeographicData(data: IGeographicData, geoKey: string, geoUrl?: IGeoUrl): void;
     updateGeoKey(key: string): void;
     private visSpecEncoder;
     get limit(): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/App.tsx

@@ -185,7 +185,7 @@ const App = observer<IGWProps>(function App(props) {
                         <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} exclude={toolbar?.exclude} extra={toolbar?.extra} />
                         <CodeExport />
                         <VisualConfig />
-                        <GeoConfigPanel />
+                        {commonStore.showGeoJSONConfigPanel && <GeoConfigPanel />}
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
                             <div className="md:col-span-3 xl:col-span-1">
                                 <DatasetFields />

package/src/components/button/base.ts

@@ -5,4 +5,5 @@ export interface ButtonBaseProps {
     text: string;
     disabled?: boolean;
     className?: string;
+    icon?: JSX.Element;
 }

package/src/components/button/default.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ButtonBaseProps } from "./base";
 
 const DefaultButton: React.FC<ButtonBaseProps> = (props) => {
-    const { text, onClick, disabled, className } = props;
+    const { text, onClick, disabled, className, icon } = props;
     let btnClassName = "inline-flex items-center rounded border border-gray-300 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
     if (className) {
         btnClassName = btnClassName + " " + className;
@@ -14,6 +14,7 @@ const DefaultButton: React.FC<ButtonBaseProps> = (props) => {
             disabled={disabled}
         >
             {text}
+            {icon}
         </button>
     );
 };

package/src/components/leafletRenderer/ChoroplethRenderer.tsx

@@ -1,13 +1,14 @@
 import React, { Fragment, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { CircleMarker, MapContainer, Polygon, Marker, TileLayer, Tooltip } from "react-leaflet";
 import { type Map, divIcon } from "leaflet";
-import type { DeepReadonly, IRow, IViewField, VegaGlobalConfig } from "../../interfaces";
+import type { DeepReadonly, IGeoUrl, IRow, IViewField, VegaGlobalConfig } from "../../interfaces";
 import type { FeatureCollection, Geometry } from "geojson";
 import { getMeaAggKey } from "../../utils";
 import { useColorScale, useOpacityScale } from "./encodings";
 import { isValidLatLng } from "./POIRenderer";
 import { TooltipContent } from "./tooltip";
 import { useAppRootContext } from "../appRoot";
+import { useGeoJSON } from "../../hooks/service";
 
 
 export interface IChoroplethRendererProps {
@@ -15,6 +16,7 @@ export interface IChoroplethRendererProps {
     data: IRow[];
     allFields: DeepReadonly<IViewField[]>;
     features: FeatureCollection | undefined;
+    featuresUrl?: IGeoUrl;
     geoKey: string;
     defaultAggregated: boolean;
     geoId: DeepReadonly<IViewField>;
@@ -88,10 +90,12 @@ const resolveCenter = (coordinates: [lat: number, lng: number][]): [lng: number,
 };
 
 const ChoroplethRenderer = forwardRef<IChoroplethRendererRef, IChoroplethRendererProps>(function ChoroplethRenderer (props, ref) {
-    const { name, data, allFields, features, geoKey, defaultAggregated, geoId, color, opacity, text, details, vegaConfig, scaleIncludeUnmatchedChoropleth } = props;
+    const { name, data, allFields, features: localFeatures, featuresUrl, geoKey, defaultAggregated, geoId, color, opacity, text, details, vegaConfig, scaleIncludeUnmatchedChoropleth } = props;
 
     useImperativeHandle(ref, () => ({}));
 
+    const features = useGeoJSON(localFeatures, featuresUrl)
+
     const geoIndices = useMemo(() => {
         if (geoId) {
             return data.map(row => row[geoId.fid]);

package/src/components/leafletRenderer/geoConfigPanel.tsx

@@ -1,27 +1,29 @@
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { runInAction } from 'mobx';
+import Spinner from '../spinner';
 import { useGlobalStore } from '../../store';
 import Modal from '../modal';
 import PrimaryButton from '../button/primary';
 import DefaultButton from '../button/default';
-import type { Topology } from '../../interfaces';
+import type { IGeoUrl, Topology } from '../../interfaces';
 
 const GeoConfigPanel: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
     const { showGeoJSONConfigPanel } = commonStore;
     const { visualConfig } = vizStore;
-    const { geoKey, geojson } = visualConfig;
+    const { geoKey, geojson, geoUrl } = visualConfig;
     const { t: tGlobal } = useTranslation('translation');
     const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
 
-    const [dataMode, setDataMode] = useState<'GeoJSON' | 'TopoJSON'>('GeoJSON');
+    const [dataMode, setDataMode] = useState<'GeoJSON' | 'TopoJSON'>(geoUrl?.type ?? 'GeoJSON');
     const [featureId, setFeatureId] = useState('');
-    const [url, setUrl] = useState('');
+    const [url, setUrl] = useState(geoUrl?.url ?? '');
     const [geoJSON, setGeoJSON] = useState('');
     const [topoJSON, setTopoJSON] = useState('');
     const [topoJSONKey, setTopoJSONKey] = useState('');
+    const [loadedUrl, setLoadedUrl] = useState<IGeoUrl | undefined>(geoUrl);
+    const [loading, setLoading] = useState(false);
 
     const defaultTopoJSONKey = useMemo(() => {
         try {
@@ -40,13 +42,37 @@ const GeoConfigPanel: React.FC = (props) => {
         setGeoJSON(geojson ? JSON.stringify(geojson, null, 2) : '');
     }, [geojson]);
 
+    const handleSubmit = () => {
+        try {
+            const json = JSON.parse(dataMode === 'GeoJSON' ? geoJSON : topoJSON);
+            if (dataMode === 'TopoJSON') {
+                vizStore.setGeographicData(
+                    {
+                        type: 'TopoJSON',
+                        data: json,
+                        objectKey: topoJSONKey || defaultTopoJSONKey,
+                    },
+                    featureId,
+                    loadedUrl?.type === 'TopoJSON' ? loadedUrl : undefined
+                );
+            } else {
+                vizStore.setGeographicData(
+                    {
+                        type: 'GeoJSON',
+                        data: json,
+                    },
+                    featureId,
+                    loadedUrl?.type === 'GeoJSON' ? loadedUrl : undefined
+                );
+            }
+            commonStore.setShowGeoJSONConfigPanel(false);
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
     return (
-        <Modal
-            show={showGeoJSONConfigPanel}
-            onClose={() => {
-                commonStore.setShowGeoJSONConfigPanel(false);
-            }}
-        >
+        <Modal show={showGeoJSONConfigPanel} onClose={() => commonStore.setShowGeoJSONConfigPanel(false)}>
             <div>
                 <h2 className="text-lg mb-4">{t('geography')}</h2>
                 <div>
@@ -57,9 +83,7 @@ const GeoConfigPanel: React.FC = (props) => {
                                 type="text"
                                 className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                 value={featureId}
-                                onChange={(e) => {
-                                    setFeatureId(e.target.value);
-                                }}
+                                onChange={(e) => setFeatureId(e.target.value)}
                             />
                         </div>
                     </div>
@@ -112,14 +136,20 @@ const GeoConfigPanel: React.FC = (props) => {
                                 <DefaultButton
                                     text={t('geography_settings.load')}
                                     className="mr-2"
+                                    disabled={loading}
+                                    icon={loading ? <Spinner className='text-black' /> : undefined}
                                     onClick={() => {
                                         if (url) {
+                                            setLoading(true);
                                             fetch(url)
                                                 .then((res) => res.json())
                                                 .then((json) => {
-                                                    (dataMode === 'GeoJSON' ? setGeoJSON : setTopoJSON)(
-                                                        JSON.stringify(json, null, 2)
-                                                    );
+                                                    (dataMode === 'GeoJSON' ? setGeoJSON : setTopoJSON)(JSON.stringify(json, null, 2));
+                                                    setLoadedUrl({ type: dataMode, url });
+                                                    setLoading(false);
+                                                })
+                                                .catch(() => {
+                                                    setLoading(false);
                                                 });
                                         }
                                     }}
@@ -131,13 +161,14 @@ const GeoConfigPanel: React.FC = (props) => {
                                 placeholder={t('geography_settings.jsonInputPlaceholder', { format: dataMode.toLowerCase() })}
                                 onChange={(e) => {
                                     (dataMode === 'GeoJSON' ? setGeoJSON : setTopoJSON)(e.target.value);
+                                    if (loadedUrl?.type === dataMode) {
+                                        setLoadedUrl(undefined);
+                                    }
                                 }}
                             />
                             {dataMode === 'TopoJSON' && (
                                 <div className="flex items-center space-x-2">
-                                    <label className="text-xs whitespace-nowrap capitalize">
-                                        {t('geography_settings.objectKey')}
-                                    </label>
+                                    <label className="text-xs whitespace-nowrap capitalize">{t('geography_settings.objectKey')}</label>
                                     <input
                                         type="text"
                                         className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
@@ -153,34 +184,7 @@ const GeoConfigPanel: React.FC = (props) => {
                     </div>
                 </div>
                 <div className="mt-4">
-                    <PrimaryButton
-                        text={tGlobal('actions.confirm')}
-                        className="mr-2"
-                        onClick={() => {
-                            try {
-                                const json = JSON.parse(dataMode === 'GeoJSON' ? geoJSON : topoJSON);
-                                if (dataMode === 'TopoJSON') {
-                                    runInAction(() => {
-                                        vizStore.setGeographicData({
-                                            type: 'TopoJSON',
-                                            data: json,
-                                            objectKey: topoJSONKey || defaultTopoJSONKey,
-                                        }, featureId);
-                                    });
-                                } else {
-                                    runInAction(() => {
-                                        vizStore.setGeographicData({
-                                            type: 'GeoJSON',
-                                            data: json,
-                                        }, featureId);
-                                    });
-                                }
-                                commonStore.setShowGeoJSONConfigPanel(false);
-                            } catch (err) {
-                                console.error(err);
-                            }
-                        }}
-                    />
+                    <PrimaryButton text={tGlobal('actions.confirm')} className="mr-2" onClick={handleSubmit} />
                     <DefaultButton
                         text={tGlobal('actions.cancel')}
                         className="mr-2"

package/src/components/leafletRenderer/index.tsx

@@ -20,7 +20,7 @@ export const LEAFLET_DEFAULT_HEIGHT = 600;
 const LeafletRenderer = forwardRef<ILeafletRendererRef, ILeafletRendererProps>(function LeafletRenderer (props, ref) {
     const { name, draggableFieldState, data, visualConfig, vegaConfig = {} } = props;
     const { latitude: [lat], longitude: [lng], geoId: [geoId], dimensions, measures, size: [size], color: [color], opacity: [opacity], text: [text], details } = draggableFieldState;
-    const { defaultAggregated, geoms: [markType], geojson, geoKey = '', scaleIncludeUnmatchedChoropleth = false } = visualConfig;
+    const { defaultAggregated, geoms: [markType], geojson, geoKey = '', geoUrl, scaleIncludeUnmatchedChoropleth = false } = visualConfig;
     const allFields = useMemo(() => [...dimensions, ...measures], [dimensions, measures]);
     const latField = useMemo(() => allFields.find((f) => f.geoRole === 'latitude'), [allFields]);
     const lngField = useMemo(() => allFields.find((f) => f.geoRole === 'longitude'), [allFields]);
@@ -50,6 +50,7 @@ const LeafletRenderer = forwardRef<ILeafletRendererRef, ILeafletRendererProps>(f
                 data={data}
                 allFields={allFields}
                 features={geojson}
+                featuresUrl={geoUrl}
                 geoKey={geoKey}
                 defaultAggregated={defaultAggregated}
                 geoId={geoId}

package/src/components/loadingLayer.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
+import Spinner from './spinner';
 
 export default function LoadingLayer () {
     return <div className="bg-gray-100/50 dark:bg-gray-700/50 absolute top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center">
-        Loading...
+        <Spinner className="text-indigo-500" />
+        <span className="text-sm text-indigo-500">
+            Loading...
+        </span>
     </div>
 }

package/src/components/spinner.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-export default function Spinner() {
+export default function Spinner(props: { className?: string }) {
+    const className = props.className || 'text-white';
     return (
-        <svg className="animate-spin ml-2 mr-2 h-5 w-5 text-white" viewBox="0 0 24 24">
+        <svg className={`animate-spin ml-2 mr-2 h-5 w-5 ${className}`} viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path
                 className="opacity-75"

package/src/fields/datasetFields/meaFields.tsx

@@ -5,6 +5,7 @@ import { useGlobalStore } from "../../store";
 import DataTypeIcon from "../../components/dataTypeIcon";
 import { FieldPill } from "./fieldPill";
 import DropdownContext, { IDropdownContextOption } from "../../components/dropdownContext";
+import { COUNT_FIELD_ID } from "../../constants";
 
 interface Props {
     provided: DroppableProvided;
@@ -50,7 +51,7 @@ const MeaFields: React.FC<Props> = (props) => {
                         return (
                             <div className="block">
                                 <DropdownContext
-                                    disable={snapshot.isDragging}
+                                    disable={snapshot.isDragging || f.fid === COUNT_FIELD_ID}
                                     options={MEA_ACTION_OPTIONS}
                                     onSelect={(v, opIndex) => {
                                         fieldActionHandler(v, opIndex, index);

package/src/hooks/service.ts

@@ -0,0 +1,30 @@
+import { IGeoUrl } from '../interfaces';
+import { useState, useEffect, useRef } from 'react';
+import { feature } from 'topojson-client';
+import type { FeatureCollection } from "geojson";
+
+const GeoJSONDict: Record<string, FeatureCollection> = {};
+export function useGeoJSON(geojson?: FeatureCollection, url?: IGeoUrl) {
+    const key = url ? `${url.type}(${url.url})` : '';
+    const data = (geojson || GeoJSONDict[key] || url) as IGeoUrl | FeatureCollection;
+    const [_, setLastFetched] = useState(0);
+    const lastFetchedRef = useRef(0);
+    useEffect(() => {
+        if (data === url && url) {
+            const timestamp = Date.now();
+            lastFetchedRef.current = timestamp;
+            fetch(url.url)
+                .then((res) => res.json())
+                .then((json) => {
+                    if (timestamp !== lastFetchedRef.current) return;
+                    if (url.type === 'GeoJSON') {
+                        data[key] = json;
+                    } else {
+                        data[key] = feature(json, Object.keys(json.objects)[0]);
+                    }
+                    setLastFetched(timestamp);
+                });
+        }
+    }, [data]);
+    return data === url ? undefined : data as FeatureCollection;
+}

package/src/interfaces.ts

@@ -253,9 +253,15 @@ export interface IVisualConfig {
     };
     geojson?: FeatureCollection;
     geoKey?: string;
+    geoUrl?: IGeoUrl;
     limit: number;
 }
 
+export interface IGeoUrl {
+    type: 'GeoJSON' | 'TopoJSON',
+    url: string,
+}
+
 export interface IVisSpec {
     readonly visId: string;
     readonly name?: string;

package/src/renderer/index.tsx

@@ -76,7 +76,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
                 setViewConfig(latestFromRef.current.visualConfig);
             });
         }
-    }, [waiting, vizStore]);
+    }, [waiting, data, vizStore]);
 
     useChartIndexControl({
         count: visList.length,

package/src/store/visualSpecStore.ts

@@ -1,7 +1,7 @@
 import { IReactionDisposer, makeAutoObservable, observable, computed, reaction, toJS } from 'mobx';
 import produce from 'immer';
 import { feature } from 'topojson-client';
-import type { FeatureCollection } from "geojson";
+import type { FeatureCollection } from 'geojson';
 import {
     DataSet,
     DraggableFieldState,
@@ -16,6 +16,7 @@ import {
     IVisualConfig,
     Specification,
     IComputationFunction,
+    IGeoUrl,
 } from '../interfaces';
 import { CHANNEL_LIMIT, GEMO_TYPES, MetaFieldKeys } from '../config';
 import { VisSpecWithHistory } from '../models/visSpecHistory';
@@ -103,10 +104,14 @@ function isDraggableStateEmpty(state: DeepReadonly<DraggableFieldState>): boolea
     return Object.values(state).every((value) => value.length === 0);
 }
 
-function withTimeout<T extends any[], U>(f: (...args: T) => Promise<U>, timeout: number){
-    return (...args: T) => Promise.race([f(...args), new Promise<never>((_, reject) => {
-        setTimeout(() => reject(new Error('timeout')), timeout)
-    })])
+function withTimeout<T extends any[], U>(f: (...args: T) => Promise<U>, timeout: number) {
+    return (...args: T) =>
+        Promise.race([
+            f(...args),
+            new Promise<never>((_, reject) => {
+                setTimeout(() => reject(new Error('timeout')), timeout);
+            }),
+        ]);
 }
 
 export class VizSpecStore {
@@ -383,8 +388,8 @@ export class VizSpecStore {
                     return ((config as unknown as { [k: string]: boolean })[configKey] = Boolean(value));
                 }
                 case configKey === 'geoms' && Array.isArray(value):
-                case configKey === "showTableSummary":
-                case configKey === "coordSystem":
+                case configKey === 'showTableSummary':
+                case configKey === 'coordSystem':
                 case configKey === 'size' && typeof value === 'object':
                 case configKey === 'sorted':
                 case configKey === 'zeroScale':
@@ -817,9 +822,10 @@ export class VizSpecStore {
         const content = parseGWContent(raw);
         this.importStoInfo(content);
     }
-    
-    public setGeographicData(data: IGeographicData, geoKey: string) {
-        const geoJSON = data.type === 'GeoJSON' ? data.data : feature(data.data, data.objectKey || Object.keys(data.data.objects)[0]) as unknown as FeatureCollection;
+
+    public setGeographicData(data: IGeographicData, geoKey: string, geoUrl?: IGeoUrl) {
+        const geoJSON =
+            data.type === 'GeoJSON' ? data.data : (feature(data.data, data.objectKey || Object.keys(data.data.objects)[0]) as unknown as FeatureCollection);
         if (!('features' in geoJSON)) {
             console.error('Invalid GeoJSON: GeoJSON must be a FeatureCollection, but got', geoJSON);
             return;
@@ -827,6 +833,7 @@ export class VizSpecStore {
         this.useMutable(({ config }) => {
             config.geojson = geoJSON;
             config.geoKey = geoKey;
+            config.geoUrl = geoUrl;
         });
     }
     public updateGeoKey(key: string) {
@@ -856,6 +863,10 @@ export class VizSpecStore {
                     ...visSpec.encodings,
                     filters: updatedFilters,
                 },
+                config: {
+                    ...visSpec.config,
+                    geojson: visSpec.config.geoUrl ? undefined : visSpec.config.geojson
+                }
             };
         });
         return updatedVisList;