@jupytergis/base 0.1.2 → 0.1.4

package/lib/mainview/mainView.d.ts

@@ -1,8 +1,6 @@
 import { IJGISLayer, IJGISSource } from '@jupytergis/schema';
 import { User } from '@jupyterlab/services';
-import { FeatureLike } from 'ol/Feature';
 import BaseLayer from 'ol/layer/Base';
-import { Style } from 'ol/style';
 import * as React from 'react';
 import { MainViewModel } from './mainviewmodel';
 interface IProps {
@@ -49,6 +47,14 @@ export declare class MainView extends React.Component<IProps, IStates> {
      */
     updateLayers(layerIds: string[]): void;
     private _updateLayersImpl;
+    /**
+     * Build the map layer.
+     *
+     * @param id - id of the layer.
+     * @param layer - the layer object.
+     * @returns - the map layer.
+     */
+    private _buildMapLayer;
     /**
      * Add a layer to the map.
      *
@@ -57,19 +63,16 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @param index - expected index of the layer.
      */
     addLayer(id: string, layer: IJGISLayer, index: number): Promise<void>;
-    vectorLayerStyleFunc: (currentFeature: FeatureLike, layer: IJGISLayer) => Style | undefined;
+    vectorLayerStyleRuleBuilder: (layer: IJGISLayer) => {
+        style: import("ol/style/flat").FlatStyle | Array<import("ol/style/flat").FlatStyle>;
+        filter?: import("ol/expr/expression").EncodedExpression | undefined;
+        else?: boolean | undefined;
+    }[] | undefined;
     /**
      * Taken from https://openlayers.org/en/latest/examples/webgl-shaded-relief.html
      * @returns
      */
     private hillshadeMath;
-    /**
-     * Move a layer in the stack.
-     *
-     * @param id - id of the layer.
-     * @param index - expected index of the layer.
-     */
-    moveLayer(id: string, index: number | undefined): void;
     /**
      * Update a layer of the map.
      *

package/lib/mainview/mainView.js

@@ -10,7 +10,6 @@ import { fromLonLat, toLonLat } from 'ol/proj';
 import Feature from 'ol/render/Feature';
 import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
-import { Circle, Fill, Stroke, Style } from 'ol/style';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
 import * as React from 'react';
@@ -20,73 +19,52 @@ import { Spinner } from './spinner';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
-        this.vectorLayerStyleFunc = (currentFeature, layer) => {
-            var _a;
-            const layerParameters = layer.parameters;
-            // const flatStyle = {
-            //   'fill-color': 'rgba(255,255,255,0.4)',
-            //   'stroke-color': '#3399CC',
-            //   'stroke-width': 1.25,
-            //   'circle-radius': 5,
-            //   'circle-fill-color': 'rgba(255,255,255,0.4)',
-            //   'circle-stroke-width': 1.25,
-            //   'circle-stroke-color': '#3399CC'
-            // };
-            // TODO: Need to make a version that works with strings as well
-            const operators = {
-                '>': (a, b) => a > b,
-                '<': (a, b) => a < b,
-                '>=': (a, b) => a >= b,
-                '<=': (a, b) => a <= b,
-                '==': (a, b) => a === b,
-                '!=': (a, b) => a !== b
+        this.vectorLayerStyleRuleBuilder = (layer) => {
+            const layerParams = layer.parameters;
+            if (!layerParams) {
+                return;
+            }
+            const defaultStyle = {
+                'fill-color': 'rgba(255,255,255,0.4)',
+                'stroke-color': '#3399CC',
+                'stroke-width': 1.25,
+                'circle-radius': 5,
+                'circle-fill-color': 'rgba(255,255,255,0.4)',
+                'circle-stroke-width': 1.25,
+                'circle-stroke-color': '#3399CC'
             };
-            // TODO: I don't think this will work with fancy color expressions
-            const fill = new Fill({
-                color: layerParameters.type === 'fill' || layerParameters.type === 'circle'
-                    ? layerParameters.color
-                    : 'rgba(0, 0, 0, 0)'
-            });
-            const stroke = new Stroke({
-                color: layerParameters.type === 'line' || layerParameters.type === 'circle'
-                    ? layerParameters.color
-                    : '#392F5A',
-                width: 2
-            });
-            const style = new Style({
-                fill,
-                stroke,
-                image: new Circle({
-                    radius: 5,
-                    fill,
-                    stroke
-                })
-            });
-            if (layer.filters && ((_a = layer.filters) === null || _a === void 0 ? void 0 : _a.appliedFilters.length) !== 0) {
-                const props = currentFeature.getProperties();
-                let shouldDisplayFeature = true;
-                switch (layer.filters.logicalOp) {
-                    case 'any': {
-                        // Display the feature if any filter conditions apply
-                        shouldDisplayFeature = layer.filters.appliedFilters.some(({ feature, operator, value }) => operators[operator](props[feature], value));
-                        break;
-                    }
-                    case 'all': {
-                        // Display the feature only if all the filter conditions apply
-                        shouldDisplayFeature = layer.filters.appliedFilters.every(({ feature, operator, value }) => operators[operator](props[feature], value));
-                        break;
-                    }
-                }
-                if (shouldDisplayFeature) {
-                    return style;
+            const defaultRules = {
+                style: defaultStyle
+            };
+            const layerStyle = Object.assign({}, defaultRules);
+            if (layer.filters && layer.filters.appliedFilters.length !== 0) {
+                const filterExpr = [];
+                // 'Any' and 'All' operators require more than one argument
+                // So if there's only one filter, skip that part to avoid error
+                if (layer.filters.appliedFilters.length === 1) {
+                    layer.filters.appliedFilters.forEach(filter => {
+                        filterExpr.push(filter.operator, ['get', filter.feature], filter.value);
+                    });
                 }
                 else {
-                    return undefined;
+                    filterExpr.push(layer.filters.logicalOp);
+                    // Arguments for "Any" and 'All' need to be wrapped in brackets
+                    layer.filters.appliedFilters.forEach(filter => {
+                        filterExpr.push([
+                            filter.operator,
+                            ['get', filter.feature],
+                            filter.value
+                        ]);
+                    });
                 }
+                layerStyle.filter = filterExpr;
             }
-            else {
-                return style;
+            if (!layerParams.color) {
+                return [layerStyle];
             }
+            const newStyle = Object.assign(Object.assign({}, defaultStyle), layerParams.color);
+            layerStyle.style = newStyle;
+            return [layerStyle];
         };
         /**
          * Taken from https://openlayers.org/en/latest/examples/webgl-shaded-relief.html
@@ -237,16 +215,14 @@ export class MainView extends React.Component {
                     projection: projection.getCode(),
                     zoom
                 };
-                // Update the extent only if has been initially provided.
-                if (currentOptions.extent) {
-                    updatedOptions.extent = view.calculateExtent();
-                }
+                updatedOptions.extent = view.calculateExtent();
                 this._model.setOptions(Object.assign(Object.assign({}, currentOptions), updatedOptions));
             });
             if (JupyterGISModel.getOrderedLayerIds(this._model).length !== 0) {
                 await this._updateLayersImpl(JupyterGISModel.getOrderedLayerIds(this._model));
                 const options = this._model.getOptions();
                 this.updateOptions(options);
+                this._initializedPosition = true;
             }
             this.setState(old => (Object.assign(Object.assign({}, old), { loading: false })));
         }
@@ -447,59 +423,30 @@ export class MainView extends React.Component {
         this._updateLayersImpl(layerIds);
     }
     async _updateLayersImpl(layerIds) {
-        const previousLayerIds = this.getLayers();
-        // We use the reverse order of the list to add the layer from the top to the
-        // bottom.
-        // This is to ensure that the beforeId (layer on top of the one we add/move)
-        // is already added/moved in the map.
-        const reversedLayerIds = layerIds.slice().reverse();
-        for (const layerId of reversedLayerIds) {
+        const mapLayers = [];
+        for (const layerId of layerIds) {
             const layer = this._model.sharedModel.getLayer(layerId);
             if (!layer) {
                 console.log(`Layer id ${layerId} does not exist`);
-                return;
+                continue;
             }
-            // Get the expected index in the map.
-            const currentLayerIds = [...previousLayerIds];
-            let indexInMap = currentLayerIds.length;
-            const nextLayer = layerIds[layerIds.indexOf(layerId) + 1];
-            if (nextLayer !== undefined) {
-                indexInMap = currentLayerIds.indexOf(nextLayer);
-                if (indexInMap === -1) {
-                    indexInMap = currentLayerIds.length;
-                }
-            }
-            if (this.getLayer(layerId)) {
-                this.moveLayer(layerId, indexInMap);
-            }
-            else {
-                await this.addLayer(layerId, layer, indexInMap);
-            }
-            // Remove the element of the previous list as treated.
-            const index = previousLayerIds.indexOf(layerId);
-            if (index > -1) {
-                previousLayerIds.splice(index, 1);
+            const newMapLayer = await this._buildMapLayer(layerId, layer);
+            if (newMapLayer !== undefined) {
+                mapLayers.push(newMapLayer);
             }
         }
-        // Remove the layers not used anymore.
-        previousLayerIds.forEach(layerId => {
-            this._Map.removeLayer(layerId);
-        });
+        this._Map.setLayers(mapLayers);
         this._ready = true;
     }
     /**
-     * Add a layer to the map.
+     * Build the map layer.
      *
      * @param id - id of the layer.
      * @param layer - the layer object.
-     * @param index - expected index of the layer.
+     * @returns - the map layer.
      */
-    async addLayer(id, layer, index) {
+    async _buildMapLayer(id, layer) {
         var _a;
-        if (this.getLayer(id)) {
-            // Layer already exists
-            return;
-        }
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
         const source = this._model.sharedModel.getSource(sourceId);
         if (!source) {
@@ -508,14 +455,14 @@ export class MainView extends React.Component {
         if (!this._sources[sourceId]) {
             await this.addSource(sourceId, source);
         }
-        let newLayer;
+        let newMapLayer;
         let layerParameters;
         // TODO: OpenLayers provides a bunch of sources for specific tile
         // providers, so maybe set up some way to use those
         switch (layer.type) {
             case 'RasterLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new TileLayer({
+                newMapLayer = new TileLayer({
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source]
@@ -524,26 +471,29 @@ export class MainView extends React.Component {
             }
             case 'VectorLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new VectorLayer({
+                newMapLayer = new VectorLayer({
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source],
-                    style: currentFeature => this.vectorLayerStyleFunc(currentFeature, layer)
+                    style: this.vectorLayerStyleRuleBuilder(layer)
                 });
                 break;
             }
             case 'VectorTileLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new VectorTileLayer({
+                if (!layerParameters.color) {
+                    return;
+                }
+                newMapLayer = new VectorTileLayer({
                     opacity: layerParameters.opacity,
-                    source: this._sources[layerParameters.source],
-                    style: currentFeature => this.vectorLayerStyleFunc(currentFeature, layer)
+                    source: this._sources[layerParameters.source]
                 });
+                this.updateLayer(id, layer, newMapLayer);
                 break;
             }
             case 'HillshadeLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new WebGlTileLayer({
+                newMapLayer = new WebGlTileLayer({
                     opacity: 0.3,
                     source: this._sources[layerParameters.source],
                     style: {
@@ -554,7 +504,7 @@ export class MainView extends React.Component {
             }
             case 'ImageLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new ImageLayer({
+                newMapLayer = new ImageLayer({
                     opacity: layerParameters.opacity,
                     source: this._sources[layerParameters.source]
                 });
@@ -570,43 +520,32 @@ export class MainView extends React.Component {
                 if (layerParameters.color) {
                     layerOptions['style'] = { color: layerParameters.color };
                 }
-                newLayer = new WebGlTileLayer(layerOptions);
+                newMapLayer = new WebGlTileLayer(layerOptions);
                 break;
             }
         }
         // OpenLayers doesn't have name/id field so add it
-        newLayer.set('id', id);
+        newMapLayer.set('id', id);
         // we need to keep track of which source has which layers
         this._sourceToLayerMap.set(layerParameters.source, id);
-        this._Map.getLayers().insertAt(index, newLayer);
+        return newMapLayer;
     }
     /**
-     * Move a layer in the stack.
+     * Add a layer to the map.
      *
      * @param id - id of the layer.
+     * @param layer - the layer object.
      * @param index - expected index of the layer.
      */
-    moveLayer(id, index) {
-        // Get the beforeId value according to the expected index.
-        const currentLayerIds = this.getLayers();
-        let beforeId = undefined;
-        if (!(index === undefined) && index < currentLayerIds.length) {
-            beforeId = currentLayerIds[index];
-        }
-        const layerArray = this._Map.getLayers().getArray();
-        const movingLayer = this.getLayer(id);
-        if (!movingLayer || !index || !beforeId) {
+    async addLayer(id, layer, index) {
+        if (this.getLayer(id)) {
+            // Layer already exists
             return;
         }
-        const indexOfMovingLayer = layerArray.indexOf(movingLayer);
-        layerArray.splice(indexOfMovingLayer, 1);
-        const beforeLayer = this.getLayer(beforeId);
-        if (!beforeLayer) {
-            return;
+        const newMapLayer = await this._buildMapLayer(id, layer);
+        if (newMapLayer !== undefined) {
+            this._Map.getLayers().insertAt(index, newMapLayer);
         }
-        const indexOfBeforeLayer = layerArray.indexOf(beforeLayer);
-        layerArray.splice(indexOfBeforeLayer, 0, movingLayer);
-        this._Map.setLayers(layerArray);
     }
     /**
      * Update a layer of the map.
@@ -633,13 +572,13 @@ export class MainView extends React.Component {
             case 'VectorLayer': {
                 const layerParams = layer.parameters;
                 mapLayer.setOpacity(layerParams.opacity || 1);
-                mapLayer.setStyle(currentFeature => this.vectorLayerStyleFunc(currentFeature, layer));
+                mapLayer.setStyle(this.vectorLayerStyleRuleBuilder(layer));
                 break;
             }
             case 'VectorTileLayer': {
                 const layerParams = layer.parameters;
                 mapLayer.setOpacity(layerParams.opacity || 1);
-                mapLayer.setStyle(currentFeature => this.vectorLayerStyleFunc(currentFeature, layer));
+                mapLayer.setStyle(this.vectorLayerStyleRuleBuilder(layer));
                 break;
             }
             case 'HillshadeLayer': {
@@ -680,14 +619,19 @@ export class MainView extends React.Component {
     }
     updateOptions(options) {
         const view = this._Map.getView();
-        // use the extent if provided.
-        if (options.extent) {
+        // Use the extent only if explicitly requested (QGIS files).
+        if (options.extent && options.useExtent) {
             view.fit(options.extent);
         }
         else {
             const centerCoord = fromLonLat([options.longitude || 0, options.latitude || 0], this._Map.getView().getProjection());
             this._Map.getView().setZoom(options.zoom || 0);
             this._Map.getView().setCenter(centerCoord);
+            // Save the extent if it does not exists, to allow proper export to qgis.
+            if (options.extent === undefined) {
+                options.extent = view.calculateExtent();
+                this._model.setOptions(options);
+            }
         }
         view.setRotation(options.bearing || 0);
     }
@@ -727,12 +671,14 @@ export class MainView extends React.Component {
             }
             else {
                 const mapLayer = this.getLayer(change.id);
-                if (mapLayer &&
-                    JupyterGISModel.getOrderedLayerIds(this._model).includes(change.id)) {
-                    this.updateLayer(change.id, layer, mapLayer);
-                }
-                else {
-                    this.updateLayers(JupyterGISModel.getOrderedLayerIds(this._model));
+                const layerTree = JupyterGISModel.getOrderedLayerIds(this._model);
+                if (mapLayer) {
+                    if (layerTree.includes(change.id)) {
+                        this.updateLayer(change.id, layer, mapLayer);
+                    }
+                    else {
+                        this.updateLayers(layerTree);
+                    }
                 }
             }
         });

package/lib/panelview/components/layers.js

@@ -132,8 +132,8 @@ function LayerGroupComponent(props) {
         setId(DOMUtils.createDomID());
         const getExpandedState = async () => {
             var _a;
-            const groupState = await state.fetch(group.name);
-            setOpen(groupState ? ((_a = groupState['expanded']) !== null && _a !== void 0 ? _a : false) : false);
+            const groupState = await state.fetch(`jupytergis:${group.name}`);
+            setOpen((_a = groupState.expanded) !== null && _a !== void 0 ? _a : false);
         };
         getExpandedState();
     }, []);
@@ -156,7 +156,7 @@ function LayerGroupComponent(props) {
         onClick({ type: 'group', item: name, nodeId: childId, event });
     };
     const handleExpand = async () => {
-        state.save(group.name, { expanded: !open });
+        state.save(`jupytergis:${group.name}`, { expanded: !open });
         setOpen(!open);
     };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_GROUP_CLASS}`, draggable: true, onDragStart: Private.onDragStart, onDragEnd: Private.onDragEnd, "data-id": name },

package/lib/tools.d.ts

@@ -23,3 +23,12 @@ export declare function deepCopy<T = IDict<any>>(value: T): T;
 export declare function createDefaultLayerRegistry(layerBrowserRegistry: IJGISLayerBrowserRegistry): void;
 export declare function getLayerTileInfo(tileUrl: string, mapOptions: Pick<IJGISOptions, 'latitude' | 'longitude' | 'extent' | 'zoom'>, urlParameters?: IDict<string>): Promise<VectorTile>;
 export declare function getSourceLayerNames(tileUrl: string, urlParameters?: IDict<string>): Promise<string[]>;
+export interface IParsedStyle {
+    fillColor: string;
+    strokeColor: string;
+    strokeWidth: number;
+    joinStyle: string;
+    capStyle: string;
+    radius?: number;
+}
+export declare function parseColor(type: string, style: any): IParsedStyle | undefined;

package/lib/tools.js

@@ -170,6 +170,10 @@ function getTileCoordinates(latDeg, lonDeg, zoom) {
     const n = 1 << zoom;
     const xTile = Math.floor(((lonDeg + 180.0) / 360.0) * n);
     const yTile = Math.floor((n * (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI)) / 2);
+    // Check if either xTile or yTile is NaN
+    if (isNaN(xTile) || isNaN(yTile)) {
+        return { xTile: 0, yTile: 0 };
+    }
     return { xTile, yTile };
 }
 export async function getLayerTileInfo(tileUrl, mapOptions, urlParameters) {
@@ -213,3 +217,37 @@ export async function getSourceLayerNames(tileUrl, urlParameters) {
     const layerNames = Object.keys(tile.layers);
     return layerNames;
 }
+export function parseColor(type, style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    if (!type || !style) {
+        return;
+    }
+    const type2 = type === 'circle' ? 'circle' : 'default';
+    const shapeStyles = {
+        circle: {
+            radius: (_a = style['circle-radius']) !== null && _a !== void 0 ? _a : 5,
+            fillColor: (_b = style['circle-fill-color']) !== null && _b !== void 0 ? _b : '#3399CC',
+            strokeColor: (_c = style['circle-stroke-color']) !== null && _c !== void 0 ? _c : '#3399CC',
+            strokeWidth: (_d = style['circle-stroke-width']) !== null && _d !== void 0 ? _d : 1.25,
+            joinStyle: (_e = style['circle-stroke-line-join']) !== null && _e !== void 0 ? _e : 'round',
+            capStyle: (_f = style['circle-stroke-line-cap']) !== null && _f !== void 0 ? _f : 'round'
+        },
+        default: {
+            fillColor: (_g = style['fill-color']) !== null && _g !== void 0 ? _g : '[255, 255, 255, 0.4]',
+            strokeColor: (_h = style['stroke-color']) !== null && _h !== void 0 ? _h : '#3399CC',
+            strokeWidth: (_j = style['stroke-width']) !== null && _j !== void 0 ? _j : 1.25,
+            capStyle: (_k = style['stroke-line-cap']) !== null && _k !== void 0 ? _k : 'round',
+            joinStyle: (_l = style['stroke-line-join']) !== null && _l !== void 0 ? _l : 'round'
+        }
+    };
+    const parsedStyle = shapeStyles[type2];
+    Object.assign(parsedStyle, {
+        radius: parsedStyle.radius,
+        fillColor: parsedStyle.fillColor,
+        strokeColor: parsedStyle.strokeColor,
+        strokeWidth: parsedStyle.strokeWidth,
+        joinStyle: parsedStyle.joinStyle,
+        capStyle: parsedStyle.capStyle
+    });
+    return parsedStyle;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -16,7 +16,7 @@
     "name": "JupyterGIS contributors"
   },
   "files": [
-    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,data,wasm}",
     "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
@@ -27,10 +27,11 @@
     "url": "https://github.com/geojupyter/jupytergis.git"
   },
   "scripts": {
-    "build": "jlpm run build:gallery && tsc -b",
+    "build": "jlpm run build:gallery && tsc -b && jlpm run cp:gdal",
     "build:gallery": "python rasterlayer_gallery_generator.py",
+    "cp:gdal": "cp ../../node_modules/gdal3.js/dist/package/gdal3WebAssembly.data lib && cp ../../node_modules/gdal3.js/dist/package/gdal3WebAssembly.wasm lib",
     "build:prod": "jlpm run clean && jlpm run build",
-    "build:dev": "tsc -b",
+    "build:dev": "tsc -b && jlpm run cp:gdal",
     "clean": "rimraf tsconfig.tsbuildinfo",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:all": "jlpm run clean:lib",
@@ -40,7 +41,7 @@
     "@deathbeds/jupyterlab-rjsf": "^1.1.0",
     "@jupyter/docprovider": "^2.0.0",
     "@jupyter/ydoc": "^1.0.0",
-    "@jupytergis/schema": "^0.1.2",
+    "@jupytergis/schema": "^0.1.4",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",
     "@jupyterlab/completer": "^4.2.4",

package/style/symbologyDialog.css

@@ -21,7 +21,8 @@
   flex: 0 1 20%;
 }
 
-.jp-gis-symbology-row > .jp-select-wrapper {
+.jp-gis-symbology-row > .jp-select-wrapper,
+.jp-gis-symbology-row > .jp-mod-styled {
   flex: 1 0 50%;
   max-width: 50%;
 }
@@ -35,6 +36,13 @@
 .jp-gis-layer-symbology-container {
   display: flex;
   flex-direction: column;
+  gap: 13px;
+  border-top: 1px solid var(--jp-border-color2);
+  padding-top: 8px;
+}
+
+.jp-gis-layer-symbology-container .jp-select-wrapper {
+  margin-bottom: unset;
 }
 
 .jp-gis-band-container .jp-gis-symbology-row:last-child {
@@ -66,12 +74,12 @@
   height: 32px;
 }
 
-.jp-gis-color-row > input[type='number'] {
+.jp-gis-color-row-value-input {
   flex: 0 1 18%;
   min-width: 0px;
 }
 
-.jp-gis-color-row > input[type='color'] {
+.jp-gis-color-row-output-input {
   flex-grow: 1;
 }