Back end changes for multiple shapes in filters, both drawn and uploaded

appv2/src/UI/Map/OnHoverActivity.tsx

@@ -1,4 +1,4 @@
-import { GeoJSON } from 'react-leaflet';
+import { GeoJSON, useMap } from 'react-leaflet';
 import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import center from '@turf/center';
@@ -10,6 +10,7 @@ export const OnHoverActivity = (props: any) => {
   const geometresForActivity = useSelector((state: any) => state.Map?.userRecordOnHoverRecordRow?.geometry);
   const [centerPointGeometry, setCenterPointGeometry] = useState(null);
   const popupRef = React.useRef(null);
+  const map = useMap();
 
   useEffect(() => {
     try {
@@ -45,5 +46,12 @@ export const OnHoverActivity = (props: any) => {
     }
   }, [centerPointGeometry]);
 
+
+  map.on('popupopen', function(e) {
+    var px = map.project(e.target._popup._latlng); // find the pixel location on the map where the popup anchor is
+    px.y += (e.target._popup._container.clientHeight * 6  )
+    map.panTo(map.unproject(px),{animate: true}); // pan to new center
+});
+
   return centerPointGeometry !== null ? <GeoJSON ref={popupRef} key={'asdf'} data={centerPointGeometry} /> : null;
 };

appv2/src/UI/Overlay/Records/RecordSet.css

@@ -105,7 +105,8 @@ td {
 }
 
 .filterSelect {
-  width: 100px;
+  /*width: 100px;*/
+  max-width: 150px;
 }
 
 .recordSet_footer {

appv2/src/UI/Overlay/Records/RecordSet.tsx

@@ -77,11 +77,21 @@ export const RecordSet = (props) => {
                 <Button
                   onClick={() => {
                     dispatch({
-                      type: RECORDSETS_TOGGLE_VIEW_FILTER,
+                      type: RECORDSETS_TOGGLE_VIEW_FILTER
                     });
                   }}
                   variant="contained">
-                  {!viewFilters?  (<><VisibilityIcon /><FilterAltIcon/></>) : (<><VisibilityOffIcon /><FilterAltIcon/></>)}
+                  {!viewFilters ? (
+                    <>
+                      <VisibilityIcon />
+                      <FilterAltIcon />
+                    </>
+                  ) : (
+                    <>
+                      <VisibilityOffIcon />
+                      <FilterAltIcon />
+                    </>
+                  )}
                 </Button>
               </div>
               <div className="recordSet_new_filter_button">
@@ -111,12 +121,12 @@ export const RecordSet = (props) => {
                   <tr>
                     <th>Filter type</th>
                     <th>Operator</th>
-                    <th>Field</th>
+                    <th>Filter On</th>
                     <th>Value</th>
                     <th></th>
                   </tr>
                   {userSettingsState?.recordSets?.[props.setID]?.tableFilters.map((filter: any, i) => {
-                    return <Filter key={'filterIndex' + i} type="data" setID={props.setID} id={filter.id} />;
+                    return <Filter key={'filterIndex' + i} setID={props.setID} id={filter.id} />;
                   })}
                 </table>
               ) : (
@@ -184,6 +194,9 @@ const RecordSetFooter = (props) => {
 
 const Filter = (props) => {
   const userSettingsState = useSelector((state: any) => state.UserSettings);
+  const serverBoundariesToDisplay = useSelector((state: any) => state.Map.serverBoundaries)?.map((boundary) => {
+    return { label: boundary.title, value: boundary.id };
+  });
   console.dir(userSettingsState);
 
   const filterColumns =
@@ -195,6 +208,10 @@ const Filter = (props) => {
   });
   const dispatch = useDispatch();
 
+  const filterTypeInState = userSettingsState?.recordSets?.[props.setID]?.tableFilters?.find(
+    (filter) => filter.id === props.id
+  )?.filterType;
+
   const valueInState = userSettingsState?.recordSets?.[props.setID]?.tableFilters?.find(
     (filter) => filter.id === props.id
   )?.filter;
@@ -222,33 +239,142 @@ const Filter = (props) => {
     });
   };
 
+  let input = null;
+  switch (filterTypeInState) {
+    case 'tableFilter':
+      input = (
+        <input
+          key={'banana' + props.id}
+          ref={value}
+          className="filterSelect"
+          onChange={(e) => {
+            console.log('it changed');
+            debouncedUpdate(e.target.value);
+          }}
+          type="text"
+          value={valueInState}
+          //defaultValue={valueInState}
+        />
+      );
+      break;
+    case 'spatialFilterUploaded':
+      input = (
+        <select
+          className="filterSelect"
+          key={'filterType' + props.name}
+          value={valueInState}
+          onChange={(e) => {
+            console.dir(e.target);
+
+            dispatch({
+              type: RECORDSET_UPDATE_FILTER,
+              payload: {
+                setID: props.setID,
+                filterID: props.id,
+                filter: e.target.value
+              }
+            });
+          }}>
+          {serverBoundariesToDisplay.map((option) => {
+            return (
+              <option key={option.value + option.label} value={option.value}>
+                {option.label}
+              </option>
+            );
+          })}
+        </select>
+      );
+
+      break;
+    default:
+      null;
+  }
+
   return (
     <tr>
-      <td>Data</td>
-      <select
-        className="filterSelect"
-        key={'operand' + props.name}
-        value={operatorInState}
-        onChange={(e) => {
-          console.dir(e.target.value);
+      <td>
+        <select
+          className="filterTypeSelect"
+          key={'filterTypeSelect' + props.name}
+          value={filterTypeInState}
+          onChange={(e) => {
+            console.dir(e.target.value);
 
-          dispatch({
-            type: RECORDSET_UPDATE_FILTER,
-            payload: {
-              filterType: 'tableFilter',
-              setID: props.setID,
-              filterID: props.id,
-              operator: e.target.value
-            }
-          });
-        }}>
-        <option key={Math.random()} value={'CONTAINS'} label={'CONTAINS'}>
-          CONTAINS
-        </option>
-        <option key={Math.random()} value={'DOES NOT CONTAIN'} label={'DOES NOT CONTAIN'}>
-          DOES NOT CONTAIN
-        </option>
-      </select>
+            dispatch({
+              type: RECORDSET_UPDATE_FILTER,
+              payload: {
+                filterType: e.target.value,
+                setID: props.setID,
+                filterID: props.id
+                //operator: e.target.value
+              }
+            });
+          }}>
+          <option key={Math.random()} value={'tableFilter'} label={'Field/Column'}>
+            Field/Column
+          </option>
+          <option key={Math.random()} value={'spatialFilterDrawn'} label={'Spatial - Drawn'}>
+            Spatial - Drawn
+          </option>
+          <option key={Math.random()} value={'spatialFilterUploaded'} label={'Spatial - Uploaded'}>
+            Spatial - Uploaded
+          </option>
+        </select>
+      </td>
+      <td>
+        <select
+          className="filterSelect"
+          key={'operand' + props.name}
+          value={operatorInState}
+          onChange={(e) => {
+            console.dir(e.target.value);
+
+            dispatch({
+              type: RECORDSET_UPDATE_FILTER,
+              payload: {
+                //filterType: 'tableFilter',
+                setID: props.setID,
+                filterID: props.id,
+                operator: e.target.value
+              }
+            });
+          }}>
+          {
+            {
+              tableFilter: (
+                <>
+                  <option key={Math.random()} value={'CONTAINS'} label={'CONTAINS'}>
+                    CONTAINS
+                  </option>
+                  <option key={Math.random()} value={'DOES NOT CONTAIN'} label={'DOES NOT CONTAIN'}>
+                    DOES NOT CONTAIN
+                  </option>
+                </>
+              ),
+              spatialFilterDrawn: (
+                <>
+                  <option key={Math.random()} value={'CONTAINED IN'} label={'CONTAINED IN'}>
+                  CONTAINED IN
+                  </option>
+                  <option key={Math.random()} value={'NOT CONTAINED IN'} label={'NOT CONTAINED IN'}>
+                    NOT CONTAINED IN
+                  </option>
+                </>
+              ),
+              spatialFilterUploaded: (
+                <>
+                  <option key={Math.random()} value={'CONTAINED IN'} label={'CONTAINED IN'}>
+                    CONAINED IN
+                  </option>
+                  <option key={Math.random()} value={'NOT CONTAINED IN'} label={'NOT CONTAINED IN'}>
+                    NOT CONTAINED IN
+                  </option>
+                </>
+              )
+            }[filterTypeInState]
+          }
+        </select>
+      </td>
       <td>
         <select
           className="filterSelect"
@@ -267,33 +393,24 @@ const Filter = (props) => {
               }
             });
           }}>
