feat: tiles optimization plus cesium inspector checkboxes

packages/react-components/src/components/cesium-map/debug/debugger-widget.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { get } from 'lodash';
+import { Checkbox } from '@map-colonies/react-core';
+import { ICesiumWFSLayer } from '../layers/wfs.layer';
+import { useCesiumMap, useCesiumMapViewstate } from '../map';
+import { CesiumIcon } from '../widget/cesium-icon';
+import { CesiumTool } from '../widget/cesium-tool';
+import { IWidgetProps, WidgetWrapper } from '../widget/widget-wrapper';
+import { WFS } from './wfs';
+
+interface IFeatureTypeMetadata {
+  id: string;
+  items: number;
+  total: number;
+  cache: number;
+  currentZoomLevel: number;
+  featureStructure: Record<string, unknown>;
+}
+
+export type IActiveFeatureTypes = IFeatureTypeMetadata & {
+  zoomLevel: number;
+};
+
+export interface IDebuggerWidgetProps extends IWidgetProps {
+  locale?: { [key: string]: string };
+}
+
+const DebuggerComponent: React.FC<IDebuggerWidgetProps> = ({ locale, isOpen, setIsOpen }) => {
+  const [featureTypes, setFeatureTypes] = useState<IActiveFeatureTypes[]>([]);
+  const title = useMemo(() => get(locale, 'DEBUG_PANEL_TITLE') ?? 'Debugger Tool', [locale]);
+  const optimizationLabel = useMemo(() => get(locale, 'TILE_REQUESTS_OPTIMIZATION_CHECKBOX') ?? 'Tile requests optimization', [locale]);
+  const cesiumInspectorLabel = useMemo(() => get(locale, 'CESIUM_INSPECTOR_CHECKBOX') ?? 'Cesium Inspector', [locale]);
+
+  const mapViewer = useCesiumMap();
+  const { viewState, setViewState } = useCesiumMapViewstate();
+
+  useEffect(() => {
+    if (!mapViewer.layersManager) return;
+
+    const handleDataLayerUpdated = (dataLayers: ICesiumWFSLayer[], LayerId?: string | undefined): void => {
+      dataLayers.forEach((layer: ICesiumWFSLayer): void => {
+        if (LayerId !== undefined && LayerId !== layer.meta.id) {
+          return;
+        }
+
+        const { options, meta } = layer;
+        const { zoomLevel } = options;
+        const { id, items, total, cache, currentZoomLevel, featureStructure } = meta as unknown as IFeatureTypeMetadata;
+
+        setFeatureTypes((prevFeatureTypes) => {
+          const existingIndex = prevFeatureTypes.findIndex((type) => type.id === id);
+          if (existingIndex >= 0) {
+            if (
+              JSON.stringify(prevFeatureTypes[existingIndex]) !==
+              JSON.stringify({ id, items, total, cache, currentZoomLevel, featureStructure, zoomLevel })
+            ) {
+              const updatedFeatureTypes = [...prevFeatureTypes];
+              updatedFeatureTypes[existingIndex] = { id, items, total, cache, currentZoomLevel, featureStructure, zoomLevel };
+              return updatedFeatureTypes;
+            }
+          } else {
+            return [...prevFeatureTypes, { id, items, total, cache, currentZoomLevel, featureStructure, zoomLevel }];
+          }
+          return prevFeatureTypes;
+        });
+      });
+
+      const activeDataLayerIds = new Set(mapViewer.layersManager?.dataLayerList.map((layer) => layer.meta.id));
+
+      setFeatureTypes((prevFeatureTypes) => prevFeatureTypes.filter((type) => activeDataLayerIds.has(type.id)));
+    };
+
+    mapViewer.layersManager.addDataLayerUpdatedListener(handleDataLayerUpdated);
+
+    return () => {
+      mapViewer.layersManager?.removeDataLayerUpdatedListener(handleDataLayerUpdated);
+    };
+  }, [mapViewer.layersManager?.dataLayerList]);
+
+  return (
+    <>
+      <CesiumIcon onClick={() => setIsOpen(!isOpen)}>
+        <svg width="100%" height="100%" viewBox="0 0 24 24">
+          <g fill="var(--mdc-theme-cesium-color)" transform="translate(4.6 4.6) scale(0.0295)">
+            <g transform="translate(-1)">
+              <g>
+                <g>
+                  <path d="M508.517,257.027l-106.445-57.318v-20.506c0-4.71-3.814-8.533-8.533-8.533h-25.6v-8.533 c0-6.562-0.683-12.962-1.783-19.217l56.346-24.141c3.14-1.34,5.171-4.429,5.171-7.842V17.07h51.2 c4.719,0,8.533-3.823,8.533-8.533s-3.814-8.533-8.533-8.533h-59.733c-4.719,0-8.533,3.823-8.533,8.533v96.777l-48.751,20.898 c-7.859-22.852-22.886-42.377-42.496-55.757c8.713-6.187,14.447-16.307,14.447-27.784c0-18.825-15.309-34.133-34.133-34.133 c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c9.412,0,17.067,7.654,17.067,17.067 c0,9.412-7.654,17.067-17.067,17.067c-0.017,0-0.026,0.009-0.043,0.009c-13.133-5.487-27.529-8.542-42.624-8.542 s-29.491,3.055-42.624,8.542c-0.017,0-0.026-0.009-0.043-0.009c-9.412,0-17.067-7.654-17.067-17.067 c0-9.412,7.654-17.067,17.067-17.067c4.719,0,8.533-3.823,8.533-8.533s-3.814-8.533-8.533-8.533 c-18.825,0-34.133,15.309-34.133,34.133c0,11.477,5.734,21.598,14.447,27.784c-19.61,13.38-34.637,32.905-42.496,55.757 l-48.751-20.898V8.537c0-4.71-3.814-8.533-8.533-8.533H35.138c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533h51.2 v93.867c0,3.413,2.031,6.502,5.171,7.842l56.346,24.141c-1.101,6.255-1.784,12.655-1.784,19.217v8.533h-25.6 c-4.719,0-8.533,3.823-8.533,8.533v20.506L5.494,257.027c-4.147,2.227-5.709,7.407-3.473,11.554 c1.545,2.867,4.489,4.489,7.526,4.489c1.365,0,2.748-0.324,4.036-1.024l108.766-58.564l134.673,75.418l135.202-75.11 l108.203,58.257c1.289,0.7,2.671,1.024,4.036,1.024c3.038,0,5.982-1.621,7.526-4.489 C514.225,264.434,512.664,259.255,508.517,257.027z M350.872,170.67H163.138v-8.533c0-51.755,42.112-93.867,93.867-93.867 c51.755,0,93.867,42.112,93.867,93.867V170.67z" />
+                  <path d="M450.208,343.32l-48.136-40.115v-75.366l-136.533,75.853v173.747c76.015-4.454,136.533-67.524,136.533-144.632v-7.381 l32.205,26.837l-39.97,87.945c-1.135,2.492-0.998,5.385,0.358,7.765l34.133,59.733c1.57,2.756,4.446,4.301,7.415,4.301 c1.434,0,2.893-0.367,4.224-1.126c4.096-2.338,5.521-7.552,3.174-11.648l-31.966-55.936l40.858-89.899 C454.1,349.899,453.152,345.777,450.208,343.32z" />
+                  <path d="M111.938,303.205L63.802,343.32c-2.944,2.458-3.891,6.579-2.295,10.078l40.858,89.899l-31.966,55.936 c-2.347,4.096-0.922,9.31,3.174,11.648c1.331,0.759,2.79,1.126,4.224,1.126c2.97,0,5.845-1.545,7.415-4.301l34.133-59.733 c1.357-2.381,1.493-5.274,0.358-7.765l-39.97-87.945l32.205-26.837v7.381c0,77.107,60.518,140.177,136.533,144.632V303.674 l-136.533-76.459V303.205z" />
+                </g>
+              </g>
+            </g>
+          </g>
+        </svg>
+      </CesiumIcon>
+      <CesiumTool isVisible={isOpen} title={title}>
+        <Checkbox
+          className="optimizationCheckbox"
+          label={optimizationLabel}
+          checked={viewState?.shouldOptimizedTileRequests ?? false}
+          onClick={() => {
+            setViewState((prevState) => ({
+              currentZoomLevel: prevState?.currentZoomLevel ?? -1,
+              shouldOptimizedTileRequests: !(prevState?.shouldOptimizedTileRequests ?? false),
+              showCesiumInspector: prevState?.showCesiumInspector ?? false,
+            }));
+          }}
+        />
+        <Checkbox
+          className="cesiumInspectorCheckbox"
+          label={cesiumInspectorLabel}
+          checked={viewState?.showCesiumInspector ?? false}
+          onClick={() => {
+            setViewState((prevState) => ({
+              currentZoomLevel: prevState?.currentZoomLevel ?? -1,
+              shouldOptimizedTileRequests: prevState?.shouldOptimizedTileRequests ?? false,
+              showCesiumInspector: !(prevState?.showCesiumInspector ?? false),
+            }));
+          }}
+        />
+        <WFS featureTypes={featureTypes} locale={locale} />
+      </CesiumTool>
+    </>
+  );
+};
+
+export const DebuggerWidget = WidgetWrapper(DebuggerComponent);

