optimize map summary

src/components/relays/MapSummary.vue

@@ -27,15 +27,13 @@
       </l-marker> -->
 
       <l-circle-marker
-        v-for="relay in getRelaysWithGeo()"
+        v-for="relay in getRelaysWithGeo"
         :lat-lng="getLatLng(relay)"
         :key="relay"
         :radius="2"
         :weight="4"
         :color="getCircleColor(relay)"
-        :fillOpacity="1"
+        :fillOpacity="1" >
-        :class="relay"
-        >
   <!--       <l-popup>
           {{ relay }}
         </l-popup> -->
@@ -84,12 +82,8 @@ export default defineComponent({
   mounted() {
     console.log('results', this.results)
     this.geo = this.store.relays.geo
-    console.log('relays from leaflet', this.relays.length)
-  },
-  updated(){
-    // this.relays = this.relaysProp
-    // console.log('relays from leaflet', this.relays.length)
   },
+  updated(){},
   props: {
     resultsProp: {
       type: Array,
@@ -105,6 +99,19 @@ export default defineComponent({
     },
   },
   computed: {
+    getCircleClass(relay){
+      console.log('the relay', relay)
+      return (relay) => {
+        return {
+          visible: this.isRelayInActiveSubsection(relay),
+          hidden: !this.isRelayInActiveSubsection(relay),
+          [relay]: true
+        }
+      }
+    },
+    getRelaysWithGeo(){
+      return this.store.relays.getAll.filter( relay => this.geo?.[relay] instanceof Object )
+    },
   },
   methods: Object.assign(RelaysLib, {
     mapHeight(){
@@ -115,20 +122,23 @@ export default defineComponent({
       return [this.geo[relay].lat, this.geo[relay].lon]
     },
     getCircleColor(relay){
+      if(!this.isRelayInActiveSubsection(relay))
+        return 'transparent'
 
-      if(this.results[relay]?.aggregate == 'public') {
+      if(this.results[relay]?.aggregate == 'public')
         return '#00AA00'
-      }
+
-      else if(this.results[relay]?.aggregate == 'restricted') {
+      if(this.results[relay]?.aggregate == 'restricted')
         return '#FFA500'
-      }
+
-      else if(this.results[relay]?.aggregate == 'offline') {
+      if(this.results[relay]?.aggregate == 'offline')
         return '#FF0000'
-      }
+      
-      return 'transparent'
     },
-    getRelaysWithGeo(){
+
-      return this.store.relays.getRelays( this.activePageItem, this.results ).filter( relay => this.geo?.[relay] )
+    isRelayInActiveSubsection(relay){
+      // console.log(this.store.relays.getRelays(this.activePageItem).length, this.activePageItem, relay, this.store.relays.getRelays(this.activePageItem).includes(relay))
+      return this.store.relays.getRelays(this.activePageItem, this.results).includes(relay)
     },
     toggleMap(){
       this.expanded = !this.expanded

src/components/relays/RefreshComponent.vue

@@ -75,7 +75,6 @@ const localMethods = {
             .then((result) => {
               this.results[result.uri] = result
               this.setCache(result)
-              this.store.relays.updateNow()
               processed.add(result.uri)
               // console.log('processing status', processed, '/', this.relays.length)
               console.log('complete?', result.uri, processed.size, this.relays.length)
@@ -90,13 +89,14 @@ const localMethods = {
 
   completeAll: function(){
     this.store.relays.finishProcessing()
+    this.store.relays.updateNow()
     console.log('all are complete?', this.store.relays.isProcessing)
-    const aggregates = new Object()
+    // const aggregates = new Object()
-    aggregates.all = this.getSortedAllRelays()
+    // aggregates.all = this.getSortedAllRelays()
-    aggregates.public = this.getSortedPublicRelays()
+    // aggregates.public = this.getSortedPublicRelays()
-    aggregates.restricted = this.getSortedRestrictedRelays()
+    // aggregates.restricted = this.getSortedRestrictedRelays()
-    aggregates.offline = this.getOfflineRelays()
+    // aggregates.offline = this.getOfflineRelays()
-    this.store.relays.setAggregates(aggregates)
+    // this.store.relays.setAggregates(aggregates)
     this.getAverageLatency()
   },
 

src/components/relays/pages/RelaysHome.vue

@@ -46,7 +46,8 @@
       <div 
         v-for="section in navSubsection"
         :key="section.slug"> 
-          <div v-if="section.slug == activePageItem">
+          <!-- <div v-if="section.slug == activePageItem"> -->
+          <div :class="section.slug == activePageItem ? 'visible' : 'hidden'">
             <ListClearnet
               :resultsProp="results"
               :activePageItemProp="section.slug"
@@ -120,8 +121,8 @@ export default defineComponent({
       filteredRelays: [],
       timeouts: {},
       intervals: {},
-      activeNavItem: this.store.layout.getActive('relays-subnav'),
+      activeNavItem: this.store.layout.getActive('relays-subnav') || 'relays',
-      activePageItem: this.store.layout.getActive('relays-find-pagenav'),
+      activePageItem: this.store.layout.getActive('relays-find-pagenav') || 'find',
       navSubsection: this.store.layout.getNavGroup('relays-find-pagenav'),
       relaysCount: {}
     }
@@ -143,12 +144,25 @@ export default defineComponent({
       this.results[relay] = this.getCache(relay)
     })
     this.store.layout.$subscribe( (mutation) => {
+      console.log('layout', 'mutation detected')
       if(mutation.events.key == 'relays-find-pagenav')
         this.activePageItem = mutation.events.newValue
       if(mutation.events.key == 'relays-subnav')
         this.activeNavItem = mutation.events.newValue
     })
 
+    this.store.relays.$subscribe( () => {
+      console.log('relays', 'mutation detected')
+    })
+
+    this.store.user.$subscribe( () => {
+      console.log('users', 'mutation detected')
+    })
+
+    this.store.relays.$subscribe( () => {
+      console.log('prefs', 'mutation detected')
+    })
+
     this.navSubsection.forEach( item => this.relaysCount[item.slug] = 0 )
     // this.psuedoRouter(this.store.layout.getNavGroup('relays-subnav'))
     this.psuedoRouter()

src/store/relays.js

@@ -20,7 +20,6 @@ export const useRelaysStore = defineStore('relays', {
         return state.urls.map(x=>x)
       if( 'favorite' == aggregate )
         return state.favorites
-      console.log('ok?', results, aggregate)
       return state.urls.filter( (relay) => results?.[relay]?.aggregate == aggregate)
     },
     getByAggregate: (state) => (aggregate) => {