@prashantgosai11/bisag-sidebar 1.0.0

package/README.md

@@ -0,0 +1,53 @@
+# Bisag Sidebar
+
+A Bisag-style sidebar component for geospatial data visualization. Add datasets, configure layers, filters, base maps, and export data.
+
+## Features
+
+- **Layers Tab**: Add GeoJSON/CSV/Shapefile data, choose visualization types (point, line, polygon, hexbin, heatmap, etc.)
+- **Filters Tab**: Create formula, category, pie, histogram, time series, and table widgets
+- **Base Map Tab**: Add vector/raster/WMS tiles
+- **Export**: Export to CSV, GeoJSON, WKT, KML, JSON
+
+## Install & Run
+
+```bash
+cd /home/bisag/Projects/kepler-sidebar
+npm install
+npm run dev
+```
+
+Open http://localhost:5173
+
+## Usage in Your Project
+
+This project is structured as a standalone app. To use as an npm package:
+
+1. Build: `npm run build`
+2. Publish to npm or use as a local package: `npm link`
+3. In your app: `import BisagSidebar from '@bisag/bisag-sidebar'`
+
+## Dependencies
+
+- React 19
+- Mantine UI
+- deck.gl (layers, mapbox overlay)
+- MapLibre GL
+- Zustand (state)
+- Turf.js, H3, etc.
+
+## Project Structure
+
+```
+src/
+├── BisagSidebar/     # Main sidebar component
+│   ├── tabs/          # Layers, Filters, BaseMap tabs
+│   ├── widgets/       # Formula, Category, Pie, etc.
+│   └── AddLayers/      # Layer type selector, Deck.gl layer factories
+├── AddLayers/          # Deck.gl layer React components
+├── stores/             # Map & widget state (Zustand)
+├── utils/              # widget-utils, fileLoaders, export-formats
+├── types/
+├── hooks/
+└── App.tsx
+```

package/dist/AddLayers/DeckGl/AnimatedTripsLayerComponent.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+/**
+ * AnimatedTripsLayerComponent
+ *
+ * Renders animated paths that represent vehicle trips.
+ * Reference: https://deck.gl/docs/api-reference/geo-layers/trips-layer
+ *
+ * Based on deck.gl example:
+ * - getPath: d => d.waypoints.map(p => p.coordinates)
+ * - getTimestamps: d => d.waypoints.map(p => p.timestamp)
+ * - currentTime: animates through timestamps
+ * - trailLength: 600
+ */
+interface AnimatedTripsLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    trailLength?: number;
+    widthMinPixels?: number;
+    widthMaxPixels?: number;
+    capRounded?: boolean;
+    jointRounded?: boolean;
+    fadeTrail?: boolean;
+    animationSpeed?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+}
+declare const AnimatedTripsLayerComponent: React.FC<AnimatedTripsLayerComponentProps>;
+export default AnimatedTripsLayerComponent;

package/dist/AddLayers/DeckGl/ArcLayerComponent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface ArcLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    sourceColor?: string;
+    targetColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    getWidth?: number;
+    widthMinPixels?: number;
+    widthMaxPixels?: number;
+    greatCircle?: boolean;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+}
+declare const ArcLayerComponent: React.FC<ArcLayerComponentProps>;
+export default ArcLayerComponent;

package/dist/AddLayers/DeckGl/BitmapLayerComponent.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface BitmapLayerComponentProps {
+    map: any;
+    image: string;
+    bounds: [number, number, number, number];
+    selectedLayerId?: string;
+    dataset?: any;
+    opacity?: number;
+    visible?: boolean;
+    desaturate?: number;
+    transparentColor?: [number, number, number, number];
+    tintColor?: [number, number, number];
+    onClick?: (info: any) => void;
+}
+declare const BitmapLayerComponent: React.FC<BitmapLayerComponentProps>;
+export default BitmapLayerComponent;

package/dist/AddLayers/DeckGl/ClusterLayerComponent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface ClusterLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    clusterRadius?: number;
+    clusterMaxZoom?: number;
+    radiusMinPixels?: number;
+    radiusMaxPixels?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+}
+declare const ClusterLayerComponent: React.FC<ClusterLayerComponentProps>;
+export default ClusterLayerComponent;

package/dist/AddLayers/DeckGl/ColumnLayerComponent.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface ColumnLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    diskResolution?: number;
+    radius?: number;
+    extruded?: boolean;
+    elevationScale?: number;
+    stroked?: boolean;
+    lineWidthMinPixels?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const ColumnLayerComponent: React.FC<ColumnLayerComponentProps>;
+export default ColumnLayerComponent;

package/dist/AddLayers/DeckGl/ContourLayerComponent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface ContourLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    cellSize?: number;
+    contours?: {
+        threshold: number;
+        color: [number, number, number, number];
+        strokeWidth?: number;
+    }[];
+    onClick?: (info: any) => void;
+    weightField?: string;
+}
+declare const ContourLayerComponent: React.FC<ContourLayerComponentProps>;
+export default ContourLayerComponent;

