feat: keep the geometry selected highlighted

src/BrowseComponent.tsx

@@ -54,6 +54,7 @@ export interface IMuiVirtualizedTableProps {
   isRetrievingMoreFeature: any;
   handleRetrieveMoreFeature: any;
   displayedRowCount: any;
+  selectedFeature: any;
 }
 
 class MuiVirtualizedTable extends React.PureComponent<IMuiVirtualizedTableProps> {
@@ -70,13 +71,21 @@ class MuiVirtualizedTable extends React.PureComponent<IMuiVirtualizedTableProps>
 
   getRowStyle = ({ index }: { index: number }) => {
     if (index >= 0) {
-      const { rowGetter, highlightFeature } = this.props;
+      const { rowGetter, highlightFeature, selectedFeature } = this.props;
       const rowData = rowGetter({ index });
-      if (get(highlightFeature, 'id') === get(rowData, 'id')) {
+      if (
+        get(selectedFeature, 'id') !== get(highlightFeature, 'id') &&
+        get(highlightFeature, 'id') === get(rowData, 'id')
+      ) {
         return {
           backgroundColor: '#eeeeee'
         };
       }
+      if (get(selectedFeature, 'id') === get(rowData, 'id')) {
+        return {
+          backgroundColor: '#757575'
+        };
+      }
     }
     return {};
   };
@@ -253,6 +262,7 @@ export interface IBrowseComponentProps {
   highlightFeature: any;
   isRetrievingMoreFeature: () => boolean;
   handleRetrieveMoreFeature: () => Promise<void>;
+  selectedFeature: any;
 }
 
 function BrowseComponent({
@@ -262,7 +272,8 @@ function BrowseComponent({
   handleHoverFeature,
   highlightFeature,
   isRetrievingMoreFeature,
-  handleRetrieveMoreFeature
+  handleRetrieveMoreFeature,
+  selectedFeature
 }: IBrowseComponentProps) {
   /**
    * Return an object with its id and all its properties
@@ -302,6 +313,7 @@ function BrowseComponent({
       highlightFeature={highlightFeature}
       isRetrievingMoreFeature={isRetrievingMoreFeature}
       handleRetrieveMoreFeature={handleRetrieveMoreFeature}
+      selectedFeature={selectedFeature}
       columns={[
         // {
         //   width: 100,

src/FormComponent.tsx

@@ -258,6 +258,8 @@ export const FormComponent: FC<IProps> = ({
 };
 
 const Fields = ({ control, register }: Partial<UseFormReturn<IFormInput>>) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   const { fields, append, remove } = useFieldArray({
     control,
     name: 'additionnalParameters'

src/MapFeatureComponent.tsx

@@ -20,6 +20,7 @@ export interface IProps {
 export interface IState {
   bounds: L.LatLngBounds;
   featureHover: any;
+  featureSelected: string;
 }
 
 export default class MapFeatureComponent extends React.Component<
@@ -54,7 +55,8 @@ export default class MapFeatureComponent extends React.Component<
     const bounds = featureGeoJSONs.getBounds();
     this.state = {
       bounds,
-      featureHover: null
+      featureHover: null,
+      featureSelected: null
     };
   }
 
@@ -122,7 +124,13 @@ export default class MapFeatureComponent extends React.Component<
 
   onClick = (e: LeafletMouseEvent) => {
     const productId = e.propagatedFrom.feature.id;
+    e.layer.setStyle(MapFeatureComponent.HIGHLIGHT_EXTENT_STYLE);
+    e.layer.bringToFront();
     this.props.handleClickFeature(productId);
+
+    this.setState({
+      featureSelected: productId
+    });
   };
 
   /**
@@ -131,10 +139,11 @@ export default class MapFeatureComponent extends React.Component<
    */
   getStyle = (feature: any) => {
     const { highlightFeature } = this.props;
-    const { featureHover } = this.state;
+    const { featureHover, featureSelected } = this.state;
     if (
       get(highlightFeature, 'id') === feature.id ||
-      featureHover === feature.id
+      featureHover === feature.id ||
+      featureSelected === feature.id
     ) {
       return MapFeatureComponent.HIGHLIGHT_EXTENT_STYLE;
     }

src/ModalComponent.tsx

@@ -45,6 +45,7 @@ export interface IState {
   highlightOnTableFeature: any;
   zoomFeature: any;
   features: any;
+  selectedFeature: any;
 }
 
 function Transition(props: any) {
@@ -62,7 +63,8 @@ export default class ModalComponent extends React.Component<IProps, IState> {
       displayFeature: null,
       highlightOnMapFeature: null,
       highlightOnTableFeature: null,
-      zoomFeature: null
+      zoomFeature: null,
+      selectedFeature: null
     };
   }
 
@@ -81,11 +83,18 @@ export default class ModalComponent extends React.Component<IProps, IState> {
   };
 
   handleClickFeature = (productId: string) => {
-    const feature = this.getFeature(productId);
-    if (feature) {
+    if (!productId) {
       this.setState({
-        displayFeature: feature
+        selectedFeature: null
       });
+    } else {
+      const feature = this.getFeature(productId);
+      if (feature) {
+        this.setState({
+          displayFeature: feature,
+          selectedFeature: feature
+        });
+      }
     }
   };
 
@@ -141,7 +150,8 @@ export default class ModalComponent extends React.Component<IProps, IState> {
       zoomFeature,
       highlightOnMapFeature,
       highlightOnTableFeature,
-      displayFeature
+      displayFeature,
+      selectedFeature
     } = this.state;
     return (
       <Modal
@@ -210,6 +220,7 @@ export default class ModalComponent extends React.Component<IProps, IState> {
                   handleHoverFeature={this.handleHoverTableFeature}
                   isRetrievingMoreFeature={isRetrievingMoreFeature}
                   handleRetrieveMoreFeature={handleRetrieveMoreFeature}
+                  selectedFeature={selectedFeature}
                 />
               </div>
             </div>