@jupytergis/base 0.1.5 → 0.1.7

package/style/symbologyDialog.css

@@ -1,3 +1,8 @@
+select,
+select option {
+  text-transform: capitalize;
+}
+
 .jp-gis-symbology-dialog .jp-Dialog-header {
   font-weight: bold;
 }
@@ -27,10 +32,30 @@
   max-width: 50%;
 }
 
+.jp-gis-color-ramp-div {
+  display: flex;
+  flex: 1 1 50%;
+  max-width: 50%;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.jp-gis-color-ramp-div > .jp-select-wrapper {
+  flex: 1 0 40%;
+}
+
+.jp-gis-color-ramp-div:last-child {
+  flex-shrink: 0;
+}
+
+.jp-gis-color-ramp-div > input {
+  max-width: 25%;
+}
+
 .jp-gis-band-container {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 13px;
 }
 
 .jp-gis-layer-symbology-container {
@@ -45,8 +70,10 @@
   margin-bottom: unset;
 }
 
-.jp-gis-band-container .jp-gis-symbology-row:last-child {
-  margin-bottom: 12px;
+.jp-gis-color-ramp-container {
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
 }
 
 .jp-gis-stop-container {
@@ -120,3 +147,77 @@
     transform: rotate(360deg);
   }
 }
+
+.jp-gis-color-ramp-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  position: absolute;
+  overflow-x: hidden;
+  overflow-y: auto;
+  visibility: hidden;
+  z-index: 40;
+  flex: 1 1 auto;
+  width: 97%;
+  max-height: 375px;
+  background: var(--jp-input-background);
+  padding-left: 8px;
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
+  border-radius: 0;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.jp-gis-open {
+  visibility: visible;
+}
+
+.jp-gis-color-ramp-entry {
+  display: flex;
+  align-items: center;
+  font-size: var(--jp-ui-font-size2);
+  color: var(--jp-ui-font-color0);
+  appearance: none;
+  text-transform: capitalize;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.jp-gis-color-label {
+  color: white;
+  position: absolute;
+  transition: transform 0.3s ease;
+}
+
+.jp-gis-color-ramp-entry:hover .jp-gis-color-label {
+  transform: scale(1.2);
+}
+
+.jp-gis-color-canvas {
+  margin: 0 -7px;
+  border-radius: 4px;
+  width: 100%;
+  max-height: 38px;
+}
+
+.jp-gis-color-canvas-display {
+  width: 100%;
+  height: 30px;
+  visibility: initial;
+}
+
+.jp-gis-canvas-button-wrapper {
+  flex: 1 0 50%;
+  max-width: 50%;
+  position: relative;
+}
+
+#jp-gis-canvas-button.jp-gis-canvas-button {
+  visibility: hidden;
+  margin: 0;
+  padding: 0 1px 0 0;
+  width: 100%;
+}

package/lib/dialogs/components/symbology/BandRendering.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from '../../symbologyDialog';
-declare const BandRendering: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element;
-export default BandRendering;

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;