visgl · Pessimistress · May 19, 2026
diff --git a/test/apps/widgets-9.2/index.html b/test/apps/widgets-9.2/index.html
diff --git a/test/apps/widgets-infovis/README.md b/test/apps/widgets-infovis/README.md
diff --git a/test/apps/widgets-infovis/package.json b/test/apps/widgets-infovis/package.json
diff --git a/test/apps/widgets-multi-view-9.2/README.md b/test/apps/widgets-multi-view-9.2/README.md
diff --git a/test/apps/widgets-multi-view-9.2/package.json b/test/apps/widgets-multi-view-9.2/package.json
diff --git a/test/apps/widgets-multi-view-9.2/react-app.tsx b/test/apps/widgets-multi-view-9.2/react-app.tsx
diff --git a/test/apps/widgets-9.2/README.md → test/apps/widgets/README.md b/test/apps/widgets-9.2/README.md → test/apps/widgets/README.md
diff --git a/test/apps/widgets/geospatial.html b/test/apps/widgets/geospatial.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>deck.gl Example</title>
+    <style>
+      body { overflow-y: auto; font-family: Arial, Helvetica, sans-serif }
+      #app { display: flex; margin: 80px 10px; gap: 20px; }
+      content { flex: 1 1 0; background: #f5deb3a0; padding: 10px; height: 200vh;  }
+      aside { flex: 0 0 auto; position: relative; width: 50vw; }
+      #map { position: relative; width: 100%; height: 50vh; }
+      #controls { position: relative; width: 100%; height: 100px; }
+    </style>
+  </head>
+  <body>
+    <section id="app" >
+      <content>
+        <h1>Geospatial Widget Test</h1>
+        <p>This is a very long body of text to test widget behavior with page scrolling.</p>
+      </content>
+      <aside>
+        <div id="map" ></div>
+        <div id="controls"></div>
+      </aside>
+    </section>
+  </body>
+  <script type="module" src="geospatial.ts"></script>
+</html>
diff --git a/test/apps/widgets-9.2/app.ts → test/apps/widgets/geospatial.ts b/test/apps/widgets-9.2/app.ts → test/apps/widgets/geospatial.ts
@@ -41,7 +41,7 @@ const INITIAL_VIEW_STATE = {
   pitch: 30
 };
 
-function getLayers(filterRange = [2, 9]) {
+export function getLayers(filterRange = [2, 9]) {
   return [
     new WMSLayer({
       data: 'https://ows.terrestris.de/osm/service',
@@ -79,7 +79,7 @@ function getLayers(filterRange = [2, 9]) {
     new ArcLayer({
       id: 'arcs',
       data: AIR_PORTS,
-      dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
+      dataTransform: (d: any) => d.features.filter(f => f.properties.scalerank < 4),
       // Styles
       getSourcePosition: f => [-0.4531566, 51.4709959], // London
       getTargetPosition: f => f.geometry.coordinates,
@@ -91,7 +91,7 @@ function getLayers(filterRange = [2, 9]) {
 }
 
 const deck = new Deck({
-  parent: document.getElementById('app'),
+  parent: document.getElementById('map') as HTMLDivElement,
   views: new MapView({repeat: true}),
   initialViewState: INITIAL_VIEW_STATE,
   controller: true,
@@ -135,11 +135,10 @@ const deck = new Deck({
       closeOnClickOutside: true
     }),
     new _TimelineWidget({
-      placement: 'bottom-left',
+      _container: document.getElementById('controls') as HTMLDivElement,
       timeRange: [2, 9],
       step: 1,
-      initialTime: 0,
-      playInterval: 1000,
+      playInterval: 500,
       // eslint-disable-next-line no-console, no-undef
       onTimeChange: time =>
         deck.setProps({
@@ -199,7 +198,6 @@ function getTooltip(info: PickingInfo, widget: InfoWidget) {
       text = `${info.object.properties.name} (${info.object.properties.abbrev})`;
       break;
     case 'click':
-    case 'static':
       text = `\
 ${info.object.properties.name} (${info.object.properties.abbrev})
 ${info.object.properties.type}

diff --git a/test/apps/widgets/index.html b/test/apps/widgets/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>deck.gl Example</title>
+    <style>
+      body {font-family: Arial, Helvetica, sans-serif;}
+      a {display: block;}
+    </style>
+  </head>
+  <body>
+    <main>
+      <a href="./geospatial.html">Pure JS - Geospatial</a>
+      <a href="./multiview.html">Pure JS - Multiview</a>
+      <a href="./infovis.html">Pure JS - Infovis</a>
+      <a href="./react-geospatial.html">React - Geospatial</a>
+      <a href="./react-multiview.html">React - Multiview</a>
+      <a href="./react-infovis.html">React - Infovis</a>
+    </main>
+  </body>
+</html>
diff --git a/test/apps/widgets-infovis/index.html → test/apps/widgets/infovis.html b/test/apps/widgets-infovis/index.html → test/apps/widgets/infovis.html
@@ -9,6 +9,6 @@
     </style>
   </head>
   <body>
-    <script type="module" src="./app.ts"></script>
+    <script type="module" src="./infovis.ts"></script>
   </body>
 </html>
diff --git a/test/apps/widgets-infovis/app.ts → test/apps/widgets/infovis.ts b/test/apps/widgets-infovis/app.ts → test/apps/widgets/infovis.ts
@@ -16,7 +16,7 @@ import {
   FullscreenWidget,
   ResetViewWidget,
   ScrollbarWidget,
-  _TimelineWidget as TimelineWidget,
+  InfoWidget,
   ThemeWidget,
   DarkTheme,
   LightTheme
@@ -54,7 +54,17 @@ const INITIAL_VIEW_STATE = {
 new Deck({
   views: [
     new OrbitView({id: 'orbit-view', x: 0, width: '50%', controller: true}),
-    new OrthographicView({id: 'ortho-view', x: '50%', width: '50%', controller: true})
+    new OrthographicView({
+      id: 'ortho-view',
+      x: '50%',
+      width: '50%',
+      controller: {
+        maxBounds: [
+          [-50, -50, -50],
+          [50, 50, 50]
+        ]
+      }
+    })
   ],
   initialViewState: INITIAL_VIEW_STATE,
   layers: [
@@ -75,24 +85,17 @@ new Deck({
     new FullscreenWidget(),
     new ResetViewWidget(),
     new ThemeWidget({
-      // darkModeTheme: DarkTheme,
-      // lightModeTheme: LightTheme,
+      darkModeTheme: DarkTheme,
+      lightModeTheme: LightTheme
     }),
-    new TimelineWidget({
-      viewId: 'orbit-view',
-      timeRange: [0, 600],
-      formatLabel: (t: number) =>
-        `${Math.floor(t / 60)
-          .toString()
-          .padStart(2, '0')}: ${(t % 60).toFixed(0).padStart(2, '0')}`
-      // autoPlay: true
+    new InfoWidget({
+      viewId: 'ortho-view',
+      mode: 'hover',
+      getTooltip: ({object}) => object ? 'point' : null,
     }),
     new ScrollbarWidget({
+      id: 'scrollbar-v',
       viewId: 'ortho-view',
-      contentBounds: [
-        [-50, -50, -50],
-        [50, 50, 50]
-      ],
       // decorations: [
       //   {
       //     contentBounds: [[10, 10, 0], [20, 20, 50]],
@@ -104,11 +107,8 @@ new Deck({
       orientation: 'vertical'
     }),
     new ScrollbarWidget({
+      id: 'scrollbar-h',
       viewId: 'ortho-view',
-      contentBounds: [
-        [-50, -50, -50],
-        [50, 50, 50]
-      ],
       placement: 'bottom-right',
       orientation: 'horizontal'
     })

diff --git a/test/apps/widgets-multi-view-9.2/react.html → test/apps/widgets/multiview.html b/test/apps/widgets-multi-view-9.2/react.html → test/apps/widgets/multiview.html
@@ -8,5 +8,5 @@
     </style>
   </head>
   <body></body>
-  <script type="module" src="./react-app.tsx"></script>
+  <script type="module" src="./multiview.ts"></script>
 </html>
diff --git a/test/apps/widgets-multi-view-9.2/app.ts → test/apps/widgets/multiview.ts b/test/apps/widgets-multi-view-9.2/app.ts → test/apps/widgets/multiview.ts
@@ -4,7 +4,7 @@
 
 import {Deck, MapView} from '@deck.gl/core';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
-import {LightTheme, DarkTheme, _SplitterWidget as SplitterWidget} from '@deck.gl/widgets';
+import {_SplitterWidget as SplitterWidget, SplitterWidgetProps} from '@deck.gl/widgets';
 import '@deck.gl/widgets/stylesheet.css';
 
 // source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
@@ -13,13 +13,13 @@ const COUNTRIES =
 const AIR_PORTS =
   'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
 
-export const INITIAL_VIEW_STATE = {
+const INITIAL_VIEW_STATE = {
   latitude: 51.47,
   longitude: 0.45,
   zoom: 4
 };
 
-export const LAYERS = [
+const LAYERS = [
   new GeoJsonLayer({
     id: 'base-map',
     data: COUNTRIES,
@@ -47,7 +47,7 @@ export const LAYERS = [
   new ArcLayer({
     id: 'arcs',
     data: AIR_PORTS,
-    dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
+    dataTransform: (d: any) => d.features.filter(f => f.properties.scalerank < 4),
     // Styles
     getSourcePosition: f => [-0.4531566, 51.4709959], // London
     getTargetPosition: f => f.geometry.coordinates,
@@ -57,7 +57,7 @@ export const LAYERS = [
   })
 ];
 
-export const VIEW_LAYOUT = {
+const VIEW_LAYOUT: SplitterWidgetProps['viewLayout'] = {
   orientation: 'horizontal',
   views: [
     new MapView({id: 'left', controller: true}),
@@ -69,13 +69,11 @@ export const VIEW_LAYOUT = {
       ]
     }
   ]
-} as const;
+};
 
-export function main() {
-  new Deck({
-    initialViewState: INITIAL_VIEW_STATE,
-    // controller: true,
-    layers: LAYERS,
-    widgets: [new SplitterWidget({viewLayout: VIEW_LAYOUT})]
-  });
-}
+new Deck({
+  // @ts-expect-error intentionally use the same initial state for all views
+  initialViewState: INITIAL_VIEW_STATE,
+  layers: LAYERS,
+  widgets: [new SplitterWidget({viewLayout: VIEW_LAYOUT})]
+});