-          {filterOptions.map((option) => {
-            return (
-              <option key={option.value + option.label} value={option.value}>
-                {option.label}
-              </option>
-            );
-          })}
+          {filterTypeInState === 'tableFilter' ? (
+            filterOptions.map((option) => {
+              return (
+                <option key={option.value + option.label} value={option.value}>
+                  {option.label}
+                </option>
+              );
+            })
+          ) : (
+            <option key={props.id + 'SHAPEOPTION'} value={'SHAPE'}>
+              SHAPE
+            </option>
+          )}
         </select>
       </td>
-      {props.type === 'data' ? (
-        <td>
-          <input
-            key={'banana' + props.id}
-            ref={value}
-            className="filterSelect"
-            onChange={(e) => {
-              console.log('it changed');
-              debouncedUpdate(e.target.value);
-            }}
-            type="text"
-            value={valueInState}
-            //defaultValue={valueInState}
-          />
-        </td>
-      ) : (
-        <></>
-      )}
+      <td>
+        {input}
+      </td>
       <td className="deleteButtonCell">
         <Button
           className={'deleteButton'}

appv2/src/state/actions.tsx

@@ -162,6 +162,7 @@ export const RECORDSET_ADD_FILTER = 'RECORDSET_ADD_FILTER'
 export const RECORDSET_REMOVE_FILTER = 'RECORDSET_REMOVE_FILTER'
 export const RECORDSET_UPDATE_FILTER = 'RECORDSET_UPDATE_FILTER'
 export const RECORDSET_CLEAR_FILTERS = 'RECORDSET_CLEAR_FILTERS'