packages/react-components/src/components/cesium-map/debug/wfs.css

@@ -1,10 +1,22 @@
+.cesium-viewer .wfsContainer {
+  margin-top: 12px;
+}
+
 .cesium-viewer .wfsContainer .title {
   text-align: center;
   font-weight: bold;
   margin-bottom: 12px;
   width: 260px;
 }
 
+.cesium-viewer .optimizationCheckbox {
+  margin-bottom: 12px;
+}
+
+.cesium-viewer .cesiumInspectorCheckbox {
+  margin-bottom: 12px;
+}
+
 .cesium-viewer .wfsContainer .featureType {
   font-size: 12px;
   margin-bottom: 12px;

packages/react-components/src/components/cesium-map/debug/wfs.tsx

@@ -2,7 +2,7 @@ import { get } from 'lodash';
 import React, { useMemo } from 'react';
 import { Tooltip } from '@map-colonies/react-core';
 import { Box } from '../../box';
-import { IActiveFeatureTypes } from './wfs-debug-widget';
+import { IActiveFeatureTypes } from './debugger-widget';
 
 import './wfs.css';
 

packages/react-components/src/components/cesium-map/map.css

@@ -18,13 +18,34 @@ body[dir='rtl'] .cesium-viewer .cesium-viewer-toolbar {
 .cesium-viewer .widgetsContainer {
   top: 24px;
   left: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
 }
 
 body[dir='rtl'] .cesium-viewer .widgetsContainer {
   left: unset;
   right: 10px;
 }
 
+.cesium-viewer .cesium-viewer-cesiumInspectorWrapper .cesium-viewer-cesiumInspectorContainer {
+  left: 0;
+}
+
+body[dir='rtl'] .cesium-viewer .cesium-viewer-cesiumInspectorWrapper .cesium-viewer-cesiumInspectorContainer {
+  left: unset;
+  right: 0;
+}
+
+.cesium-viewer .cesium-viewer-cesiumInspectorWrapper .cesium-cesiumInspector {
+  box-sizing: content-box;
+}
+
+.cesium-viewer .cesium-viewer-cesiumInspectorWrapper .cesium-cesiumInspector-visible {
+  width: auto;
+}
+
 .cesium-viewer .cesium-mc-tool {
   display: block;
   position: absolute;
@@ -147,7 +168,7 @@ body[dir='rtl'] .cesium-viewer .bottomToolsContainer {
   right: unset;
 }
 
-/* #region for NATIVE CONTROLS */
+/* #region NATIVE CONTROLS */
 .cesium-viewer input[type='checkbox'] {
   accent-color: var(--mdc-theme-cesium-checkbox-color);
 }
@@ -178,10 +199,9 @@ body[dir='rtl'] .cesium-viewer .bottomToolsContainer {
   background-color: #aaa;
   border-radius: 6px;
 }
-
 /* #endregion for NATIVE CONTROLS */
 
-/* #region for mdc-checkbox */
+/* #region mdc-checkbox */
 .cesium-viewer .mdc-checkbox .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
 .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background,
 .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate='true']:enabled ~ .mdc-checkbox__background {
@@ -216,7 +236,6 @@ body[dir='rtl'] .cesium-viewer .bottomToolsContainer {
 .cesium-viewer .mdc-ripple-upgraded--unbounded {
   --mdc-ripple-fg-size: 0px !important;
 }
-
 /* #endregion mdc-checkbox */
 
 /* #region mdc-list */
@@ -238,7 +257,6 @@ body[dir='rtl'] .cesium-viewer .bottomToolsContainer {
 .cesium-viewer .mdc-text-field--filled {
   height: 32px;
 }
-
 /* #endregion mdc-list */
 
 /* #region mdc-TextField */
@@ -262,7 +280,6 @@ body[dir='rtl'] .cesium-viewer .bottomToolsContainer {
 .cesium-viewer .mdc-line-ripple::after {
   border-bottom: none !important;
 }
-
 /* #endregion mdc-TextField */
 
 .cesium-viewer .disabled {

packages/react-components/src/components/cesium-map/map.stories.tsx

@@ -406,6 +406,8 @@ LocalizedMap.argTypes = {
       KILOMETERS_UNIT: "קמ'",
       ZOOM_LABEL: 'זום',
       DEBUG_PANEL_TITLE: 'דיבאגר',
+      TILE_REQUESTS_OPTIMIZATION_CHECKBOX: 'אופטימיזציית בקשות אריחים',
+      CESIUM_INSPECTOR_CHECKBOX: 'כלי בדיקה של סזיום',
       SHOW_FEATURE_ON_MAP: "הראה על המפה",
       IN_MAP_EXTENT: 'חיפוש בתיחום נוכחי',
       SEARCH_PLACEHOLDER: 'חיפוש...',