@yz-social/civildefense.io 4.5.8 → 4.5.16

package/public/javascripts/alert.js

@@ -7,8 +7,8 @@ import { consume } from './display.js';
 import { Hashtags } from './hashtags.js';
 import { Agent } from './agent.js';
 import { Conversation, Reply } from './conversation.js';
-import { alertTopic } from './versions.js';
-import { getContainingCells, findCoverCellsByCenterAndPoint } from './s2.js';
+import { alertTopic, topicRegion, topicCell } from './versions.js';
+import { getContainingCells, getSubdivision, findCoverCellsByCenterAndPoint } from './s2.js';
 const { localStorage, getComputedStyle, URL, URLSearchParams, domtoimage } = globalThis;
 
 
@@ -17,7 +17,7 @@ export function getShareableURL(tag = null, tags = Hashtags.getSubscribe()) { //
   const zoom = map.getZoom();
   const { lat, lng } = map.getCenter();
 
-  params.set('tags', tags.map(tag => encodeURIComponent(tag)).join(','));
+  if (tags.length) params.set('tags', tags.map(tag => encodeURIComponent(tag)).join(','));
   if (lat !== null) params.set('lat', lat);
   if (lng !== null) params.set('lng', lng);
   if (zoom !== null) params.set('z', zoom);
@@ -42,7 +42,7 @@ export async function share(properties) {  // Invoke platform share API on prope
   if (!properties.files) {
     Alert.closePopup();
     await delay(500); // Allow popup time to close. It doesn't render well because of the web component style sheets.
-    const target = document.getElementById('mapCapture');
+    const target = document.getElementById('mapCapture'); // For capturing a screen shot.
     const icon = target.lastElementChild;
     const subPopoverControls = document.getElementById('subPopoverControls');
     const leafletControls = document.querySelector('.leaflet-control-container');
@@ -68,7 +68,7 @@ export function go({lat = null, lng = null, zoom = null, alert = null}) { // Go
   }
   openOnReceive = null;
   if (alert) {
-    Alert.openPopup(alert) || (openOnReceive = alert);
+    Alert.openPopup(alert);
   }
 }
 
@@ -85,7 +85,7 @@ class AlertReply extends Reply {
     // a promise to reassemble the attachment, have formatReply create a findable placeholder to later replace with the A element
     // and contents, and then have ensureContent() arrange in its delayed followup to replace the placeholder when the promise
     // resolves.
-    super.initialize(properties);
+    await super.initialize(properties);
     const {container, agent, issuedTime, payload} = properties;
     const {file:attachmentTopic} = payload;
     if (attachmentTopic) {
@@ -94,58 +94,85 @@ class AlertReply extends Reply {
       const {dataURL:file, name, msgIds} = await contact.assembleChunkedDataURL(attachmentTopic);
       Object.assign(payload, {file, name, attachmentTopic, msgIds});
     }
-    const element = container.startFader('.alert-commented', issuedTime + ttl - Date.now());
-    element.style.display = 'block';
-    // Restart the pulse animation by setting animationName to something it isn't.
-    element.style.animationName = element.style.animationName === 'pulse2' ? 'pulse' : 'pulse2';
     container.showNotification({agent, issuedTime, body: payload.message || payload.name || payload});
     return this;
   }
+  update() { } // TODO: are we really getting multiple reply events for the same data?
 }
 
-let subscriptions = []; // array of stringy keys <mumble>:<cellID>:<hashtag>
-let subscriptionsRegion;
-// We do not record exactly where you were looking across sessions, but we do record the containing level 9 cell.
-let lastLevel9Cell; // S2 level 9 cells average a radius of about 10km ~ 6.5 miles.
-
-let last = []; // Last published lat, lng, tag
-const maxPublish = 5;
-let publishing = false;
-
+import { s2 } from 's2js';
 export class Alert extends Conversation { // A wrapper around L.marker
   // When we resubscribe to different cells covering the same place, we will get the same
   // sticky data. We don't want to change the marker. Fortunately, the publication to each
   // of the cells (at different scales) are all published with the same data.
-  static updateSubscriptions(oldKeys = subscriptions, newKeys) { // Update current subscriptions to the new map bounds.
-    // A value of [] passed for oldKeys is used to start things off fresh (i.e., without supressing subscription of any carry-overs).
-    if (!networkPromise) { console.warn("No network through which to subscribe."); return; } // Does this ever happen? Why?
-    let region;
-    if (!newKeys) { // None specified. Compute them.
-      const center = map.getCenter();
-      const bounds = map.getBounds();
-      const northEast = bounds.getNorthEast();
-      const newCells = findCoverCellsByCenterAndPoint(center.lat, center.lng, northEast.lat, northEast.lng); // array of cell IDs (BigInts)
-      region = P2PWebNetwork.regionCode(center.lat, center.lng);
-      newKeys = newCells.flatMap(cell => Hashtags.getSubscribe().map(hash => alertTopic(cell, hash)));
-      Agent.current.trackPublicChanges(region);
-      // Record a zoomed-out cell id in case next session does not have geolocation services.
-      let level9Cell = getContainingCells(center.lat, center.lng)[9];
-      if (level9Cell !== lastLevel9Cell) localStorage.setItem('level9Cell', lastLevel9Cell = level9Cell);
-    }
-
-    const subscribe = (key, region, handler) =>
-	  networkPromise.then(async contact => contact.subscribe({eventName: key, region, handler}));
-
+  static subscriptions = {}; // maps currently active eventNames (<mumble>:<cellID>:<hashtag>) to count of event received for it.
+  // We do not record exactly where you were looking across sessions, but we do record the containing level 9 cell.
+  static lastLevel9Cell = null; // S2 level 9 cells average a radius of about 10km ~ 6.5 miles.
+  static subscriptionFromMap() { // Generate {eventName => count} for current map bounds.
+    const center = map.getCenter();
+    const bounds = map.getBounds();
+    const northEast = bounds.getNorthEast();
+    const newCells = findCoverCellsByCenterAndPoint(center.lat, center.lng, northEast.lat, northEast.lng); // array of cell IDs (BigInts)
+    if (!newCells) return null;
+    const region = P2PWebNetwork.regionCode(center.lat, center.lng);
+    const newKeys = {};
+    newCells.forEach(cell => Hashtags.getSubscribe().forEach(hash => {
+      const eventName = alertTopic(cell, hash);
+      newKeys[eventName] = this.subscriptions[eventName] || 0;
+    }));
+    Agent.current?.trackPublicChanges(region);
+    // Record a zoomed-out cell id in case next session does not have geolocation services.
+    let level9Cell = getContainingCells(center.lat, center.lng)[9];
+    if (level9Cell !== this.lastLevel9Cell) localStorage.setItem('level9Cell', this.lastLevel9Cell = level9Cell);
+    return newKeys;
+  }
+  static async updateSubscriptions({
+    oldKeys = this.subscriptions,
+    newKeys = this.subscriptionFromMap(),
+    throttleMS = 20
+  } = {}) { // Update current subscriptions.
+    // A value of {} passed for oldKeys is used to start things off fresh (i.e., without supressing subscription of any carry-overs).
+    if (!newKeys) return; // e.g., wacky computation. Don't change anything.
+    const contact = await networkPromise;
+    if (!contact) { console.warn("No network through which to subscribe."); return; } // Does this ever happen? Why?
+    this.subscriptions = newKeys; // Before subscribing.
+    const subscribe = async (key, handlerIn) => {
+      const handler = handlerIn && (properties => {
+	// When there are enough alerts within a topic, it rolls over and just reports the most recent number.
+	// When get near that count, we update the subscriptions such that the overloading topic is replaced
+	// with the topics for each of the four subcells that that make up the one with too many alerts.
+	// This repeats until we reach cells that are not rolling over.
+	const maxAlertsInCell = 900;
+	let count = ++newKeys[key];
+	handlerIn(properties);
+	if (count >= maxAlertsInCell) {
+	  let nextKeys = {};
+	  for (const old in newKeys) {
+	    if (old !== key) {
+	      nextKeys[old] = newKeys[old];
+	    } else {
+	      const cellTag = topicCell(key);
+	      const subdivisions = getSubdivision(cellTag);
+	      const topics = subdivisions.map(cellTag => alertTopic(cellTag, properties.hashtag));
+	      console.log('subdividing', key, 'into', topics);
+	      topics.forEach(topic => nextKeys[topic] = 0);
+	    }
+	  }
+	  this.updateSubscriptions({oldKeys: newKeys, newKeys: nextKeys, throttleMS});
+	}
+      });
+      const region = topicRegion(key);
+      await contact.subscribe({eventName: key, region, handler}).then(() => throttleMS && P2PWebNetwork.delay(throttleMS));
+    };
+    console.log('updating subscriptions', {newKeys, oldKeys});
     // For each entry in the new subscription set that was not previously subscribed, subscribe now.
-    for (const key of newKeys) oldKeys.includes(key) || subscribe(key, region, data => Alert.ensure(data));
-
+    for (const key in newKeys) oldKeys.hasOwnProperty(key) || await subscribe(key, data => Alert.ensure(data));
     // For each existing subscription, if it does not appear in the new set then unsubscribe.
-    for (const key of oldKeys) newKeys.includes(key) || subscribe(key, subscriptionsRegion, null);
-    console.log('Subscribed', {newKeys, region, length: newKeys.length, oldKeys, subscriptionsRegion});
-
-    subscriptions = newKeys;
-    subscriptionsRegion = region;
+    for (const key in oldKeys) newKeys.hasOwnProperty(key) || await subscribe(key, null);
   }
+  static maxPublish = 5;
+  static publishing = false;
+  static lastPublished = []; // Last published lat, lng, tag
   // Publish an alert to all applicable eventNames, canceling as required. Promises tag (msgId).
   static async publish({lat, lng,
 			originalPosting = undefined,
@@ -160,21 +187,21 @@ export class Alert extends Conversation { // A wrapper around L.marker
     // However, the 'unpublishing' (if any) is invoked first.
     // To do this, we must hash the eventName ourselves.
     //console.log('publish', {lat, lng, hashtag, payload, cancel, subject, issuedTime, rest});
-    if (publishing) { console.log('skiping overlapping publish'); return null; } // do not stack them up.
+    if (this.publishing) { console.log('skiping overlapping publish'); return null; } // do not stack them up.
     try {
-      publishing = true;
+      this.publishing = true;
 
       const contact = await networkPromise; // subtle: The rest of this all happens synchronously, with any null payloads definitely first.
       let oldCells = null, oldHash, oldSubject = null; // Recorded for logging, below.
       let lastFillIn;
       if (payload) {
 	lastFillIn = {lat, lng, hashtag, issuedTime};
-	last.push(lastFillIn); // Capture the added data.
-	const periodStart = Date.now() - (maxPublish * 60e3); // maxPublish minutes ago.
-	last = last.filter(past => past.issuedTime >= periodStart);
-	if (cancel === undefined && last.length > maxPublish) { // Unless specified otherwise, cancel oldest over maxPublish.
-	  showMessage(Int`Too many posts. (5 allowed every 5 minutes.) Removing oldest from this period.`);
-	  cancel = last.shift();
+	this.lastPublished.push(lastFillIn); // Capture the added data.
+	const periodStart = Date.now() - (this.maxPublish * 60e3); // maxPublish minutes ago.
+	this.lastPublished = this.lastPublished.filter(past => past.issuedTime >= periodStart);
+	if (cancel === undefined && this.lastPublished.length > this.maxPublish) { // Unless specified otherwise, cancel oldest over maxPublish.
+	  showMessage(Int`Too many posts. (5 allowed every 5 minutes.) Removing oldest from this period.`, 'instructions');
+	  cancel = this.lastPublished.shift();
 	}
       }
       if (cancel) {
@@ -208,23 +235,24 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	}
       }
       if (!payload) {
-	const index = last.findIndex(past => past.subject === subject);
-	if (index >= 0) last.splice(index, 1);
+	const index = this.lastPublished.findIndex(past => past.subject === subject);
+	if (index >= 0) this.lastPublished.splice(index, 1);
       }
       console.log('Published', {cells, n: cells.length, region, hashtag, subject, payload, oldCells, oldHash, oldSubject});
       return subject;
     } finally {
-      publishing = false;
+      this.publishing = false;
     }
   }
   
   static noMessage = Int`No additional information.`;
   static closePopup() { // Close any open popup.
     map.closePopup();
+    Hashtags.closeSelector();
   }
   static openPopup(alertTag) { // Open the marker specified by subject.
     const wrapper = this.getItem(alertTag);
-    wrapper?.openPopup();
+    wrapper?.openPopup() || (openOnReceive = alertTag);
   }
   async openPopup() { // Open this wrapper's popup, and resolve any waiting promise.
     const { resolveGo } = this; // A handy hook for scripting.
@@ -235,7 +263,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
     }
     this.marker.openPopup();
   }
-  static makeIcon(hashtag) { // Return a Leaflet icon
+  static makeIcon(hashtag) { // Return a Leaflet icon. TODO: are these cacheable and reusable?
     return L.divIcon({
       html: `<div class="alert-commented"></div><div class="alert-pin">${Hashtags.formatAlert(hashtag)}</div>`,
       iconSize: [40, 40],
@@ -443,9 +471,26 @@ export class Alert extends Conversation { // A wrapper around L.marker
   get itemKind() { // Answer class of reply items.
     return AlertReply;
   }
-  async ensure(data) { // Add or update reply for this marker.
+  async ensure(data) { // Add or update reply for this reply.
     data.subject = data.tag; //fixme
+    const remaining = data.issuedTime + ttl - Date.now();
+    if (remaining < 0) return null;
     const reply = await super.ensure(data);
+    if (reply) {
+      if (reply === this.items[0]) { // If first sorted reply, and there's a message, update the tooltip.
+	const message = reply.payload?.message || (!reply.payload.file && reply.payload);
+	const markerElement = message && this.marker.getElement();
+	if (markerElement) tooltip(markerElement, message);
+      }
+      if (reply === this.items[this.items.length - 1]) { // If last reply so far (even if first), show ring and update fader.
+	const ringElement = this.startFader('.alert-commented', remaining);
+	if (ringElement) {
+	  ringElement.style.display = 'block';
+	  // Restart the pulse animation by setting animationName to something it isn't.
+	  ringElement.style.animationName = ringElement.style.animationName === 'pulse2' ? 'pulse' : 'pulse2';
+	}
+      }
+    }
     this.needsRedisplay = true;
     this.ensureContent();
     return reply;
@@ -472,12 +517,12 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
   deleteReply(replyElement) {
     resetInactivityTimer();
-    const {lat, lng} = this;
+    const {lat, lng, subject} = this;
     const region = P2PWebNetwork.regionCode(lat, lng);
     const killTag = replyElement.dataset.subject;
     networkPromise.then(async contact => {
       // We won't be here unless we are the signer.
-      await contact.publish({eventName: this.subject, region, killTag, payload: null});
+      await contact.publish({eventName: subject, region, killTag, payload: null});
       // IFF there's an attachment AND we're given msgIds by receiveChunkedBytes, then delete the attachment.
       const reply = this.getItem(killTag);
       const {attachmentTopic, msgIds = []} = reply?.payload || {};
@@ -561,7 +606,9 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
   startFader(selector, remaining) { // Set up or update fader on the specified marker element, returning that element.
     const { marker } = this;
-    const element = marker.getElement().querySelector(selector);
+    const markerElement = marker.getElement();
+    if (!markerElement) return null; // removed (e.g., if expired).
+    const element = markerElement.querySelector(selector);
     const fraction = remaining / ttl; // Start at 1 and go to 0, but we may be some way along that.
     const endOpacity = 0.5; // Fully transparent is 0, but that's too hard to see. :-)
     const endGrayscale = 1; // Fully gray.
@@ -571,7 +618,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
     element.style.opacity = opacity;
     // I'd like to let css transitions do the work, but as we zoom, we make different subscriptions and thus start
     // the "same" marker over again. This initial setup clashes with zooming if done with a next-tick step opacity+filter value.
-    const interval = 2e3; // Milliseconds / step
+    const interval = 10e3; // Milliseconds / step
     const opacityFade = (endOpacity - opacity) *  interval / remaining; // change / step
     const grayscaleFade = (endGrayscale - grayscale) * interval / remaining;
     clearInterval(this[selector]);
@@ -592,3 +639,4 @@ export class Alert extends Conversation { // A wrapper around L.marker
     super.destroy();
   }
 }
+globalThis.Alert = Alert; // for debugging

package/public/javascripts/conversation.js

@@ -26,13 +26,14 @@ export class Tagged { // Maintains cached existence within a (possibly instance-
   destroy() { // Subclasses extend to remove UI.
     // Subclass extensions of ensure may expect this answer falsy, indicating that an item was removed.
     // NOTE: Does not destroy replies, as these may have been published by others.
-    return null; 
+    this.container.removeItem(this.tag);
+    return null;
   }
 
   static async ensureIn(data, container, kind = container.itemKind) { // update() or initialize() item and remember what those answer. (Falsy is deleted).
     const {tag, payload, ...rest} = data;
     let item = container.getItem(tag);
-    if (!payload) return item && container.removeItem(tag)?.destroy();
+    if (!payload) return item?.destroy();
     if (item) item = await item.update(data);
     else item = await (new kind().initialize({...data, container}));
 
@@ -59,8 +60,10 @@ export class Conversation extends Tagged { // A conversation with replies.
     return item;
   }
   removeItem(tag) { // Remove reply from cache.
-    const { items } = this;    
-    return items.splice(items.findIndex(reply => reply.tag === tag), 1)?.[0];
+    const { items } = this;
+    const index = items.findIndex(reply => reply.tag === tag);
+    if (index < 0) return null;
+    return items.splice(index, 1)?.[0];
   }
   get itemKind() { // Answer class of reply items.
     return Reply;
@@ -76,7 +79,7 @@ export class Conversation extends Tagged { // A conversation with replies.
     if (!Object.hasOwn(this, '_conversations')) this._conversations = {};
     return this._conversations;
   }
-  static items() {
+  static get items() {
     return Object.values(this.conversations);
   }
   static getItem(tag) { // Get conversation if known, else falsy.