FIX: Table view not synchronizing with map view search dropdown (#2024)

origam · Oct 5, 2023 · 05c7506 · 05c7506
1 parent a8a3b21
commit 05c7506
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/Table.tsx b/frontend-html/src/gui/Components/ScreenElements/Table/Table.tsx
@@ -275,7 +275,8 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
     // TODO: Refactor to take real scrollbar sizes
     //const freeColIndex = columnIdx + this.fixedColumnCount;
     const {gridDimensions} = this.props;
-    const SCROLLBAR_SIZE = 20;
+    const SCROLLBAR_SIZE = 24;
+    const ROW_HEIGHT = 25;
     if (this.elmScroller) {
       const top = gridDimensions.getRowTop(rowIdx);
       const bottom = gridDimensions.getRowBottom(rowIdx);
@@ -295,9 +296,12 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
       if (top - this.elmScroller.scrollTop < 0) {
         this.elmScroller.scrollTo({scrollTop: top});
       }
-      if (bottom - this.elmScroller.scrollTop > this.contentBounds.height - SCROLLBAR_SIZE) {
+      if (
+        bottom - this.elmScroller.scrollTop > this.contentBounds.height - 
+        SCROLLBAR_SIZE
+      ) {
         this.elmScroller.scrollTo({
-          scrollTop: bottom - this.contentBounds.height + SCROLLBAR_SIZE,
+          scrollTop: bottom - this.contentBounds.height + SCROLLBAR_SIZE + ROW_HEIGHT ,
         });
       }
     }

diff --git a/frontend-html/src/modules/DataView/Perspective/MapPerspective/stores/MapObjectsStore.ts b/frontend-html/src/modules/DataView/Perspective/MapPerspective/stores/MapObjectsStore.ts
@@ -29,6 +29,7 @@ import { getFormScreenLifecycle } from "model/selectors/FormScreen/getFormScreen
 import _ from "lodash";
 import { getDataView } from "model/selectors/DataView/getDataView";
 import { getSelectedRowId } from "model/selectors/TablePanelView/getSelectedRowId";
+import { getTablePanelView } from "model/selectors/TablePanelView/getTablePanelView";
 
 export class MapObjectsStore {
   constructor(private root: MapRootStore) {
@@ -158,6 +159,7 @@ export class MapObjectsStore {
   handleLayerClick(id: string) {
     if (this.setup.isReadOnlyView) {
       getDataView(this.dataView).setSelectedRowId(id);
+      getTablePanelView(this.dataView).scrollToCurrentRow();
       this.search.selectSearchResultById(id);
       this.navigationStore.highlightSelectedSearchResult();
     }

diff --git a/frontend-html/src/modules/DataView/Perspective/MapPerspective/stores/MapSearchStore.ts b/frontend-html/src/modules/DataView/Perspective/MapPerspective/stores/MapSearchStore.ts
@@ -20,11 +20,17 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 import { action, computed, observable } from "mobx";
 import { IMapObject } from "./MapObjectsStore";
 import { MapRootStore } from "./MapRootStore";
+import { getDataView } from "model/selectors/DataView/getDataView";
+import { getTablePanelView } from "model/selectors/TablePanelView/getTablePanelView";
 
 export class SearchStore {
   constructor(private root: MapRootStore) {
   }
 
+  get dataView() {
+    return this.root.dataView;
+  }
+
   get navigationStore() {
     return this.root.mapNavigationStore;
   }
@@ -148,6 +154,8 @@ export class SearchStore {
 
   @action.bound
   handleSearchResultClick(event: any, resultId: string) {
+    getDataView(this.dataView).setSelectedRowId(resultId);
+    getTablePanelView(this.dataView).scrollToCurrentRow();
     this.selectSearchResultById(resultId);
     this.navigationStore.fitToSelectedSearchResult();
     this.navigationStore.highlightSelectedSearchResult();