@yz-social/civildefense.io 4.5.9 → 4.5.16

package/index.js

@@ -1,4 +1,5 @@
 export { P2PWebNetwork } from "./public/javascripts/p2pWebNetwork.js";
-export { agentTopic, alertTopic, canonicalTag } from "./public/javascripts/versions.js";
+export { topicRegion, agentTopic, alertTopic, canonicalTag } from "./public/javascripts/versions.js";
 export { getContainingCells } from "./public/javascripts/s2.js";
 export { location } from "./server/getLocation.js";
+export { deriveTopicIdBig } from "@axona/protocol";

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.9",
+  "version": "4.5.16",
   "keywords": [
     "map",
     "browser",
@@ -10,14 +10,16 @@
   "scripts": {
     "start": "npm stop; node ./server/app.js",
     "stop": "pkill yz.social",
-    "postinstall": "touch server/location.json; chmod a+w server/location.json"
+    "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"
   },
   "type": "module",
   "exports": {
     ".": "./index.js"
   },
   "dependencies": {
-    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.48.0",
+    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.59.2",
     "cors": "^2.8.6",
     "express": "^4.22.1",
     "leaflet": "^1.9.4",

package/public/index.html

@@ -25,12 +25,11 @@
           "uuid": "https://unpkg.com/uuid@13.0.0/dist/index.js",
           "@material/web/": "https://esm.run/@material/web/",
           "s2js": "./s2js/s2js.esm.js",
-	  "bigfloat": "./bigfloat/esm/index.js",
-      "leaflet": "./leaflet/leaflet-src.esm.js",
-	  "minidenticons": "./minidenticons/minidenticons.min.js",
-	  "@axona/protocol": "./axona-protocol/src/index.js",
-          "@axona/protocol/std": "./axona-protocol/std/index.js",
-	  "@axona/protocol/connect.js": "./axona-protocol/src/connect.js"
+          "bigfloat": "./bigfloat/esm/index.js",
+          "leaflet": "./leaflet/leaflet-src.esm.js",
+          "minidenticons": "./minidenticons/minidenticons.min.js",
+          "@axona/protocol": "./axona-protocol/src/index.js",
+          "@axona/protocol/std": "./axona-protocol/std/index.js"
         }
       }
     </script>

package/public/javascripts/agent.js

@@ -1,7 +1,6 @@
 const { localStorage } = globalThis;
 import { v4 as uuidv4 } from 'uuid';
 import { minidenticonSvg } from 'minidenticons';
-import { createAuthorIdentity }  from '@axona/protocol';
 import { agentTopic, agentPersistKey } from './versions.js';
 import { Int } from './translations.js';
 import { consume, openDisplay } from './display.js';
@@ -65,7 +64,7 @@ export class Agent {
       const owner = this.tag;
       ['handle', 'avatar'].forEach(type => {
 	const eventName = this.networkPersistKey(type);
-	contact.subscribe({eventName, region, owner, /*since: 'latest',*/ handler: data => this.setPublicData({...data, type})});
+	contact.subscribe({eventName, region, owner, since: 'latest', handler: data => this.setPublicData({...data, type})});
       });
     });
   }
@@ -129,23 +128,25 @@ export class Agent {
     const eventName = this.networkPersistKey(type);
     const region = this.currentRegion;
     const owner = this.tag;
-    // TODO: set owner as well.
     const contact = await networkPromise;
-    if (value) {
-      let payload = value;
-      // Our downsampling is such that we do not need to chunkify.
-      // if (type === 'avatar') {
-      // 	const blob = await P2PWebNetwork.dataURL2blob(value);
-      // 	payload = (await contact.chunkifyBlob({blob, region})).topic;
-      // }
-      return contact.publish({eventName, region, owner, payload});
-    }
-    // For now, until since:'latest' works, supply a null payload and no subject.
-    await contact.publish({eventName, region, owner, payload: null});
-    // const subject = this.publicMsgId[type];
-    // if (!subject) return null; // We have not published a value, so nothing to kill.
-    // await contact.publish({eventName, region, owner, subject, payload: null});
-    // return null;
+
+    // First kill previous, if any.
+    // Publish doesn't know whether subscribers will be since all or latest, so it must retain all unkilled.
+    // Thus if we only kill the last one when there is no value,
+    // a subscribe since:latest will produce the PREVIOUS value -- the last unkilled one.
+
+    const killTag = this.publicMsgId[type];
+    console.log('persist', {type, killTag, value: value && value.slice(0, 15)});
+    if (killTag) await contact.publish({eventName, region, owner, killTag, payload: null});
+
+    if (!value) return null;
+    let payload = value;
+    // Our downsampling is such that we do not need to chunkify.
+    // if (type === 'avatar') {
+    // 	const blob = await P2PWebNetwork.dataURL2blob(value);
+    // 	payload = (await contact.chunkifyBlob({blob, region})).topic;
+    // }
+    return contact.publish({eventName, region, owner, payload});
   }
 
   // We represent handles and avatars by inserting stuff into given elements.