package/dist/AddLayers/DeckGl/GeoJsonLayerComponent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface GeoJsonLayerComponentProps {
+    map: any;
+    data: any;
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    strokeWidth?: number;
+    pointRadius?: number;
+    visible?: boolean;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    onLayerSelect?: (info: any) => void;
+}
+declare const GeoJsonLayerComponent: React.FC<GeoJsonLayerComponentProps>;
+export default GeoJsonLayerComponent;

package/dist/AddLayers/DeckGl/GeohashLayerComponent.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface GeohashLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    precision?: number;
+    extruded?: boolean;
+    elevationScale?: number;
+    stroked?: boolean;
+    lineWidthMinPixels?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const GeohashLayerComponent: React.FC<GeohashLayerComponentProps>;
+export default GeohashLayerComponent;

package/dist/AddLayers/DeckGl/GreatCircleLayerComponent.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface GreatCircleLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    sourceColor?: string;
+    targetColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    widthScale?: number;
+    widthMinPixels?: number;
+    widthMaxPixels?: number;
+    numSegments?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    widthField?: string;
+}
+declare const GreatCircleLayerComponent: React.FC<GreatCircleLayerComponentProps>;
+export default GreatCircleLayerComponent;

package/dist/AddLayers/DeckGl/GridLayerComponent.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface GridLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    cellSize?: number;
+    extruded?: boolean;
+    elevationScale?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const GridLayerComponent: React.FC<GridLayerComponentProps>;
+export default GridLayerComponent;

package/dist/AddLayers/DeckGl/H3ClusterLayerComponent.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface H3ClusterLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    resolution?: number;
+    stroked?: boolean;
+    filled?: boolean;
+    extruded?: boolean;
+    elevationScale?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const H3ClusterLayerComponent: React.FC<H3ClusterLayerComponentProps>;
+export default H3ClusterLayerComponent;

package/dist/AddLayers/DeckGl/H3HexagonLayerComponent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface H3HexagonLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    resolution?: number;
+    extruded?: boolean;
+    elevationScale?: number;
+    getElevation?: (d: any) => number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const H3HexagonLayerComponent: React.FC<H3HexagonLayerComponentProps>;
+export default H3HexagonLayerComponent;

package/dist/AddLayers/DeckGl/HeatmapLayerComponent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface HeatmapLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    opacity?: number;
+    visible?: boolean;
+    radiusPixels?: number;
+    intensity?: number;
+    threshold?: number;
+    colorRange?: [number, number, number, number][];
+    onClick?: (info: any) => void;
+    weightField?: string;
+}
+declare const HeatmapLayerComponent: React.FC<HeatmapLayerComponentProps>;
+export default HeatmapLayerComponent;

package/dist/AddLayers/DeckGl/HexagonLayer.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface HexagonLayerProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    onLayerSelect?: (info: any) => void;
+    dataset?: any;
+    settings?: {
+        radius?: number;
+        coverage?: number;
+    };
+    onChange?: (settings: any) => void;
+    colorMapping?: Record<string, string>;
+    selectedColorField?: string;
+    selectedHeightField?: string;
+    hexagonRadius?: number;
+    heightMultiplier?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    settingsButtonContainerRef?: React.RefObject<HTMLElement | null>;
+    visible?: boolean;
+}
+declare const HexagonLayerComponent: React.FC<HexagonLayerProps>;
+export default HexagonLayerComponent;

package/dist/AddLayers/DeckGl/HexbinLayerComponent.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface HexbinLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    radius?: number;
+    extruded?: boolean;
+    elevationScale?: number;
+    coverage?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const HexbinLayerComponent: React.FC<HexbinLayerComponentProps>;
+export default HexbinLayerComponent;

package/dist/AddLayers/DeckGl/IconLayerComponent.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+interface IconLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    iconAtlas?: string;
+    iconMapping?: Record<string, {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        mask?: boolean;
+    }>;
+    opacity?: number;
+    visible?: boolean;
+    sizeScale?: number;
+    sizeMinPixels?: number;
+    sizeMaxPixels?: number;
+    billboard?: boolean;
+    onClick?: (info: any) => void;
+    iconField?: string;
+    sizeField?: string;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    iconType?: string;
+    fillColor?: string;
+}
+export declare const ICON_TYPES: {
+    circle: {
+        name: string;
+    };
+    marker: {
+        name: string;
+    };
+    square: {
+        name: string;
+    };
+    diamond: {
+        name: string;
+    };
+    triangle: {
+        name: string;
+    };
+    star: {
+        name: string;
+    };
+    hospital: {
+        name: string;
+    };
+    school: {
+        name: string;
+    };
+    home: {
+        name: string;
+    };
+    flag: {
+        name: string;
+    };
+};
+declare const IconLayerComponent: React.FC<IconLayerComponentProps>;
+export default IconLayerComponent;

