@yz-social/civildefense.io 4.5.22 → 4.5.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yz-social/civildefense.io",
   "description": "Browser app to safely share live sightings on a map.",
-  "version": "4.5.22",
+  "version": "4.5.23",
   "keywords": [
     "map",
     "browser",
@@ -10,6 +10,7 @@
   "scripts": {
     "start": "npm stop; node ./server/app.js",
     "stop": "pkill yz.social",
+    "background": "npm stop; node ./server/app.js >server.log &",
     "postinstall": "touch server/location.json; chmod a+w server/location.json",
     "prepack": "mv server/location.json server/location.save.json",
     "postpack": "mv server/location.save.json server/location.json"
@@ -19,7 +20,7 @@
     ".": "./index.js"
   },
   "dependencies": {
-    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.59.2",
+    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.62.2",
     "cors": "^2.8.6",
     "express": "^4.22.1",
     "leaflet": "^1.9.4",

package/public/about/es.html

@@ -79,7 +79,7 @@
     <li>Añadir comentarios, fotos, videos u otros archivos adjuntos.</li>
     <li>Recibir notificaciones de nuevas alertas cerca de ti o en tu mapa actual.</li>
     <li>Compartir en redes sociales, por mensaje de texto o correo electrónico.</li>
-    <li>Discutir una alerta mediante videoconferencia segura. (Disponible este otoño.)</li>
+    <li>Discutir una alerta mediante videoconferencia segura. (Disponible este invierno.)</li>
   </ul>
 
   <a href="/?lang=es" class="launch-btn" target="civildefense">

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, topicRegion, topicCell, cellHex } from './versions.js';
-import { getContainingCells, getSubdivision, findCoverCellsByMinMaxLatLng } from './s2.js';
+import { alertTopic, topicRegion, cellHex, topicCell } from './versions.js';
+import { getContainingCells, getSmallestCellId, getSubdivision, findCoverCellsByMinMaxLatLng, cellContains, pointFromLatLng, cellFromCellID } from './s2.js';
 const { localStorage, getComputedStyle, URL, URLSearchParams, domtoimage } = globalThis;
 
 
@@ -63,7 +63,9 @@ const ttl = 24 * 60 * 60e3; // 24 hours
 let openOnReceive = null;
 export function go({lat = null, lng = null, zoom = null, alert = null}) { // Go to specified location (if any) and open marker (if any).
   if (lat !== null && lng !== null) {
-    if (zoom) map.flyTo({lat, lng}, zoom);
+    lat = parseFloat(lat);
+    lng = parseFloat(lng);
+    if (zoom) map.flyTo({lat, lng}, parseFloat(zoom));
     else map.flyTo({lat, lng});
   }
   openOnReceive = null;
@@ -102,13 +104,291 @@ class AlertReply extends Reply {
 
 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.
+  // For each hashtag, we subscribe to a set of non-overlapping cells at varying S2 levels that cover the current map.
+  // An Alert is made when a subscription handler fires, and it keeps information that is (mostly) true regardless of
+  // which cell brought it in. E.g., each alert has a bookkeeping tag that identifies that map-click, which is
+  // the same at all S2 levels, and forms the topic for replies to that alert. When the map changes and the subscriptions
+  // are updated, we try to re-use the same Alerts so that the markers don't flash and we don't create garbage.
+
+  // INSTANCE MANAGEMENT
+  // When there are "too many" instances in a cell (at any level), we replace the individual Alerts with a single larger aggregate.
+  // This allows us to handle any any quantity of Alerts in memory and visual clutter, and to not mislead users in the presence
+  // of publication topic "rollover". However, it greatly complicates insance management.
+
+  // Conversation.ensure is the subscription handler, and it keeps track of the instances by tag, initializing a new one if needed.
+  initialize({topic, payload, hashtag, tag, agent, issuedTime, ...rest}) { // Make appropriate instance for a new individual tag, or update aggregate.
+
+    if (!Hashtags.isSubscribed(hashtag)) return null; // A subscribed event may have been in flight while unsubscribing. Caller destroys instance.
+    const now = Date.now(),
+	  expiration = issuedTime + ttl,
+          remaining = expiration - now;
+    if (remaining < 0) return null;  // Network shouldn't send us expired, but if it does, let its instance be destroyed.
+
+    const eventName = topic.name;
+    let keep = this; // Instance to be kept as marker.
+    let aggregate = this.constructor.getAggregate(eventName); // If we already have one for this eventName
+
+    // Each new initialization gets counted, which may be more than the network rollover.
+    // We do not "back up" for deletions and expirations - i.e., subtract and possibly go back to individual alerts.
+    // Note that initialize() will not be called for an event handler that has a tag (msgId) the same as one we have already seen for a different cell scale.
+    this.constructor.subscriptions[eventName]++;
+    
+    if (aggregate) {
+      keep = null; // This new instance is superfluous. Tell ensure() to destroy it...
+      aggregate.lerp(eventName, payload.lat, payload.lng); // ...but nudge the existing aggregate towards us.
+    } else { // Does not exist yet
+      let {lat, lng, originalPosting} = payload;
+      lat = parseFloat(lat);
+      lng = parseFloat(lng);
+      if (this.constructor.cellCountOverLimit(eventName)) aggregate = this; // If now over, treat this marker as an aggregate.
+      const icon = this.constructor.makeIcon(hashtag, tag, aggregate);
+      const marker = this.marker = L.marker([lat, lng], {icon, autoPan: false}).addTo(map);
+      const region = P2PWebNetwork.regionCode(lat, lng);
+      hashtag = Hashtags.add(hashtag); // We already have it and are subscribing, but this updates our extended form if needed.
+      super.initialize({payload, hashtag, tag, agent, lat, lng, issuedTime, originalPosting, ...rest});
+      if (aggregate) {
+	// Destroy existing eventName markers and add their positions to the aggregate we are creating.
+	this.becomeAggregate(eventName);
+	this.constructor.clearEventMarkers(eventName, aggregate);
+      } else {
+	this.noteEventName(eventName);
+	marker.bindPopup('', {className: 'alert'}).on('popupopen', event => this.ensureContent(event.popup));
+	tooltip(marker.getElement(), Int`Show conversation for this ${hashtag} alert.`);
+	if (tag === openOnReceive) { // Bug! How can we handle URLs to an alert that has been aggregated?
+	  openOnReceive = false;
+	  this.openPopup();
+	}
+	networkPromise.then(async contact => { // Subscribe to replies to this tag, now that we have an alert for them to go to.
+	  contact.subscribe({eventName: tag, region, handler: data => this.ensure(data)});
+	});
+      }
+    }
+    const alert = aggregate || this;
+    alert.startExpiration('.alert-pin', remaining);
+    alert.showNotification({agent, issuedTime});
+    return keep;
+  }
+  update({topic, ts, ...rest}) { // Called when handling an existing Conversation. super confirms that nothing immutable has changed.
+    return super.update({...rest}); // topic and ts vary with level, and so must not be part of ensure/update checks.
+  }
+  async destroy(markerDelayMS = 400) { // Remove this Alert pin entirely, either through unpublish, expiration, or conversion of a cell to aggregate.
+    // We do not decrement Alert.subscriptions[this.eventName] and unaggregate into individual markers.
+    // That won't happen until the user completely unsubscribes from this cell and resubscribes (by toggle or map movement).
+    clearInterval(this['.alert-pin']);
+    clearInterval(this['.alert-commented']);
+    clearInterval(this.destroyer);
+    this.clearAvatars();
+    const {isAggregate, marker, tag, region} = this;
+    // Unsubscribe from replies.
+    if (!isAggregate) networkPromise?.then(async contact => contact.subscribe({eventName: tag, region, handler: null}));
+    this.cellBorder?.removeFrom(map);
+    super.destroy();
+    if (markerDelayMS) {
+      marker.closePopup();
+      marker.unbindPopup(); // It would be confusing if it happens to be open, or clicked on while being removed.
+      marker.setOpacity(0);
+      await P2PWebNetwork.delay(markerDelayMS);
+    }
+    marker.removeFrom(map);
+  }
+
+  static subscriptionQueue = Promise.resolve(); // Serialize updates so they don't overlap each other.
+  static async updateSubscriptions({newKeys, oldKeys, 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).
+    return this.subscriptionQueue = this.subscriptionQueue.then(async () => {
+      oldKeys ||= this.subscriptions;
+      newKeys ||= this.subscriptionFromMap();
+
+      if (!newKeys) return; // e.g., wacky computation. Don't change anything.
+      const contact = await networkPromise;
+      const dropped = [], added = [];
+      if (!contact) { console.warn("No network through which to subscribe."); return; } // Does this ever happen? Why?
+      this.subscriptions = newKeys; // Before subscribing.
+      const subscribe = async (eventName, handler) => {
+	if (!eventName) console.log('sub to no eventName', {oldKeys, newKeys, dropped, added, handler});
+	const region = topicRegion(eventName);
+	if (handler) Agent.current?.trackPublicChanges(region); // Background. No need to await.
+	await contact.subscribe({eventName, region, handler}).then(() => throttleMS && P2PWebNetwork.delay(throttleMS));
+      };
+      for (const key in newKeys) oldKeys.hasOwnProperty(key) || added.push(key);
+      for (const key in oldKeys) newKeys.hasOwnProperty(key) || dropped.push(key);
+      console.log('updating subscriptions', {added, dropped, newKeys, oldKeys});
+
+      // Before subscribing, as that that may bring in an alert with the same tag as one being cleared.
+      if (this.aggregateLimit) this.transferOrClearEventMarkers(added, dropped, newKeys, oldKeys); 
+
+      for (const key of added) await subscribe(key, data => Alert.ensure(data));
+      for (const key of dropped) await subscribe(key, null);
+
+      // for (const alert of this.items) { // fixme remove
+      // 	if (this.subscriptions[alert.eventName] == undefined) {
+      // 	  let kind = added.includes(alert.eventName) && 'added';
+      // 	  kind ||= dropped.includes(alert.eventName) && 'dropped';
+      // 	  kind ||= Object.keys(newKeys).includes(alert.eventName) && 'new';
+      // 	  kind ||= Object.keys(oldKeys).includes(alert.eventName) && 'old';
+      // 	  throw new Error(`${kind} ${alert.eventName} has no count after subscription update.`);
+      // 	}
+      // }
+    });
+  }
+
+  // Instance Management Internals
+  // In general here, a key is an eventName - i.e., a string <mumble>:<cellID>:<hashtag>.
+  // newKeys/oldKeys are a map of the currently subscribed eventName and the count of events for that cell+hashtag
   static subscriptions = {}; // maps currently active eventNames (<mumble>:<cellID>:<hashtag>) to count of event received for it.
+  static aggregateLimit = parseInt(new URLSearchParams(location.search).get('max') || 100);  // How many individuals are allowed before we aggregate.
+  static cellCountOverLimit(eventName, countsDictionary = this.subscriptions) { // Have we received enough that we must show an aggregate?
+    return countsDictionary[eventName] >= this.aggregateLimit;
+  }
+  static getAggregate(eventName) { // Answer the existing aggregate for this cell, if any.
+    return this.getItem(eventName); // While individual Alerts are stored in items/conversations by tag, the tag for aggregate is the eventName.
+  }
+  logAlert(label = '') { // For debugging, when an individual or aggregate marker is clicked, show the alert, cell, and count in console.
+    const {lat, lng, eventName} = this;
+    console.warn(`${label} lat: ${lat}, lng: ${lng}, ${eventName}: ${this.constructor.subscriptions[eventName]}`);
+  }
+  noteEventName(eventName) { // Be a part of the specified grouping.
+    if (this.eventName === eventName) return;
+    this.eventName = eventName;
+    if (!this.isAggregate) return;
+    this.cellBorder?.removeFrom(map);
+    const cell = cellFromCellID(topicCell(eventName));
+    const radiansToDegrees = 180 / Math.PI;
+    const corners = Array.from({ length: 4 }, (_, i) => {
+      const point = cell.vertex(i);
+      const latLng = s2.LatLng.fromPoint(point);
+      return [latLng.lat * radiansToDegrees, latLng.lng * radiansToDegrees];
+    });
+    const border = this.cellBorder = L.polygon(corners, {color: 'red'});
+    border.addTo(map);
+  }
+  static forEachAlertOf(eventName, callback, alerts = this.items) { // Apply callback to each of alerts matching eventName.
+    // TODO? Record a cell's Alert's more efficiently, so that we don't have to cycle through everything.
+    alerts.forEach((alert, index, alerts) => (alert.eventName === eventName) && callback(alert, index, alerts));
+  }
+  static clearEventMarkers(eventName, aggregate = null, alerts = this.items) { // destroy each, but
+    // if aggregate is specified, keep the aggregate and average all position into the aggregate.
+    if (!aggregate) return this.forEachAlertOf(eventName, alert => alert.destroy(), alerts);
+    const eachExceptAggregate = cb => this.forEachAlertOf(eventName, alert => (alert === aggregate) || cb(alert), alerts);
+    let lat = aggregate.lat, lng = aggregate.lng, count = 1;
+    if (aggregate.eventName != eventName) { // Loading from another eventName. Keep existing weight.
+      count = this.subscriptions[aggregate.eventName];
+      lat *= count;
+      lng *= count;
+    }
+    eachExceptAggregate(alert => { lat += alert.lat; lng += alert.lng; count++; });
+    lat /=  count;
+    lng /= count;
+    return this.forEachAlertOf(eventName, alert => {
+      alert.reposition(lat, lng);
+      if (alert !== aggregate) alert.destroy(400); // May or may not be default. Half the translation transition time.
+    }, alerts);
+  }
+  becomeAggregate(eventName) { // Make an individual alert be an aggregate
+    const {tag, marker, hashtag, region} = this;
+    const element = marker.getElement();
+    const pin = element.querySelector('.alert-pin');
+    this.isAggregate = true;
+    pin.classList.toggle('aggregate', true); pin.classList.toggle('starting', true);
+    setTimeout(() => pin.classList.toggle('starting', false), 100);
+    marker.unbindPopup();
+    marker.off('click');
+    marker.on('click', event => this.logAlert('FIXME go down one level'));
+    tooltip(element, Int`Zoom in on multiple ${hashtag} alerts.`); // fixme Int.
+    this.noteEventName(this.tag = eventName);
+    if (tag !== eventName) {
+      networkPromise.then(async contact => contact.subscribe({eventName: tag, region, handler: null})); // Unsubscribe from replies.
+      this.items = [];
+      clearInterval(this['.alert-commented']);
+      element.querySelector('.alert-commented').style = "opacity: 0;";
+      this.constructor.removeItem(tag);
+    }
+    this.constructor.setItem(eventName, this);
+  }
+  static handleAggregation(droppedEventName, addedEventName, newCounts, alerts) { // Return aggregate if over limit, setting it up if necessary. Else null.
+    // If over limit, converts an addedEventName Alert if needed and clears the rest, and then clears all droppedEventName Alerts.
+    if (!this.cellCountOverLimit(addedEventName, newCounts)) return null;
+    let aggregate = this.getAggregate(addedEventName);
+    if (!aggregate) { // If no existing aggregate:
+      aggregate = alerts.find(alert => alert.eventName === droppedEventName); // Pick a dropped individual to become aggregate. There will be one, by construction.
+      aggregate.becomeAggregate(addedEventName);
+      this.clearEventMarkers(addedEventName, aggregate, alerts); // Kill the rest, adding their positions to the aggregate.
+    }
+    return aggregate;
+  }
+  static transferOrClearEventMarkers(added, dropped, newCounts, oldCounts) { // Clear dropped alerts as necessary,
+    // but try to preserve (individual and aggregated) alerts so that the markers don't flash.
+    const addedCells = added.map(topicCell); // List of BigInt, in same order as added eventNames.
+    const alerts = this.items;
+    dropped.sort((a, b) => oldCounts[b] - oldCounts[a]);  // So that we always process aggregates before related individuals.
+    dropped.forEach(droppedEventName => {
+      const droppedCell = topicCell(droppedEventName);
+      // Whether zooming in or out, each dropped cell may have added cells that contain it, or vice versa.
+      // We don't have to worry about cells that are neither added nor dropped, because those will not overlap added or dropped.
+
+      // Find the one added cell (if any) that contains the dropped cell. (Typically when zooming out.)
+      const containerIndex = addedCells.findIndex(added => cellContains(added, droppedCell));
+      if (containerIndex >= 0) {
+	const addedContainingEventName = added[containerIndex];
+	newCounts[addedContainingEventName] += oldCounts[droppedEventName]; // It all goes to the container, which may have already started filling.
+	const aggregate = this.handleAggregation(droppedEventName, addedContainingEventName, newCounts, alerts);
+	if (aggregate) {
+	  this.clearEventMarkers(droppedEventName, aggregate, alerts); // Absorb the discarded. Their distinctiveness will be added to our own.
+	  return;
+	}
+	this.forEachAlertOf(droppedEventName, alert => alert.noteEventName(addedContainingEventName)); // Label the dropped individual alerts for new container.
+	return;
+      }
+
+      const aggregate = this.getAggregate(droppedEventName);
+      if (aggregate) { // We don't know how mucch of this will be included in any added subregion, and cannot reconstruct where they were.
+	aggregate.destroy();
+	return;
+      }
+
+      // Find the 0-4 added cells that are contained by the dropped cell. (Typically when zooming in.)
+      const addedSubCells = addedCells.filter(added => cellContains(droppedCell, added));
+      // We don't know how many oldCounts to distribute to each subcell, so we have to work with each dropped alert's location.
+      if (addedSubCells.length) {
+	const addedS2Cells = addedSubCells.map(cellFromCellID);
+	this.forEachAlertOf(droppedEventName, alert => {
+	  const point = pointFromLatLng(alert.lat, alert.lng);
+	  const addedS2Cell = addedS2Cells.find(cell => cell.containsPoint(point));
+	  if (addedS2Cell) {
+	    const includedIndex = addedCells.indexOf(addedS2Cell.id);
+	    const addedIncludedEventName = added[includedIndex];
+	    newCounts[addedIncludedEventName] += 1;
+	    if (this.handleAggregation(droppedEventName, addedIncludedEventName, newCounts, alerts)) return;
+	    alert.noteEventName(addedIncludedEventName); // Leave this alert in place, but label where it belongs.
+	  } else {
+	    alert.destroy(); // This alert is not within an added subcell.
+	  }
+	}, alerts);
+	return;
+      }
+
+      // Otherwise, no overlap, so clear the (individual and aggregate) markers of the dropped cell.
+      this.clearEventMarkers(droppedEventName);
+    });
+  }
+  lerp(eventName, additionaLatitude, additionalLongitude) { // Move this Alert towards this location, inversely weight by count in cell.
+    const count = this.constructor.subscriptions[eventName];
+    const k = 1 / count;
+    const k1 = 1 - k;
+    const {lat, lng} = this;
+    this.reposition(k1 * lat + k * additionaLatitude,
+		    k1 * lng + k * additionalLongitude);
+  }
+  reposition(lat, lng) { // Update the marker's position for new data.
+    this.lat = lat;
+    this.lng = lng;
+    this.marker.setLatLng([lat, lng]);
+    this.startExpiration('.alert-pin', Date.now() + ttl);
+  }
+
   // 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.
+  static subscriptionFromMap() { // Generate new subscriptions list ({eventName => count}) for current map bounds.
     const center = map.getCenter();
     const bounds = map.getBounds();
     const northEast = bounds.getNorthEast();
@@ -123,84 +403,47 @@ export class Alert extends Conversation { // A wrapper around L.marker
     });
     if (!newCells) return null;
     const newKeys = {};
-
-    newCells.forEach(cell => Hashtags.getSubscribe().forEach(hash => {
+    newCells.forEach(cell => Hashtags.getSubscribe().forEach(hash => { // Populate count with existing count (exctly carried over cell sizes), else 0.
       const eventName = alertTopic(cell, hash);
       newKeys[eventName] = this.subscriptions[eventName] || 0;
     }));
     // Record a zoomed-out cell id in case next session does not have geolocation services.
-    let level9Cell = getContainingCells(center.lat, center.lng)[9];
+    let level9Cell = getSmallestCellId(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);
-      Agent.current?.trackPublicChanges(region); // Background. No need to await.
-      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 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 in oldKeys) newKeys.hasOwnProperty(key) || await subscribe(key, null);
-  }
+
+  // PUBLISHING NEW ALERTS
+  // Each map click publishes to that point at each supported S2 level that contains it, so that any map display of
+  // non-overlapping cells will catch it. (Network subscriptions are much more expensive than publishing, and the app
+  // users watch more than they publish, so we minimize the number of subscriptions that a user has at any moment.)
+
+  // The app (not the network) restricts the user to publish up to maxPublish alerts over the last maxPublish minutes.
+  // I.e., one / minute, but allowing bursts up to maxPublish. After that, one can still publish, but kill the oldest.
+  // We keep enough data in memory that we can reproduce what to kill,m even if Alert has since scrolled off the map and been destroyed.
   static maxPublish = 5;
   static publishing = false;
-  static lastPublished = []; // Last published lat, lng, tag
+  static lastPublished = []; // Last published lat, lng, hashtag
   // Publish an alert to all applicable eventNames, canceling as required. Promises tag (msgId).
   static async publish({lat, lng,
 			originalPosting = undefined,
 			hashtag = Hashtags.getPublish(true),
-			payload = {lat, lng, originalPosting}, // If payload is null (cancels subject), lat & lng are still used to generate eventNames.
+			payload = {lat, lng, originalPosting}, // If payload is null (cancels tag), lat & lng are still used to generate eventNames.
 			cancel = undefined, // First unpublish the specified data, if any. Complicated default.
-			issuedTime = Date.now(), subject,
+			issuedTime = Date.now(), tag,
 			throttleMS = 0,
 			...rest
 		       }) {
-    // We call all the publishing at once and return subject, without waiting for each to occur.
+    // We call all the publishing at once and return tag, without waiting for each to occur.
     // 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});
+    //console.log('publish', {lat, lng, hashtag, payload, cancel, tag, issuedTime, rest});
     if (this.publishing) { console.log('skiping overlapping publish'); return null; } // do not stack them up.
     try {
       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 oldCells = null, oldHash, oldTag = null; // Recorded for logging, below.
       let lastFillIn;
       if (payload) {
 	lastFillIn = {lat, lng, hashtag, issuedTime};
@@ -213,14 +456,14 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	}
       }
       if (cancel) {
-	const {lat, lng, hashtag, subject} = cancel;
+	const {lat, lng, hashtag, tag} = cancel;
 	oldCells = getContainingCells(lat, lng);
-	oldHash = hashtag; oldSubject = subject;
+	oldHash = hashtag; oldTag = tag;
 	const region = P2PWebNetwork.regionCode(lat, lng);
 	for (const cell of oldCells) {
 	  const eventName = alertTopic(cell, hashtag);
 	  // Note: we cannot unpublish replies by others, but they expire after a while anyway.
-	  await contact.publish({eventName, region, killTag: subject, payload: null});
+	  await contact.publish({eventName, region, killTag: tag, payload: null});
 	  throttleMS && await P2PWebNetwork.delay(throttleMS);
 	}
       }
@@ -234,23 +477,23 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	  // and when combined with the publisher's authorId will be unique to this user/time/hashtag,
 	  // and yet the same for each of the individual publications at the different s2 scales.
 	  const msgId = await contact.publish({eventName, region, payload, issuedTime, hashtag, ...rest});
-	  if (subject && subject !== msgId) throw new Error(`msgId is drifting: ${subject} => ${msgId}`);
-	  subject = msgId;
+	  if (tag && tag !== msgId) throw new Error(`msgId is drifting: ${tag} => ${msgId}`);
+	  tag = msgId;
 	  if (lastFillIn) {
-	    lastFillIn.subject = subject;
+	    lastFillIn.tag = tag;
 	    lastFillIn = null;
 	  }
 	} else {
-	  await contact.publish({eventName, region, killTag: subject, payload: null});
+	  await contact.publish({eventName, region, killTag: tag, payload: null});
 	  throttleMS && await P2PWebNetwork.delay(throttleMS);
 	}
       }
       if (!payload) {
-	const index = this.lastPublished.findIndex(past => past.subject === subject);
+	const index = this.lastPublished.findIndex(past => past.tag === tag);
 	if (index >= 0) this.lastPublished.splice(index, 1);
       }
-      console.log('Published', {cells, n: cells.length, region, hashtag, subject, payload, oldCells, oldHash, oldSubject});
-      return subject;
+      console.log('Published', {cells, n: cells.length, region, hashtag, tag, payload, oldCells, oldHash, oldTag});
+      return tag;
     } finally {
       this.publishing = false;
     }
@@ -261,7 +504,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
     map.closePopup();
     Hashtags.closeSelector();
   }
-  static openPopup(alertTag) { // Open the marker specified by subject.
+  static openPopup(alertTag) { // Open the marker specified by tag.
     const wrapper = this.getItem(alertTag);
     wrapper?.openPopup() || (openOnReceive = alertTag);
   }
@@ -274,9 +517,10 @@ export class Alert extends Conversation { // A wrapper around L.marker
     }
     this.marker.openPopup();
   }
-  static makeIcon(hashtag) { // Return a Leaflet icon. TODO: are these cacheable and reusable?
+  static makeIcon(hashtag, tag, isAggregate = false) { // Return a Leaflet icon. 
+    // tag is handy for debugging. TODO: are these cacheable and reusable?
     return L.divIcon({
-      html: `<div class="alert-commented"></div><div class="alert-pin">${Hashtags.formatAlert(hashtag)}</div>`,
+      html: `<div class="alert-commented"></div><div class="alert-pin${isAggregate ? ' aggregate' : ''}" data-debug="${tag}">${Hashtags.formatAlert(hashtag)}</div>`,
       iconSize: [40, 40],
       popupAnchor: [0, 0],
       className: 'alert-marker'
@@ -286,12 +530,12 @@ export class Alert extends Conversation { // A wrapper around L.marker
     this.items.forEach(wrapper => {
       const { hashtag, marker, agent } = wrapper;
       if (hashtag !== canonicalHashtag) return;
-      const newIcon = this.makeIcon(extendedHashtag);
-      const popup = marker.getPopup();
+      const newIcon = this.makeIcon(extendedHashtag, wrapper.tag);
       marker.setIcon(newIcon);
       wrapper.hashtag = extendedHashtag;
       wrapper.needsRedisplay = true; // See comment for initializeHandlers. We need to clear and rebuild content on re-open.
-      if (!popup.isOpen()) return;
+      const popup = marker.getPopup();
+      if (!popup?.isOpen()) return; // Either an aggregate or closed.
       // Fix what's showing now without flashing everything. Make sure menu works.
       const popupAttribution = popup.getElement().querySelector('.attribution');
       const attributionActions = popupAttribution.lastElementChild;
@@ -300,45 +544,11 @@ export class Alert extends Conversation { // A wrapper around L.marker
       wrapper.initChangeHashtag(popupAttribution);
     });
   }
-  static async ensure({tag, topic, ts, issuedTime, ...rest}) { // Add marker at position with appropriate fade if not already present.
-    const alert = await super.ensure({tag, subject: tag, issuedTime, ...rest}); // Does not include topic or ts. fixme: get rid of subject. fixme: why is ts different?
-    if (!alert) return null;
-    // Regardless of initialize vs update, reset fader.
-    const now = Date.now(),
-	  expiration = issuedTime + ttl,
-          remaining = expiration - now;
-    if (remaining < 0) return alert?.destroy();  // Expired.
-    alert.startFader('.alert-pin', remaining); // From the new value of remaining, after marker is set in wrapper, regardless of popup/dirty state.
-    alert.destroyer = setTimeout(() => alert.destroy(), remaining);
-    return alert;
-  }
-  initialize({payload, hashtag, subject, agent, issuedTime, ...rest}) { // Set up the marker for a newly received alert.
-    if (!payload) return null; // Do not cache. E.g., Received a delete event without the initial creation.
-    if (!Hashtags.isSubscribed(hashtag)) return null; // A subscribed event may have been in flight while unsubscribing.
-    const icon = this.constructor.makeIcon(hashtag);
-    const {lat, lng, originalPosting} = payload;
-    const marker = this.marker = L.marker([lat, lng], {icon, autoPan: false}).addTo(map);
-    const region = P2PWebNetwork.regionCode(lat, lng);
-    hashtag = Hashtags.add(hashtag); // We already have it and are subscribing, but this updates our extended form if needed.
-    super.initialize({payload, hashtag, subject, agent, lat, lng, issuedTime, originalPosting, ...rest});
-
-    marker.bindPopup('', {className: 'alert'}).on('popupopen', event => this.ensureContent(event.popup));
-    tooltip(marker.getElement(), Int`Show conversation for this ${hashtag} alert.`);
-    if (subject === openOnReceive) {
-      openOnReceive = false;
-      this.openPopup();
-    }
-    // Subscribe to replies to this subject, now that we're set up to receive them.
-    networkPromise.then(async contact => {
-      contact.subscribe({eventName: subject, region, handler: data => this.ensure(data)});
-    });
-    this.showNotification({agent, issuedTime});
-    return this;
-  }
 
   needsRedisplay = true;
   ensureContent(popup = this.marker.getPopup()) { // Set content and handlers in popup if/as needed.
     if (!popup.isOpen()) return;
+    this.logAlert();
     if (!this.needsRedisplay) {
       this.initializeHandlers(popup);
       return;
@@ -353,7 +563,6 @@ export class Alert extends Conversation { // A wrapper around L.marker
       this.marker.getPopup().update();
       this.initializeHandlers(popup);
     });
-    console.warn(`latitude: ${this.lat}, longitude: ${this.lng}`);
   }
   clearAvatars(popup = this.marker?.getPopup()) {
     popup?.getElement()?.querySelectorAll('.correspondent[data-tag]')
@@ -422,7 +631,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       menu.onclick = consume; // Must be onlick rather than addEventListener.
       const handler = event => {
 	menu.removeEventListener('close-menu', handler);
-	this.updatePost(event.detail.initiator.dataset.tag);
+	this.updatePost(event.detail.initiator.dataset.tag); // initiator is a hashtag menu item and dataset.tag is a hashtag.
       };
       menu.addEventListener('close-menu', handler); // Must be addEventListener because there's no onclosemenu.
     });
@@ -467,16 +676,16 @@ export class Alert extends Conversation { // A wrapper around L.marker
   ${actions}
 </div>`;
   }
-  updatePost(newTag) { // Republish under a different hashtag, or cancel altogether if no newTag (which is not allowed as a hashtag).
+  updatePost(newHashtag) { // Republish under a different hashtag, or cancel altogether if no newHashtag (which is not allowed as a hashtag).
     resetInactivityTimer();
-    const {lat, lng, hashtag, subject, issuedTime, originalPosting = issuedTime} = this;
-    console.log("updatePost", {newTag, lat, lng, hashtag, subject, issuedTime, originalPosting, self:this});
-    if (!newTag) return Alert.publish({lat, lng, subject, originalPosting, hashtag, payload: null, cancel: null}); // Remove post with null payload, cancel.
-    if (newTag === hashtag) return this.needsRedisplay = true;
-    const cancel = {lat, lng, subject, hashtag}; // Cancel old hashtag as we publish newTag, below.
-    Hashtags.setPublish(newTag);
+    const {lat, lng, hashtag, tag, issuedTime, originalPosting = issuedTime} = this;
+    console.log("updatePost", {newHashtag, lat, lng, hashtag, tag, issuedTime, originalPosting, self:this});
+    if (!newHashtag) return Alert.publish({lat, lng, tag, originalPosting, hashtag, payload: null, cancel: null}); // Remove post with null payload, cancel.
+    if (newHashtag === hashtag) return this.needsRedisplay = true;
+    const cancel = {lat, lng, tag, hashtag}; // Cancel old hashtag as we publish newHashtag, below.
+    Hashtags.setPublish(newHashtag);
     Hashtags.onchange({redisplaySubscribers: false, resetSubscriptions: false});
-    return Alert.publish({lat, lng, hashtag: newTag, originalPosting, cancel}); // Publish new alert w/cancellation.
+    return Alert.publish({lat, lng, hashtag: newHashtag, originalPosting, cancel}); // Publish new alert w/cancellation.
   }
 
   // Each reply is separately published by its author, and only they can modify/unpublish it.
@@ -484,7 +693,6 @@ export class Alert extends Conversation { // A wrapper around L.marker
     return AlertReply;
   }
   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);
@@ -507,13 +715,13 @@ export class Alert extends Conversation { // A wrapper around L.marker
     this.ensureContent();
     return reply;
   }
-  async postReply(event) { // Post a reply to this marker's subject, in response to a text-field change event.
+  async postReply(event) { // Post a reply to this marker's tag, in response to a text-field change event.
     resetInactivityTimer();
     event.stopPropagation();
     const button = event.target;
     const inputElement = button.parentElement;
     let payload = inputElement.value.trim();
-    const {subject, hashtag, lat, lng} = this;
+    const {tag, hashtag, lat, lng} = this;
     const region = P2PWebNetwork.regionCode(lat, lng);
     const files = inputElement.parentElement.querySelector('input[type="file"]').files;
     if (!payload && !files.length) return;
@@ -524,17 +732,17 @@ export class Alert extends Conversation { // A wrapper around L.marker
       const {topic:file, msgIds} = await contact.chunkifyBlob({blob: files[0], region});
       payload = {message: payload, file};
     }
-    await contact.publish({eventName: subject, region, payload}); // Publish the new reply.
+    await contact.publish({eventName: tag, region, payload}); // Publish the new reply.
     Agent.current.persistPublicMetadata();
   }
   deleteReply(replyElement) {
     resetInactivityTimer();
-    const {lat, lng, subject} = this;
+    const {lat, lng, tag} = this;
     const region = P2PWebNetwork.regionCode(lat, lng);
-    const killTag = replyElement.dataset.subject;
+    const killTag = replyElement.dataset.tag;
     networkPromise.then(async contact => {
       // We won't be here unless we are the signer.
-      await contact.publish({eventName: subject, region, killTag, payload: null});
+      await contact.publish({eventName: tag, 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 || {};
@@ -546,7 +754,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       }
     });
   }
-  showNotification({issuedTime = this.issuedTime, body = '', agent = this.agent, alert = this.subject, lat = this.lat, lng = this.lng, hashtag = this.hashtag}) {
+  showNotification({issuedTime = this.issuedTime, body = '', agent = this.agent, alert = this.tag, lat = this.lat, lng = this.lng, hashtag = this.hashtag}) {
     // Give OS notification that comes back to here, unless act is us.
     // All notifications on the same alert (e.g., the post and each reply) have the same tag, so OS can collapse them.
     if (agent === Agent.tag || !notificationsAllowed()) return;
@@ -564,12 +772,12 @@ export class Alert extends Conversation { // A wrapper around L.marker
       registration.showNotification(hashtag, options);
     });
   }
-  // Each reply element is a DIV.reply with data-subject and data-text attributes that are used in sharing.
+  // Each reply element is a DIV.reply with data-tag and data-text attributes that are used in sharing.
   // It contains an attribution header with controls, zero or one attachments, and then the message text.
   // If present the attachment will be an A element with download attribute, surrounding either an IMG, A/V player, or an attachment icon followed by the file name.
   formatReplies() { // Answer HTML for the replies and input box.
     const { items, agent, originalPosting } = this;
-    const formatReply = ({subject, payload, ...rest}) => {
+    const formatReply = ({tag, payload, ...rest}) => {
       const {message = payload, file, name} = payload || {}; // Message text converts recognized urls to A/V players or links.
       let text = message
 	  .replace(/https?:\/\/\S+\.(mp3|aac|ogg|oga|opus|m4a|m3u8|m3u|mpu|mpd)$/ig, url => `<audio controls src="${url}" crossorigin="anonymous"></audio>`) // show audio urls as players
@@ -587,7 +795,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
   </a>
 </div>`;
       const messageDisplay = message ? `<span class="message">${text}</span>` : '';
-      let dataAttributes = `data-subject="${subject}" data-text="${message}"`;
+      let dataAttributes = `data-tag="${tag}" data-text="${message}"`;
       if (file) dataAttributes += ` data-file="${file}" data-name="${name}"`;
       return `<div class="reply" ${dataAttributes}>${this.formatAttribution(rest)}${attachment}${messageDisplay}</div>`;
     };
@@ -608,18 +816,23 @@ export class Alert extends Conversation { // A wrapper around L.marker
 
   async share(event) { // Share reply or post
     resetInactivityTimer();
-    // TODO: Preserve attribution data. Maybe by including the subject reply tag in the url, and metadata in the text?
+    // TODO: Preserve attribution data. Maybe by including the tag reply tag in the url, and metadata in the text?
     const shareable = event.currentTarget.closest('[data-text]');
     const {text, file, name = 'unknown'} = shareable.dataset;
     const {lat, lng} = this;
     console.log('Share', shareable.dataset);
-    const url = getShareableURL(this.subject, [this.hashtag]).href;
+    const url = getShareableURL(this.tag, [this.hashtag]).href;
     let textBase = `New CivilDefense.io alert @${lat},${lng}`;
     const extendedText = text ? `${textBase}\n${text}` : textBase;
     const data = {text: extendedText, url};
     if (file) data.files = [await P2PWebNetwork.dataURL2blob(file, name)];
     share(data);
   }
+  startExpiration(selector, remaining) { // Setup or update fader and destroy-on-expiration.
+    clearTimeout(this.destroyer);
+    this.destroyer = setTimeout(() => this.destroy(), remaining);
+    this.startFader(selector, remaining);
+  }
   startFader(selector, remaining) { // Set up or update fader on the specified marker element, returning that element.
     const { marker } = this;
     const markerElement = marker.getElement();
@@ -644,15 +857,5 @@ export class Alert extends Conversation { // A wrapper around L.marker
     }, interval);
     return element;
   }
-  destroy() { // Remove this Alert pin entirely.
-    clearInterval(this['.alert-pin']);
-    clearInterval(this['.alert-commented']);
-    clearInterval(this.destroyer);
-    this.clearAvatars();
-    // Unsubscribe from replies.
-    networkPromise?.then(async contact => contact.subscribe({eventName: this.subject, region: this.region, handler: null}));
-    this.marker.removeFrom(map);
-    super.destroy();
-  }
 }
 globalThis.Alert = Alert; // for debugging

package/public/javascripts/conversation.js

@@ -19,7 +19,7 @@ export class Tagged { // Maintains cached existence within a (possibly instance-
     for (const key in properties) {
       const existing = this[key];
       const proposed = properties[key];
-      if (JSON.stringify(existing) !== JSON.stringify(proposed)) throw new Error(`Cannot update '${key}' from ${existing} to ${proposed}.`);
+      if (JSON.stringify(existing) !== JSON.stringify(proposed)) throw new Error(`Cannot update '${key}' in ${this.constructor.name} ${this.tag} from ${JSON.stringify(existing)} to ${JSON.stringify(proposed)}.`);
     }
     return this;
   }
@@ -32,13 +32,15 @@ export class Tagged { // Maintains cached existence within a (possibly instance-
 
   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);
+    let item = container.getItem(tag); // existing item
     if (!payload) return item?.destroy();
+
+    // update or create item.
     if (item) item = await item.update(data);
     else item = await (new kind().initialize({...data, container}));
 
     if (!item) return container.removeItem(tag)?.destroy();
-    return container.setItem(tag, item);
+    return container.setItem(item.tag, item); // initialize() may come up with a better tag.
   }
 }
 

package/public/javascripts/p2pWebNetwork.js

@@ -251,7 +251,7 @@ export class P2PWebNetwork {
   }
   shortHealth(health = this.peer.health()) { // Info-report a short form of health.
     const roots = health.axonRoles.filter(r => r.isRoot);
-    this.info(`disconnected with connections ${health.peers.map(P2PWebNetwork.short)}\nand ${roots.length ? `roots ${roots.map(r => P2PWebNetwork.short(r.topic))}.` : 'no roots.'}`);
+    this.info(`disconnected with ${health.peers.length} connections: ${health.peers.map(P2PWebNetwork.short)}\nand ${roots.length ? `roots ${roots.map(r => P2PWebNetwork.short(r.topic))}.` : 'no roots.'}`);
   }
   inRegionConnections(health = this.peer.health()) {
     const region = this.nodeIdentity.id.slice(0, 2);

package/public/javascripts/protocol.js

@@ -6,7 +6,7 @@ let connect, createAuthorIdentity, geoCellId, geoCellCenter, WIRE_VERSION, KERNE
 // dht 1  -> Axona
 // dht 0  -> server
 // dht -1 -> in-memory on client only
-const defaultDHT = 1;
+const defaultDHT = globalThis.process ? 1 : 0; // Browser defaults to no Axona. Server nodes and alert-bot default to Axona.
 export const dht = parseInt((globalThis.process ?
 			     globalThis.process.env.DHT :
 			     new URL(globalThis.location).searchParams.get('dht')) ?? defaultDHT);
@@ -14,7 +14,7 @@ export const dht = parseInt((globalThis.process ?
 if (dht < 1) {
 
   const { v4:uuidv4 } = await import('uuid');
-  const { getContainingCells, getPointInCell } = await import('./s2.js');
+  const { getSmallestCellId, getPointInCell } = await import('./s2.js');
   const { cellHex } = await import('./versions.js');
   const operator = await import('./pubsub.js');
 
@@ -38,8 +38,8 @@ if (dht < 1) {
       return {authorId: tag};
     };
   geoCellId = (lat, lng) => {
-    const cells = getContainingCells(lat, lng);
-    const hex = cellHex(cells[0]);
+    const cellid = getSmallestCellId(lat, lng);
+    const hex = cellHex(cellid);
     const sliced = hex.slice(0, 2);
     return parseInt(sliced, 16); // The worst way to do this.
   };
@@ -99,7 +99,7 @@ if (dht < 1) {
 
 	  if ((!subHandler && !inFlightResolver) || // debug
 	      ((typeof(subHandler) !== 'function') && (typeof(inFlightResolver) !== 'function')))
-	    console.log({tag, rest, subHandler, inFlightResolver, handlers, inFlight});
+	    console.warn('no handler or request', {tag, rest, subHandler, inFlightResolver, handlers, inFlight});
 
 	  if (subHandler) return subHandler(...rest);
 	  delete inFlight[tag];
@@ -107,7 +107,7 @@ if (dht < 1) {
 	};
 	socket.onopen = () => {
 	  if (socket.readyState !== WebSocket.OPEN) return; // You would think that can't happen, but...
-	  resolve((...rest) => { // send()
+	  resolve((...rest) => { // Promise the send() function.
 	    const tag = uuidv4();
 	    const {promise, resolve} = Promise.withResolvers();
 	    inFlight[tag] = resolve;
@@ -154,10 +154,12 @@ if (dht < 1) {
       kill(topic, msgId, options) {
 	return send('unpublish', topic, msgId, options);
       },
+      lookup() { return {}; },
       host() {},
       unhost() {}
     };
     const status = {peers: 0, ms: 0}; // fixme ms
+    await new Promise(resolve => setTimeout(resolve, 1e3)); // Simulate finding peers, and give the app some time to do stuff.
     return { peer, nodeIdentity, transport, status, disconnect };
   };
 

package/public/javascripts/pubsub.js

@@ -1,9 +1,18 @@
 // In memory pubsub, for either client-only testing, or server-websocket testing
 const { v4:uuidv4 } = await import('uuid');
 const { TextEncoder, crypto, Buffer } = globalThis;
+const publicationRolloverLimit = 1000;
 
 function setBucket(collection, type, topicId, subject, value) { // Set value in the collection.
   const bucket = collection[type][topicId] ||= {};
+  if ((collection === data) && (type === 'pub')) {
+    const keys = Object.keys(bucket);
+    const size = keys.length;
+    if (size >= publicationRolloverLimit) {
+      console.warn('Over pub limit on topic', topicId, size); // TODO: rotate out the earliest received.
+      delete bucket[keys[0]];
+    }
+  }
   bucket[subject] = value;
 }
 function removeBucket(collection, type, topicId, subject) { // Return the value and stop storing it.
@@ -20,7 +29,7 @@ const PUBLISH_TIMEOUT = 24 * 60 * 60e3;      // Delete after 24 hours.
 const timeouts = {pub: {}, sub: {}};
 function expire(type, topicId, subject, remover, timeout) { // Cancellably schedule remover() to fire at timeout.
   if (!timeout) return;
-  setBucket(timeouts, type, topicId, subject, setTimeout(remover, timeout));
+  setBucket(timeouts, type, topicId, subject, setTimeout(() => { remover(); cancel(type, topicId, subject); }, timeout));
 }
 function cancel(type, topicId, subject) { // Cancel a sheduled expiration.
   clearTimeout(removeBucket(timeouts, type, topicId, subject));
@@ -46,25 +55,34 @@ function normalizeTopic({name, region, owner, write = 'open'} = {}) {
 function deriveTopicId(topic) {
   return JSON.stringify(normalizeTopic(topic)); // No need to hash in this implementation.
 }
+function delay(ms = 0) {
+  return ms && new Promise(resolve => setTimeout(resolve, ms));
+}
 
 let invoke;
 export function setReceiver(receiver) {
   invoke = receiver;
 }
+const throttleMS = 30; // Just to yield to other stuff.
+async function pauseInvoke(...rest) {
+  invoke(...rest);
+  await new Promise(resolve => setTimeout(resolve, throttleMS));
+}
 
-export function subscribe(topicName, nodeTag, {since = 'all'}) {
+export async function subscribe(topicName, nodeTag, {since = 'all'}) {
   // Axona allows multiple handlers on the same topic, but we don't use that in civildefense, and do not implement it here.
   const topicId = deriveTopicId(topicName);
   const id = uuidv4();
   cancel('sub', topicId, id);
   expire('sub', topicId, id, () => deleteSub(topicId, id), SUBSCRIPTION_TIMEOUT);
   setBucket(data, 'sub', topicId, nodeTag, id);
-  if (since) setTimeout(() => { // invoke handler on any sticky data, but only after we have told client the subscription id.
+  if (since) { // invoke handler on any sticky data, but only after we have told client the subscription id.
+    await delay(100);
     let lastEnvelope = null, lastTime = 0;
     for (const envelope of getDataValues('pub', topicId)) {
       switch (since) {
       case 'all':
-	invoke(nodeTag, id, envelope);
+	await pauseInvoke(nodeTag, id, envelope);
 	break;
       case 'latest':
 	if (envelope.ts > lastTime) {
@@ -73,11 +91,11 @@ export function subscribe(topicName, nodeTag, {since = 'all'}) {
 	}
 	break;
       default: // Must be a timestamp
-	if (envelope.ts === since) invoke(nodeTag, id, envelope);
+	if (envelope.ts === since) await pauseInvoke(nodeTag, id, envelope);
       }
     }
     if (lastEnvelope) invoke(nodeTag, id, lastEnvelope);
-  }, 100);
+  }
   return {topicName, topicId, id};
 }
 
@@ -92,7 +110,10 @@ export function deleteSubscriber(nodeTag) {
   for (const topicId in data.sub)  {
     const keySubs = data.sub[topicId];
     for (const [subject, value] of Object.entries(keySubs)) {
-      if (nodeTag === subject) deleteSub(topicId, subject, keySubs);
+      if (nodeTag === subject) {
+	deleteSub(topicId, subject, keySubs);
+	cancel('sub', topicId, subject);
+      }
     }
   }
 }
@@ -106,19 +127,19 @@ export async function publish(topic, message, {signWith}) {
   const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(payload));
   const msgId = toHex(new Uint8Array(hash));
   const envelope = {msgId, topic, ts: Date.now(), message, signerPubkey};
-  for (const [nodeTag, id] of getDataEntries('sub', topicId)) invoke(nodeTag, id, envelope);
+  for (const [nodeTag, id] of getDataEntries('sub', topicId)) await pauseInvoke(nodeTag, id, envelope);
   setBucket(data, 'pub', topicId, msgId, envelope);
   expire('pub', topicId, msgId, () => removeBucket(data, 'pub', topicId, msgId), PUBLISH_TIMEOUT);
   return msgId;
 }
 
-export function unpublish(topic, msgId, {signWith}) {
+export async function unpublish(topic, msgId, {signWith}) {
   const topicId = deriveTopicId(topic);  
   cancel('pub', topicId, msgId);
   const envelope = removeBucket(data, 'pub', topicId, msgId);
   if (!envelope) return {ok: false}; // we didn't have it.
   envelope.deleted = true;
   envelope.message = null;
-  for (const [nodeTag, id] of getDataEntries('sub', topicId)) invoke(nodeTag, id, envelope);
+  for (const [nodeTag, id] of getDataEntries('sub', topicId)) await pauseInvoke(nodeTag, id, envelope);
   return {ok: true};
 }

package/public/javascripts/s2.js

@@ -1,6 +1,7 @@
 import { s2, s1, r1 } from 's2js';
 const { cellid, LatLng, Point, Cell, Cap, RegionCoverer } = s2;
 import { cellHex } from './versions.js';
+import { geoCellCenter/*, geoCellId*/ } from '@axona/protocol';
 const { BigInt } = globalThis;
 
 // s2 defines non-overlapping cells that completely cover the globe, at several different levels of cell-size.
@@ -12,43 +13,59 @@ const { BigInt } = globalThis;
 // Meanwhile as the user changes the area being shown, we subscribe to whatever cells we need in order to cover the display
 // area without overlapping cells.
 
-export const MIN_LEVEL = 3; // Corresponds to the top level Axona regions.
+export const MIN_LEVEL = 3; // The largest cell that is still smaller than an Axona region.
 const MAX_S2_LEVEL = 30; // The leaf level that Cell.fromPoint operates at.
 const MAX_MAP_LEVEL = 17; // The max level that findCoverCellsByCenterAndRadius will use on our maps.
 
 const EARTH_RADIUS_METERS = 6371e3;
 
 export function getPointInCell(cellId) { // answer [lat, lng] in degrees from a BigInt
+  // const {lat, lng} = geoCellCenter(cellid);
+  // return [lat, lng];
   // CAUTION: This is intended for s2 level 3 or finer, and won't always work symmetrically for our top-level regions.
   // e.g. getContainingCells(...getPointInCell( cell for 0x47 )][0] is 0x46!
   let center = s2.cellid.latLng(cellId);
   return [s1.angle.degrees(center.lat), s1.angle.degrees(center.lng)];
 }
 
-function getCellSubdivision(cell) {
+function getCellSubdivision(cell) { // Answer four children off BigInt cell, as BigInt.
   return cellid.children(cell);
 }
-function getCellLevel(cell) {
+export function getSubdivision(hexString) { // Same as getCellSubDivision, but accepting and returning hex strings.
+  return getCellSubdivision(BigInt('0x' + hexString)).map(childCell => cellHex(childCell));
+}
+function getCellLevel(cell) { // Answer level of BigInt cell, as number.
   return cellid.level(cell);
 }
-function getFace(cell) {
+function getCellFace(cell) { // Answer top level face id of BigInt cell, as integer 0 through 5.
   return cellid.face(cell);
 }
-export function getSubdivision(hexString) {
-  return getCellSubdivision(BigInt('0x' + hexString)).map(childCell => cellHex(childCell));
+export function cellContains(putativeOuter, putativeInner) { // Answer true IFF putativeOuter BigInt cell contains putativeInner
+  return cellid.contains(putativeOuter, putativeInner);
+}
+export function pointFromLatLng(lat, lng) { // Answer an s2 Point from lat/lng in degrees.
+  const latLng = LatLng.fromDegrees(lat, lng);
+  return Point.fromLatLng(latLng);
+}
+export function cellFromCellID(bigint) {
+  return Cell.fromCellID(bigint);
+}
+export function getSmallestCellId(lat, lng, level = MAX_MAP_LEVEL) { // Answer smallest BigInt cellid containing latitude/longitude in degrees, at integer level.
+  const userPt = pointFromLatLng(lat, lng);
+  const userLocCellId = Cell.fromPoint(userPt).id; // This is at MAX_S2_LEVEL
+  return cellid.parent(userLocCellId, level);
 }
 
-// Return a list of the cell ids that contain the point.
+// Return a list of the cell ids that contain the point, from region to MAX_S2_LEVEL
+// Note that the first of the cells (the region
 export function getContainingCells(lat, lng) {
-  const userLatLng = LatLng.fromDegrees(lat, lng);
-  const userPt = Point.fromLatLng(userLatLng);
-  // Get leaf-level CellId (level 30)
-  const userLocCellId = Cell.fromPoint(userPt).id; // This is at level 30.
-  let cells = Array(MAX_S2_LEVEL);
-  for (let level = 0; level <= MAX_S2_LEVEL; level++) { // This would be more efficient going backwards using immediateParent, but who cares.
-    cells[level] = cellid.parent(userLocCellId, level);
+  let id = getSmallestCellId(lat, lng);
+  const level = MAX_MAP_LEVEL, cells = Array(MAX_MAP_LEVEL + 1 - MIN_LEVEL);
+  for (let index = level - MIN_LEVEL; index >= 0; index--) {
+    cells[index] = id;
+    id = cellid.immediateParent(id);
   }
-  return cells.slice(MIN_LEVEL, MAX_MAP_LEVEL + 1); // We can only make use between Axona region size and the smallest region our maps subscribe to.
+  return cells;
 }
 
 export function findCoverCellsByMinMaxLatLng({minLat, maxLat, minLng, maxLng, full = false,
@@ -58,8 +75,8 @@ export function findCoverCellsByMinMaxLatLng({minLat, maxLat, minLng, maxLng, fu
 
   // There are a lot of ways that seem like they do this, but it is very easy to find something that works for a few cases,
   // but misses cells in some circumstances, so be wary about rewriting this.
-  const lo = s2.LatLng.fromDegrees(minLat, Math.max(minLng, -180));
-  const hi = s2.LatLng.fromDegrees(maxLat, Math.max(maxLng, 190));
+  const lo = LatLng.fromDegrees(minLat, minLng);
+  const hi = LatLng.fromDegrees(maxLat, maxLng);
 
   const rect = full ? s2.Rect.fullRect() : new s2.Rect(
     new r1.Interval(lo.lat, hi.lat),
@@ -69,4 +86,3 @@ export function findCoverCellsByMinMaxLatLng({minLat, maxLat, minLng, maxLng, fu
   const coverer = new RegionCoverer({minLevel, maxLevel, maxCells});
   return coverer.covering(rect); // a CellUnion — array-like of bigint cell IDs, already normalized/minimal
 }
-

package/public/javascripts/versions.js

@@ -25,10 +25,13 @@ export function cellHex(cellid) { // Convert cellid BigInt to properly padded he
 export function alertTopic(cellid, tag) { // Return topic name for public info about specified tag in cellid.
   return `civildefense.io:${dataVersion}:${cellHex(cellid)}:${canonicalTag(tag)}`;
 }
-export function topicCell(topicName) { // Return the cell that is baked in to the topic.
+export function topicCellHex(topicName) { // Return the hex string cell that is baked in to the topic.
   // Note that canonicalTag(tag) may contain a colon, but dataVersion must not.
   return topicName.match(/civildefense.io:[^:]+:([a-z0-9]+):/)[1];
 }
+export function topicCell(topicName) { // Return the BigInt cell that is baked in to the topic.
+  return BigInt('0x' + topicCellHex(topicName));
+}
 export function topicRegion(topicName) { // Return the region that is baked in to the topic.
-  return '0x' + topicCell(topicName).slice(0, 2);
+  return '0x' + topicCellHex(topicName).slice(0, 2);
 }

package/public/service-worker.js

@@ -1,6 +1,6 @@
 const { Request, Response, URL, clients} = self;
 // Little point in trying to automatically pull this through package.json, as we need a byte change in THIS file to trigger a new worker.
-const serviceVersion = '4.5.22';
+const serviceVersion = '4.5.23';
 
 const cacheList = [ // The files we need.
   "/",
@@ -124,6 +124,8 @@ async function cacheFirst({request, event}) {
   try {
     const responseFromNetwork = await fetch(request);
     if (request.method !== 'GET' || request.cache === 'no-store') return responseFromNetwork; // Cache shouldn't allow anyway.
+    const mime = responseFromNetwork.headers.get("Content-Type");
+    if (/^(audio|video)\//.test(mime)) return responseFromNetwork; // Do not cache streamable media.
     // Put clone of response in cache (so that original can be returned.
     // Tell event to keep worker open while we put it, even though we return response immediately.
     const cache = await caches.open(serviceVersion);

package/public/stylesheets/style.css

@@ -254,6 +254,7 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
 .alert-marker {
     text-shadow: 8px -3px 10px rgb(0 0 0 / 60%);
     animation: pulse ease 0.8s 1;
+    transition: transform 0.8s, opacity 0.4s;
 }
 .alert-commented {
     display: none;
@@ -271,6 +272,30 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     left: 5px;
     text-align: center;
 }
+.aggregate.alert-pin {
+    font-size: 60px;
+    line-height: 60px;
+    top: -10px;
+    left: -10px;
+    transition: font-size 0.8s;
+}
+.aggregate.alert-pin:after {
+    content: "";
+    width: 70px;
+    height: 70px;
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    background-image: radial-gradient(transparent 30%, var(--md-sys-color-primary), transparent 70%);
+    transition: opacity 0.8s;
+    animation: pulse ease 0.8s 1;
+}
+.aggregate.alert-pin.starting {
+    font-size: 0px;
+}
+.aggregate.alert-pin.starting:after {
+    opacity: 0;
+}
 @keyframes pulse {
     0% { filter: saturate(1); }
     25% { filter: saturate(4); }

package/server/app.js

@@ -14,18 +14,33 @@ const argv = yargs(hideBin(process.argv))
       .option('nPortals', {
 	alias: 'p',
 	type: 'number',
-	default: Math.max(2, logicalCores - 3),
+	default: process.env.PORTALS ? parseInt(process.env.PORTALS) : Math.max(2, logicalCores - 3),
 	description: "The number of steady nodes that handle initial connections."
       })
+      .option('regionStartIndex', {
+	type: 'number',
+	default: -1,
+	description: "If non-negative, place each of the nPortals in successive regions (excluding excludedRegionFromSeries) starting with the region at regionStaartIndex."
+      })
+      .option('excludedRegionFromSeries', {
+	type: 'string', array: true,
+	default: ['80', '88', '89'],
+	description: "If regionStartIndex is used, the ordered list of regions to occupy is the list of canonical regions less these."
+      })
       .option('baseURL', {
 	type: 'string',
-	default: 'http://localhost:3000',
+	default: process.env.BRIDGE_URL || 'wss://bridge.axona.net',
 	description: "The base URL of the portal server through which to bootstrap."
       })
-      .option('externalBaseURL', {
-	type: 'string',
-	default: '',
-	description: "The base URL of the some other portal server to which we should connect ours, if any."
+      // .option('externalBaseURL', {
+      // 	type: 'string',
+      // 	default: '',
+      // 	description: "The base URL of the some other portal server to which we should connect ours, if any."
+// })
+      .option('port', {
+	type: 'number',
+	default: 3000,
+	description: "Port for the server to listen on."
       })
       .option('announce', {
 	type: 'boolean',
@@ -61,7 +76,6 @@ if (cluster.isPrimary) { // Parent process with portal webserver through which c
   const logger = (await import('morgan')).default;
   const { configureWebsocket } = await import('./websocket.js');
 
-  const port = parseInt((new URL(argv.baseURL)).port || '80');
   process.title = 'yz.social';
   const app = express();
   app.use(logger(':date[iso] :status :method :url :res[content-length] - :response-time ms'));
@@ -101,8 +115,8 @@ if (cluster.isPrimary) { // Parent process with portal webserver through which c
     extensions: ['js'] // Some dependencies refer to .js files as relative pathnames, with the .js missing.
   }));
 
-  server.listen(port);
-  log(`Listening on ${port} and starting ${argv.nPortals} nodes on ${logicalCores} ${cpus()[0].model} logical cores.`);
+  server.listen(argv.port);
+  log(`Listening on ${argv.port} and starting ${argv.nPortals} nodes on ${logicalCores} ${cpus()[0].model} logical cores.`);
   for (let i = 0; i < argv.nPortals; i++) {
     cluster.fork();
     await delay(); // Number chosen to give an unspikey rise in packets/s.
@@ -118,8 +132,14 @@ if (cluster.isPrimary) { // Parent process with portal webserver through which c
 } else {
   process.title = 'axona-starting';
   const { P2PWebNetwork, location } = await import('../index.js');
+  const { MAJORS, geoCellCenter } = await import('@axona/protocol');
+  const excluded = argv.excludedRegionFromSeries.map(hex => parseInt(hex, 16).toString());
+  const regions = Object.keys(MAJORS).filter(r => !excluded.includes(r));
+  const index = (cluster.worker.id - 1 + argv.regionStartIndex) % regions.length;
+  const region = (argv.regionStartIndex >= 0) && regions[index];
+  const loc = region ? geoCellCenter(parseInt(region)) : location;
   const network = await P2PWebNetwork.create({
-    location,
+    location: loc,
     infoLogger: log,
     debugLogger: debug
   });

package/server/websocket.js

@@ -31,6 +31,7 @@ export function configureWebsocket(server) {
     ws.on('error', console.error);
     ws.on('close', () => {
       console.log('Disconnected', nodeTag);
+      delete sockets[nodeTag];
       operator.deleteSubscriber(nodeTag);
     });
   });
@@ -42,5 +43,5 @@ export function configureWebsocket(server) {
       ws.ping();
       return null;
     });
-  }, 30e3);
+  }, 20e3);
 }