@@ -156,8 +157,9 @@ export class Agent {
     element.textContent = value || '(none)';
     element.value = value || ''; // Hack: handle input[type="text"] as well. Must be property assignment, not attribute.
   }
+  static spinner = 'images/loading.gif';
   static avatar(element, value) { // Update avatar element with value.
-    element.innerHTML = value === null ? '(none)' : (value.startsWith('data') ? this.makeImage(value) : Agent.makeIdenticon(value));
+    element.innerHTML = value === null ? '(none)' : (value === this.spinner || value.startsWith('data') ? this.makeImage(value) : Agent.makeIdenticon(value));
   }
   static downsampleResolution = 128; // max height or width
   static makeImage(url) {
@@ -237,11 +239,8 @@ export class Agent {
 	this.updateValue(null, 'private', 'avatar');
       };
       fileChooser.onchange = async event => {
-	consume(event);
-	if (!fileChooser.files.length) return;
-	const blob = await P2PWebNetwork.downsampledBlob({blob: fileChooser.files[0], maxDimension: Agent.downsampleResolution});
-	this.updateValue(await P2PWebNetwork.blob2dataURL(blob), 'private', 'avatar');
-	console.log('clearing avatar selection');
+	await this.fileEvent(fileChooser, event, 'private');
+	console.log('cleared avatar selection');
       };
       fileChooser.click();
     });
@@ -263,6 +262,16 @@ export class Agent {
       content.parentElement.classList.toggle('hidden', true);
     };
   }
+  async fileEvent(fileChooser, event, scope) { // Update value from fileChooser change event, return dataURL;
+    consume(event);
+    if (!fileChooser.files.length) return '';
+    const file = fileChooser.files[0];
+    const maxDimension = Agent.downsampleResolution;
+    const blob = await P2PWebNetwork.downsampledBlob({blob: file, maxDimension});
+    const dataURL = await P2PWebNetwork.blob2dataURL(blob);
+    await this.updateValue(dataURL, scope, 'avatar');
+    return dataURL;
+  }
   static current = null;
   static tag = null;
   static identity = null;
@@ -275,7 +284,7 @@ export class Agent {
   static async initialize() { // Initialize what the agent needs from the about screen
     let tag = localStorage.getItem('usertag');
     const persistAs = tag || uuidv4(); // Give it SOMETHING to persistAs.
-    const myIdentity = await createAuthorIdentity({persistAs});
+    const myIdentity = await P2PWebNetwork.createAuthorIdentity({persistAs});
     if (tag !== persistAs) { // Fix up persistence by moving it to where it need to go.
       // WARNING: This relies on undocumented behavior of createAuthorIdentity().
       const realTag = myIdentity.authorId;
@@ -304,17 +313,15 @@ export class Agent {
       fileChooser.oncancel = event => {
 	consume(event);
 	console.log('cancel my avatar');
+	myAgent.updateValue(this.spinner, 'public', 'avatar', false);
 	myAgent.updateValue(null, 'public', 'avatar');
 	myAgent.persistPrivate(null, 'avatar'); // So that we'll have it next session.
 	console.log('clearing avatar selection');
       };
       fileChooser.onchange = async event => {
-	consume(event);
-	if (!fileChooser.files.length) return;
-	const blob = await P2PWebNetwork.downsampledBlob({blob: fileChooser.files[0], maxDimension: Agent.downsampleResolution});
-	const url = await P2PWebNetwork.blob2dataURL(blob);
+	myAgent.updateValue(this.spinner, 'public', 'avatar', false);
+	const url = await myAgent.fileEvent(fileChooser, event, 'public');
 	console.log('set my avatar', url.slice(0, 50));
-	myAgent.updateValue(url, 'public', 'avatar');
 	myAgent.persistPrivate(url, 'avatar'); // So that we'll have it next session.
       };
       fileChooser.click();

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);
@@ -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);
   }
 }
 
@@ -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,13 +235,13 @@ 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;
     }
   }
   
@@ -225,7 +252,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
   }
   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.
@@ -444,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;
@@ -562,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.
@@ -572,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]);
@@ -593,3 +639,4 @@ export class Alert extends Conversation { // A wrapper around L.marker
     super.destroy();
   }
 }
+globalThis.Alert = Alert; // for debugging