yearbook widget

js/deck-gl/core/calc_viewport.js

@@ -59,7 +59,7 @@ export const calc_viewport = async (
     tile_size
   );
 
-  if (tiles_in_view.length < viz_state.max_tiles_to_view) {
+  if (tiles_in_view.length <= viz_state.max_tiles_to_view) {
     viz_state.obs_store.deck_check.set({
       ...viz_state.obs_store.deck_check.get(),
       trx_data: false,

js/deck-gl/core/deck_ist.js

@@ -11,10 +11,19 @@ const getCursor = ({ isDragging }) => {
   return 'pointer';
 };
 
-export const ini_deck = (root, width, height, technology = '') => {
-  const controller = { doubleClickZoom: false };
-  if (technology === 'point-cloud') {
-    controller.type = OrbitController;
+export const ini_deck = (
+  root,
+  width,
+  height,
+  technology = '',
+  controllerOverrides = null
+) => {
+  let controller = controllerOverrides;
+  if (controller === null || controller === undefined) {
+    controller = { doubleClickZoom: false };
+    if (technology === 'point-cloud') {
+      controller.type = OrbitController;
+    }
   }
 
   const deck_ist = new Deck({

js/widget.css

@@ -21,3 +21,109 @@
 .celldega-counter-button:hover {
   transform: scale(1.05);
 }
+
+.celldega-yearbook-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.celldega-yearbook-mode-buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.celldega-yearbook-button {
+  background: transparent;
+  border: 1px solid #8797ff;
+  color: #3366cc;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 4px 8px;
+  transition: background 0.15s ease;
+}
+
+.celldega-yearbook-button:hover {
+  background: #eef2ff;
+}
+
+.celldega-yearbook-controls select,
+.celldega-yearbook-controls button {
+  padding: 4px 8px;
+  font-size: 0.9em;
+}
+
+.celldega-yearbook-slider-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 2px 6px;
+  background: #f7f8fb;
+  border-radius: 6px;
+}
+
+.celldega-yearbook-slider-row input[type='range'] {
+  accent-color: #3366cc;
+}
+
+.celldega-yearbook-slider-value {
+  font-weight: 600;
+  color: #3366cc;
+}
+
+.celldega-yearbook-toggle-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.celldega-yearbook-toggle {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  font-size: 0.9em;
+}
+
+.celldega-yearbook-bars {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+.celldega-yearbook-bar {
+  flex: 1;
+  min-width: 160px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  padding: 6px;
+  background: #fafbff;
+}
+
+.celldega-yearbook-bar-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.celldega-yearbook-bar-row span {
+  width: 60px;
+  font-size: 0.8em;
+  color: #444;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.celldega-yearbook-bar-fill {
+  height: 10px;
+  border-radius: 4px;
+  background: #8797ff;
+}
+
+.celldega-yearbook-grid {
+  border: 1px solid #d3d3d3;
+  width: 100%;
+}

js/widget.js

@@ -11,6 +11,7 @@ import { landscape_ist } from './viz/landscape_ist';
 import { landscape_sst } from './viz/landscape_sst';
 import { matrix_viz } from './viz/matrix_viz';
 import { render_enrich } from './widgets/enrich_widget';
+import { render_yearbook } from './widgets/yearbook';
 
 // Remove export keywords from render functions
 const render_landscape_ist = async ({ model, el }) => {
@@ -210,6 +211,9 @@ async function render({ model, el }) {
       case 'Enrich':
         cleanup = await render_enrich({ model, el });
         break;
+      case 'Yearbook':
+        cleanup = await render_yearbook({ model, el });
+        break;
       default:
         handleValidationWarning(`Unknown component type: ${componentType}`, {
           data: { componentType, model: model?.id || 'unknown' },