Use core query logger helper in dev demos

Replace the demo-local event bus observers with the shared observeLogger helper from mosaic-core. This keeps the dev pages aligned with the public event-bus logging path instead of duplicating logging logic in each demo.

The gallery query log checkbox now installs and removes the observer cleanly, so repeated toggles do not stack listeners. The dev pages also use vg.coordinator() consistently when updating coordinator settings.

Author: SeanCassiere

dev/index.html

@@ -113,7 +113,7 @@
   <div id="view"></div>
 <script type="module">
   import yaml from '../node_modules/yaml/browser/index.js';
-  import { astToDOM, astToESM, clear, parseSpec, setDatabaseConnector, vg } from './setup.ts';
+  import { astToDOM, astToESM, clear, observeLogger, parseSpec, setDatabaseConnector, vg } from './setup.ts';
 
   const view = document.querySelector('#view');
   const connectorMenu = document.querySelector('#connectors');
@@ -124,6 +124,7 @@
   const consolidateToggle = document.querySelector('#consolidate');
   const preaggToggle = document.querySelector('#preagg');
   const preaggState = document.querySelector('#preagg-state');
+  let unobserveQueryLog;
 
   connectorMenu.addEventListener('change', setConnector);
   exampleMenu.addEventListener('change', reload);
@@ -156,29 +157,22 @@
   }
 
   function setQueryLog() {
-    const bus = coordinator().eventBus;
-
-    bus.observe("query-start", (event) =>
-      console.info("Query started:", event),
-    );
-    bus.observe("query-end", (event) => console.info("Query ended:", event));
-    bus.observe("client-connect", (event) =>
-      console.info("Client connected:", event),
-    );
-    bus.observe("warning", (event) => console.warn("Warning:", event));
-    bus.observe("error", (event) => console.error("Error:", event));
+    unobserveQueryLog?.();
+    unobserveQueryLog = qlogToggle.checked
+      ? observeLogger(vg.coordinator(), console)
+      : undefined;
   }
 
   function setCache() {
-    coordinator().manager.cache(cacheToggle.checked);
+    vg.coordinator().manager.cache(cacheToggle.checked);
   }
 
   function setConsolidate() {
-    coordinator().manager.consolidate(consolidateToggle.checked);
+    vg.coordinator().manager.consolidate(consolidateToggle.checked);
   }
 
   function setPreAggregate() {
-    coordinator().preaggregator.enabled = preaggToggle.checked;
+    vg.coordinator().preaggregator.enabled = preaggToggle.checked;
   }
 
   function reload() {

dev/query/index.html

@@ -29,7 +29,7 @@
     <br/>
     <div id="output"></div>
 <script type="module">
-  import { setDatabaseConnector, vg } from '../setup.js';
+  import { observeLogger, setDatabaseConnector, vg } from '../setup.js';
   const tableName = 'query_result';
 
   const input = document.querySelector('#input');
@@ -74,21 +74,7 @@
     enable();
   });
 
-  function setQueryLog() {
-    const bus = vg.coordinator().eventBus;
-
-    bus.observe("query-start", (event) =>
-      console.info("Query started:", event),
-    );
-    bus.observe("query-end", (event) => console.info("Query ended:", event));
-    bus.observe("client-connect", (event) =>
-      console.info("Client connected:", event),
-    );
-    bus.observe("warning", (event) => console.warn("Warning:", event));
-    bus.observe("error", (event) => console.error("Error:", event));
-  }
-
-  setQueryLog()
+  observeLogger(vg.coordinator(), console);
 </script>
   </body>
 </html>

dev/setup.ts

@@ -1,7 +1,8 @@
-import { DuckDBWASMConnector, RestConnector, SocketConnector } from '@uwdata/mosaic-core';
+import { DuckDBWASMConnector, observeLogger, RestConnector, SocketConnector } from '@uwdata/mosaic-core';
 import { createAPIContext } from '@uwdata/vgplot';
 
 export { parseSpec, astToDOM, astToESM } from '@uwdata/mosaic-spec';
+export { observeLogger };
 export const vg = createAPIContext();
 
 // make API accessible for console debugging