@jupytergis/base 0.1.6 → 0.2.0

package/lib/dialogs/components/symbology/Graduated.js

@@ -1,188 +0,0 @@
-import { Button } from '@jupyterlab/ui-components';
-import React, { useEffect, useRef, useState } from 'react';
-import StopRow from './StopRow';
-const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
-    const selectedValueRef = useRef();
-    const selectedMethodRef = useRef();
-    const stopRowsRef = useRef();
-    const layerStateRef = useRef();
-    const [selectedValue, setSelectedValue] = useState('');
-    const [featureProperties, setFeatureProperties] = useState({});
-    const [selectedMethod, setSelectedMethod] = useState('color');
-    const [stopRows, setStopRows] = useState([]);
-    const [methodOptions, setMethodOptions] = useState(['color']);
-    const [layerState, setLayerState] = useState();
-    if (!layerId) {
-        return;
-    }
-    const layer = context.model.getLayer(layerId);
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-        return;
-    }
-    useEffect(() => {
-        const getProperties = async () => {
-            var _a, _b;
-            if (!layerId) {
-                return;
-            }
-            const model = context.model;
-            const layer = model.getLayer(layerId);
-            const source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
-            if (!source) {
-                return;
-            }
-            const data = await model.readGeoJSON((_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path);
-            const featureProps = {};
-            data === null || data === void 0 ? void 0 : data.features.forEach((feature) => {
-                feature.properties &&
-                    Object.entries(feature.properties).forEach(([key, value]) => {
-                        if (!(key in featureProps)) {
-                            featureProps[key] = new Set();
-                        }
-                        featureProps[key].add(value);
-                    });
-                setFeatureProperties(featureProps);
-            });
-        };
-        getProperties();
-        buildColorInfo();
-        okSignalPromise.promise.then(okSignal => {
-            okSignal.connect(handleOk, this);
-        });
-        return () => {
-            okSignalPromise.promise.then(okSignal => {
-                okSignal.disconnect(handleOk, this);
-            });
-        };
-    }, []);
-    useEffect(() => {
-        selectedValueRef.current = selectedValue;
-        selectedMethodRef.current = selectedMethod;
-        stopRowsRef.current = stopRows;
-        layerStateRef.current = layerState;
-    }, [selectedValue, selectedMethod, stopRows, layerState]);
-    useEffect(() => {
-        populateOptions();
-    }, [featureProperties]);
-    const buildColorInfo = () => {
-        var _a;
-        // This it to parse a color object on the layer
-        if (!((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.color)) {
-            return;
-        }
-        const color = layer.parameters.color;
-        // If color is a string we don't need to parse
-        if (typeof color === 'string') {
-            return;
-        }
-        const prefix = layer.parameters.type === 'circle' ? 'circle-' : '';
-        if (!color[`${prefix}fill-color`]) {
-            return;
-        }
-        const valueColorPairs = [];
-        // So if it's not a string then it's an array and we parse
-        // Color[0] is the operator used for the color expression
-        switch (color[`${prefix}fill-color`][0]) {
-            case 'interpolate': {
-                // First element is interpolate for linear selection
-                // Second element is type of interpolation (ie linear)
-                // Third is input value that stop values are compared with
-                // Fourth and on is value:color pairs
-                for (let i = 3; i < color[`${prefix}fill-color`].length; i += 2) {
-                    const obj = {
-                        stop: color[`${prefix}fill-color`][i],
-                        output: color[`${prefix}fill-color`][i + 1]
-                    };
-                    valueColorPairs.push(obj);
-                }
-                break;
-            }
-        }
-        setStopRows(valueColorPairs);
-    };
-    const populateOptions = async () => {
-        var _a;
-        // Set up method options
-        if (((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.type) === 'circle') {
-            const options = ['color', 'radius'];
-            setMethodOptions(options);
-        }
-        const layerState = await state.fetch(`jupytergis:${layerId}`);
-        let value, method;
-        if (layerState) {
-            value = layerState
-                .graduatedValue;
-            method = layerState
-                .graduatedMethod;
-        }
-        setLayerState(layerState);
-        setSelectedValue(value ? value : Object.keys(featureProperties)[0]);
-        setSelectedMethod(method ? method : 'color');
-    };
-    const handleOk = () => {
-        var _a;
-        if (!layer.parameters) {
-            return;
-        }
-        state.save(`jupytergis:${layerId}`, Object.assign(Object.assign({}, layerStateRef.current), { renderType: 'Graduated', graduatedValue: selectedValueRef.current, graduatedMethod: selectedMethodRef.current }));
-        const colorExpr = [];
-        colorExpr.push('interpolate');
-        colorExpr.push(['linear']);
-        colorExpr.push(['get', selectedValueRef.current]);
-        (_a = stopRowsRef.current) === null || _a === void 0 ? void 0 : _a.map(stop => {
-            colorExpr.push(stop.stop);
-            colorExpr.push(stop.output);
-        });
-        const newStyle = Object.assign({}, layer.parameters.color);
-        if (selectedMethodRef.current === 'color') {
-            if (layer.parameters.type === 'fill') {
-                newStyle['fill-color'] = colorExpr;
-            }
-            if (layer.parameters.type === 'line') {
-                newStyle['stroke-color'] = colorExpr;
-            }
-            if (layer.parameters.type === 'circle') {
-                newStyle['circle-fill-color'] = colorExpr;
-            }
-        }
-        if (selectedMethodRef.current === 'radius') {
-            if (layer.parameters.type === 'circle') {
-                newStyle['circle-radius'] = colorExpr;
-            }
-        }
-        layer.parameters.color = newStyle;
-        context.model.sharedModel.updateLayer(layerId, layer);
-        cancel();
-    };
-    const addStopRow = () => {
-        setStopRows([
-            {
-                stop: 0,
-                output: [0, 0, 0, 1]
-            },
-            ...stopRows
-        ]);
-    };
-    const deleteStopRow = (index) => {
-        const newFilters = [...stopRows];
-        newFilters.splice(index, 1);
-        setStopRows(newFilters);
-    };
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-value-select' }, "Value:"),
-            React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: 'vector-value-select', onChange: event => setSelectedValue(event.target.value), className: "jp-mod-styled" }, Object.keys(featureProperties).map((feature, index) => (React.createElement("option", { key: index, value: feature, selected: feature === selectedValue, className: "jp-mod-styled" }, feature)))))),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-method-select' }, "Method:"),
-            React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: 'vector-method-select', onChange: event => setSelectedMethod(event.target.value), className: "jp-mod-styled" }, methodOptions.map((method, index) => (React.createElement("option", { key: index, value: method, selected: method === selectedMethod, className: "jp-mod-styled" }, method)))))),
-        React.createElement("div", { className: "jp-gis-stop-container" },
-            React.createElement("div", { className: "jp-gis-stop-labels", style: { display: 'flex', gap: 6 } },
-                React.createElement("span", { style: { flex: '0 0 18%' } }, "Value"),
-                React.createElement("span", null, "Output Value")),
-            stopRows.map((stop, index) => (React.createElement(StopRow, { key: `${index}-${stop.output}`, index: index, value: stop.stop, outputValue: stop.output, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index), useNumber: selectedMethod === 'radius' ? true : false })))),
-        React.createElement("div", { className: "jp-gis-symbology-button-container" },
-            React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addStopRow }, "Add Stop"))));
-};
-export default Graduated;