Live map fixes

Fix google maps
Fix issue with tabs

(cherry picked from commit 1fa94fab77bf15b69f1c4e7ce68b99305d40806f)

Author: tabiodun

src/components/tabs/LightTab.vue

@@ -14,30 +14,15 @@ export default defineComponent({
     selected: { type: Boolean },
     disabled: { type: Boolean, default: false },
   },
-  setup(props) {
+  setup() {
     const index = ref(0);
-    const isActive = ref(false);
+    const isActive = computed(() => index.value === tabs.selectedIndex);
 
     const tabs = inject('TabsProvider');
 
-    watch(
-      () => tabs.selectedIndex,
-      () => {
-        isActive.value = index.value === tabs.selectedIndex;
-      },
-    );
-
-    watch(
-      () => props.selected,
-      () => {
-        tabs.selectedIndex = index;
-      },
-    );
-
     onBeforeMount(() => {
       index.value = tabs.count;
       tabs.count++;
-      isActive.value = index.value === tabs.selectedIndex;
     });
     return { index, isActive };
   },

src/components/tabs/Tab.vue

@@ -14,30 +14,15 @@ export default defineComponent({
     selected: { type: Boolean },
     disabled: { type: Boolean, default: false },
   },
-  setup(props) {
+  setup() {
     const index = ref(0);
-    const isActive = ref(false);
+    const isActive = computed(() => index.value === tabs.selectedIndex);
 
     const tabs = inject('TabsProvider');
 
-    watch(
-      () => tabs.selectedIndex,
-      () => {
-        isActive.value = index.value === tabs.selectedIndex;
-      },
-    );
-
-    watch(
-      () => props.selected,
-      () => {
-        tabs.selectedIndex = index;
-      },
-    );
-
     onBeforeMount(() => {
       index.value = tabs.count;
       tabs.count++;
-      isActive.value = index.value === tabs.selectedIndex;
     });
     return { index, isActive };
   },

src/external/Leaflet.GoogleMutant/lru_map.ts

@@ -160,7 +160,6 @@ export class LRUMap {
   }
 
   shift() {
-    // todo: handle special case when limit == 1
     var entry = this.oldest;
     if (entry) {
       if (this.oldest[NEWER]) {

src/hooks/live/useSiteStatistics.ts

@@ -1,10 +1,15 @@
 import axios from 'axios';
 import moment from 'moment';
+import type { Ref } from 'vue';
 import { getQueryString } from '@/utils/urls';
 import { i18n } from '@/main';
 import type { SiteStatistic } from '@/hooks/live/types';
+import type Organization from '@/models/Organization';
 
-export default function useSiteStatistics(queryFilter: Record<string, any>) {
+export default function useSiteStatistics(
+  queryFilter: Record<string, any>,
+  organizations: Ref<Organization[]>,
+) {
   const statsInterval = ref<ReturnType<typeof setInterval> | null>(null);
   const currentSiteStats = ref<SiteStatistic[]>([]);
   const currentEngagement = ref(0);
@@ -28,7 +33,6 @@ export default function useSiteStatistics(queryFilter: Record<string, any>) {
     const params = {
       start_date: start_date.format('YYYY-MM-DD'),
       end_date: end_date.format('YYYY-MM-DD'),
-      incident: undefined,
     };
     if (incident) {
       params.incident = incident;
@@ -51,9 +55,7 @@ export default function useSiteStatistics(queryFilter: Record<string, any>) {
     statsInterval.value = null;
 
     const { incident } = queryFilter.value;
-    const params = {
-      incident: undefined,
-    };
+    const params = {};
     if (incident) {
       params.incident = incident;
     }
@@ -80,7 +82,6 @@ export default function useSiteStatistics(queryFilter: Record<string, any>) {
       date: d,
       interval,
       timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-      incident: undefined,
     };
     if (incident) {
       params.incident = incident;
@@ -100,7 +101,6 @@ export default function useSiteStatistics(queryFilter: Record<string, any>) {
     const params = {
       start_date: start_date.format('YYYY-MM-DD'),
       end_date: end_date.format('YYYY-MM-DD'),
-      incident: undefined,
     };
     if (incident) {
       params.incident = incident;
@@ -198,7 +198,6 @@ export default function useSiteStatistics(queryFilter: Record<string, any>) {
     const params = {
       start_date: start_date.format('YYYY-MM-DD'),
       end_date: moment().format('YYYY-MM-DD'),
-      incident: undefined,
     };
     if (incident) {
       params.incident = incident;
@@ -273,8 +272,7 @@ export default function useSiteStatistics(queryFilter: Record<string, any>) {
       {
         name: 'Total Orgs',
         color: mapStatisticsColors[6],
-        count: 0,
-        // count: this.organizations.length TODO: Find a better way to do this,
+        count: organizations.value.length,
         style: `border: none`,
         title: i18n.global.t('pewPew.total_orgs'),
       },

src/pages/unauthenticated/PewPew.vue

@@ -520,6 +520,12 @@ export default {
     const lastEventTimestamp = ref(null);
     const markersLength = ref(0);
     const mapUtils = ref(null);
+    const isDarkMode = computed(() => colorMode.value === 'dark');
+    const isLoggedIn = computed(() => store.getters['auth/isLoggedIn']);
+    const incidentList = computed(() =>
+      Incident.query().where('active_phone_number', Boolean).get(),
+    );
+    const organizations = ref([]);
 
     const {
       currentSiteStats,
@@ -529,7 +535,7 @@ export default {
       totalCasesChartData,
       mapStatistics,
       formatStatValue,
-    } = useSiteStatistics(queryFilter);
+    } = useSiteStatistics(queryFilter, organizations);
 
     const styles = computed(() => {
       if (colorMode.value === 'dark') {
@@ -557,12 +563,6 @@ export default {
       };
     });
 
-    const isDarkMode = computed(() => colorMode.value === 'dark');
-    const isLoggedIn = computed(() => store.getters['auth/isLoggedIn']);
-    const incidentList = computed(() =>
-      Incident.query().where('active_phone_number', Boolean).get(),
-    );
-    const organizations = ref([]);
     const siteInfoTimerData = reactive({
       timerId: null,
       activeInfoTab: 0,