+export const INIT_SERVER_BOUNDARIES_GET = 'INIT_SERVER_BOUNDARIES_GET'
 
 export const USER_SETTINGS_ADD_RECORD_SET_REQUEST = 'USER_SETTINGS_ADD_RECORD_SET_REQUEST';
 export const USER_SETTINGS_ADD_RECORD_SET_SUCCESS = 'USER_SETTINGS_ADD_RECORD_SET_SUCCESS';

appv2/src/state/reducers/map.ts

@@ -44,7 +44,8 @@ import {
   RECORDSET_UPDATE_FILTER,
   RECORDSET_REMOVE_FILTER,
   RECORDSETS_TOGGLE_VIEW_FILTER,
-  USER_HOVERED_RECORD
+  USER_HOVERED_RECORD,
+  INIT_SERVER_BOUNDARIES_GET
 } from '../actions';
 
 import { AppConfig } from '../config';
@@ -468,6 +469,13 @@ function createMapReducer(configuration: AppConfig): (MapState, AnyAction) => Ma
         })
         return nextState;
       }
+      case INIT_SERVER_BOUNDARIES_GET: {
+        const nextState = createNextState(state, (draftState) => {
+          //draftState.layers[action.payload.setID].loaded = false;
+          draftState.serverBoundaries = action.payload.data;
+        })
+        return nextState;
+      }
       case PAGE_OR_LIMIT_UPDATE: {
         const id = action.payload.setID;
         return {