[Fix] Fill and Stroke color working in Graduated symbology (#952)

* Making Fill and Stroke colore working in Graduated symbology

* remove manual fill color input

Author: nakul-py

examples/earthquakes.jGIS

@@ -109,79 +109,7 @@
             8.1,
             8.1
           ],
-          "circle-stroke-color": [
-            "interpolate",
-            [
-              "linear"
-            ],
-            [
-              "get",
-              "mag"
-            ],
-            1.2522222222222221,
-            [
-              68.0,
-              1.0,
-              84.0,
-              1.0
-            ],
-            1.5544444444444445,
-            [
-              71.0,
-              44.0,
-              122.0,
-              1.0
-            ],
-            1.8566666666666667,
-            [
-              59.0,
-              81.0,
-              139.0,
-              1.0
-            ],
-            2.158888888888889,
-            [
-              44.0,
-              113.0,
-              142.0,
-              1.0
-            ],
-            2.4611111111111112,
-            [
-              33.0,
-              144.0,
-              141.0,
-              1.0
-            ],
-            2.786666666666666,
-            [
-              39.0,
-              173.0,
-              129.0,
-              1.0
-            ],
-            3.166666666666667,
-            [
-              92.0,
-              200.0,
-              99.0,
-              1.0
-            ],
-            3.723333333333333,
-            [
-              170.0,
-              220.0,
-              50.0,
-              1.0
-            ],
-            8.1,
-            [
-              253.0,
-              231.0,
-              37.0,
-              1.0
-            ]
-          ],
+          "circle-stroke-color": "#3399CC",
           "circle-stroke-width": 1.25,
           "fill-color": [
             "interpolate",
@@ -256,89 +184,18 @@
               1.0
             ]
           ],
-          "stroke-color": [
-            "interpolate",
-            [
-              "linear"
-            ],
-            [
-              "get",
-              "mag"
-            ],
-            1.2522222222222221,
-            [
-              68.0,
-              1.0,
-              84.0,
-              1.0
-            ],
-            1.5544444444444445,
-            [
-              71.0,
-              44.0,
-              122.0,
-              1.0
-            ],
-            1.8566666666666667,
-            [
-              59.0,
-              81.0,
-              139.0,
-              1.0
-            ],
-            2.158888888888889,
-            [
-              44.0,
-              113.0,
-              142.0,
-              1.0
-            ],
-            2.4611111111111112,
-            [
-              33.0,
-              144.0,
-              141.0,
-              1.0
-            ],
-            2.786666666666666,
-            [
-              39.0,
-              173.0,
-              129.0,
-              1.0
-            ],
-            3.166666666666667,
-            [
-              92.0,
-              200.0,
-              99.0,
-              1.0
-            ],
-            3.723333333333333,
-            [
-              170.0,
-              220.0,
-              50.0,
-              1.0
-            ],
-            8.1,
-            [
-              253.0,
-              231.0,
-              37.0,
-              1.0
-            ]
-          ],
+          "stroke-color": "#3399CC",
           "stroke-width": 1.25
         },
         "opacity": 1.0,
         "source": "578fb13e-9c82-4711-91f2-fb3671820583",
         "symbologyState": {
           "colorRamp": "viridis",
-          "method": "radius",
+          "method": "color",
           "mode": "quantile",
           "nClasses": "9",
           "renderType": "Graduated",
+          "reverse": false,
           "value": "mag"
         }
       },

packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx

@@ -44,7 +44,6 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     ColorRampOptions | undefined
   >();
   const [colorManualStyle, setColorManualStyle] = useState({
-    fillColor: '#3399CC',
     strokeColor: '#3399CC',
     strokeWidth: 1.25,
   });
@@ -80,20 +79,13 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
 
   useEffect(() => {
     if (layer?.parameters?.color) {
-      const fillColor = layer.parameters.color['fill-color'];
-      const circleFillColor = layer.parameters.color['circle-fill-color'];
       const strokeColor = layer.parameters.color['stroke-color'];
       const circleStrokeColor = layer.parameters.color['circle-stroke-color'];
 
       const isSimpleColor = (val: any) =>
         typeof val === 'string' && /^#?[0-9A-Fa-f]{3,8}$/.test(val);
 
       setColorManualStyle({
-        fillColor: isSimpleColor(fillColor)
-          ? fillColor
-          : isSimpleColor(circleFillColor)
-            ? circleFillColor
-            : '#3399CC',
         strokeColor: isSimpleColor(strokeColor)
           ? strokeColor
           : isSimpleColor(circleStrokeColor)
@@ -170,12 +162,11 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       newStyle['stroke-color'] = colorExpr;
       newStyle['circle-stroke-color'] = colorExpr;
     } else {
-      newStyle['fill-color'] = undefined;
-      newStyle['circle-fill-color'] = undefined;
-      newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
-      newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
+      // use manual style
     }
 
+    newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
+    newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
     newStyle['stroke-width'] = colorManualStyleRef.current.strokeWidth;
     newStyle['circle-stroke-width'] = colorManualStyleRef.current.strokeWidth;
 
@@ -290,9 +281,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     const newStyle = { ...layer.parameters.color };
 
     if (method === 'color') {
-      delete newStyle['fill-color'];
       delete newStyle['stroke-color'];
-      delete newStyle['circle-fill-color'];
       setColorStopRows([]);
       setColorRampOptions(undefined);
     }
@@ -325,21 +314,11 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
           <div className="jp-gis-layer-symbology-container">
             {symbologyTab === 'color' && (
               <>
-                <div className="jp-gis-symbology-row">
-                  <label>Fill Color:</label>
-                  <input
-                    type="color"
-                    className="jp-mod-styled"
-                    value={colorManualStyle.fillColor}
-                    onChange={e => {
-                      handleReset('color');
-                      setColorManualStyle({
-                        ...colorManualStyle,
-                        fillColor: e.target.value,
-                      });
-                    }}
-                  />
-                </div>
+                <p className="jp-info-text">
+                  Fill color is automatically controlled by the color ramp. To
+                  control fill manually, switch to <strong>Simple</strong>{' '}
+                  symbology.
+                </p>
                 <div className="jp-gis-symbology-row">
                   <label>Stroke Color:</label>
                   <input