geodata: move info about record limits depending on the size of data into map view (WIP)

packages/nc-gui/components/smartsheet/Map.vue

@@ -14,7 +14,8 @@ const route = useRoute()
 const router = useRouter()
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
-const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn, addEmptyRow } = useMapViewStoreOrThrow()
+const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn, addEmptyRow, syncCount, paginationData } =
+  useMapViewStoreOrThrow()
 
 const markersClusterGroupRef = ref<L.MarkerClusterGroup>()
 const mapContainerRef = ref<HTMLElement>()
@@ -187,11 +188,28 @@ watch(view, async (nextView) => {
     await loadMapData()
   }
 })
+
+const count = computed(() => paginationData.value.totalRows)
+
+syncCount()
 </script>
 
 <template>
   <div class="flex flex-col h-full w-full no-underline">
-    <div id="mapContainer" ref="mapContainerRef"></div>
+    <div id="mapContainer" ref="mapContainerRef">
+      <a-tooltip placement="bottom" class="tooltip">
+        <template #title>
+          <span v-if="count > 1000"> You're over the limit. </span>
+          <span v-else> You're getting close to the limit. </span>
+          <span> The limit of markers shown in a Map View is 1000 records. </span>
+        </template>
+
+        <div v-if="count > 900" class="nc-warning-info flex min-w-32px h-32px items-center gap-1 px-2 bg-white">
+          <div>{{ count }} records</div>
+          <mdi-map-marker-alert />
+        </div>
+      </a-tooltip>
+    </div>
   </div>
 
   <Suspense>
@@ -240,4 +258,14 @@ watch(view, async (nextView) => {
   max-height: 255px;
   overflow: scroll;
 }
+.tooltip {
+  height: 2rem;
+  max-width: fit-content;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 10px;
+  z-index: 500;
+  cursor: default;
+}
 </style>

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -37,8 +37,6 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
 
-    <LazySmartsheetToolbarMapRowsLimits v-if="isMap" />
-
     <LazySmartsheetToolbarShareView v-if="(isForm || isGrid || isKanban || isGallery) && !isPublic" />
 
     <LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />

packages/nc-gui/components/smartsheet/toolbar/MapRowsLimits.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-// import { ActiveViewInj, MetaInj, inject, useViewData } from '#imports'
-
-
-// const meta = inject(MetaInj)
-// const view = inject(ActiveViewInj)
 const { syncCount, paginationData } = useMapViewStoreOrThrow()
 
 const count = computed(() => {

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -6,8 +6,6 @@ import type { Row } from '~/lib'
 
 export const geodataToggleState = reactive({ show: false })
 
-const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
-
 // const { project, isSharedBase } = useProject()
 
 const formatData = (list: Row[]) =>
@@ -35,10 +33,6 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
 
     const geoDataFieldColumn = ref<ColumnType | undefined>()
 
-    const view = inject(ActiveViewInj)
-
-    // const { syncCount } = useViewData(meta, view!)
-
     const appInfoDefaultLimit = 1000
 
     const paginationData = ref<PaginatedType>({ page: 1, pageSize: appInfoDefaultLimit })