package/dist/AddLayers/DeckGl/LineLayerComponent.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface LineLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    widthScale?: number;
+    widthMinPixels?: number;
+    widthMaxPixels?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    widthField?: string;
+}
+declare const LineLayerComponent: React.FC<LineLayerComponentProps>;
+export default LineLayerComponent;

package/dist/AddLayers/DeckGl/PathLayerComponent.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export type DashPatternType = 'solid' | 'dashed' | 'dotted' | 'longDash' | 'shortDash' | 'highway' | 'boundary' | 'railroad';
+interface PathLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    strokeWidth?: number;
+    visible?: boolean;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    dashPattern?: DashPatternType;
+    dashField?: string;
+    dashMapping?: Record<string, DashPatternType>;
+    brushingEnabled?: boolean;
+    brushingRadius?: number;
+    onClick?: (info: any) => void;
+}
+declare const PathLayerComponent: React.FC<PathLayerComponentProps>;
+export default PathLayerComponent;

package/dist/AddLayers/DeckGl/PointCloudLayerComponent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface PointCloudLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    pointSize?: number;
+    sizeUnits?: 'pixels' | 'meters';
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    sizeField?: string;
+}
+declare const PointCloudLayerComponent: React.FC<PointCloudLayerComponentProps>;
+export default PointCloudLayerComponent;

package/dist/AddLayers/DeckGl/PolygonLayerComponent.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface PolygonLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    extruded?: boolean;
+    elevationScale?: number;
+    wireframe?: boolean;
+    lineWidthMinPixels?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const PolygonLayerComponent: React.FC<PolygonLayerComponentProps>;
+export default PolygonLayerComponent;

package/dist/AddLayers/DeckGl/QuadkeyLayerComponent.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface QuadkeyLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    precision?: number;
+    extruded?: boolean;
+    elevationScale?: number;
+    stroked?: boolean;
+    lineWidthMinPixels?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const QuadkeyLayerComponent: React.FC<QuadkeyLayerComponentProps>;
+export default QuadkeyLayerComponent;

package/dist/AddLayers/DeckGl/S2LayerComponent.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+interface S2LayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    level?: number;
+    extruded?: boolean;
+    elevationScale?: number;
+    stroked?: boolean;
+    lineWidthMinPixels?: number;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    heightField?: string;
+}
+declare const S2LayerComponent: React.FC<S2LayerComponentProps>;
+export default S2LayerComponent;

package/dist/AddLayers/DeckGl/ScatterplotLayerComponent.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+interface ScatterplotLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    strokeColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    radius?: number;
+    radiusScale?: number;
+    radiusMinPixels?: number;
+    radiusMaxPixels?: number;
+    lineWidthMinPixels?: number;
+    stroked?: boolean;
+    filled?: boolean;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    radiusField?: string;
+}
+declare const ScatterplotLayerComponent: React.FC<ScatterplotLayerComponentProps>;
+export default ScatterplotLayerComponent;

package/dist/AddLayers/DeckGl/ScenegraphLayerComponent.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface ScenegraphLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    sizeScale?: number;
+    scenegraph?: string;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    sizeField?: string;
+    animations?: boolean;
+    animationSpeed?: number;
+}
+export declare const SCENEGRAPH_MODELS: {
+    boxAnimated: string;
+    duck: string;
+    cesiumMan: string;
+    fox: string;
+    airplane: string;
+    brainstem: string;
+    buggy: string;
+};
+declare const ScenegraphLayerComponent: React.FC<ScenegraphLayerComponentProps>;
+export default ScenegraphLayerComponent;

package/dist/AddLayers/DeckGl/ScreenGridLayerComponent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface ScreenGridLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    cellSizePixels?: number;
+    colorRange?: [number, number, number, number][];
+    gpuAggregation?: boolean;
+    aggregation?: 'SUM' | 'MEAN' | 'MIN' | 'MAX';
+    onClick?: (info: any) => void;
+    weightField?: string;
+}
+declare const ScreenGridLayerComponent: React.FC<ScreenGridLayerComponentProps>;
+export default ScreenGridLayerComponent;

package/dist/AddLayers/DeckGl/SimpleMeshLayerComponent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface SimpleMeshLayerComponentProps {
+    map: any;
+    data: any[];
+    selectedLayerId?: string;
+    dataset?: any;
+    fillColor?: string;
+    opacity?: number;
+    visible?: boolean;
+    sizeScale?: number;
+    wireframe?: boolean;
+    onClick?: (info: any) => void;
+    colorField?: string;
+    colorMapping?: Record<string, string>;
+    sizeField?: string;
+}
+declare const SimpleMeshLayerComponent: React.FC<SimpleMeshLayerComponentProps>;
+export default SimpleMeshLayerComponent;