Merge branch 'master' into fix_build_non_split

Terralego · Jan 30, 2024 · 0155fe8 · 0155fe8
2 parents 857415a + a55bd93
commit 0155fe8
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 64 deletions.
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -247,12 +247,6 @@
             "title": "Vue tabulaire",
             "tooltip": "Ouvrir la vue tabulaire",
             "tooltip_close": "Fermer la vue tabulaire"
-          },
-          "widget": {
-            "action-close": "Fermer le widget",
-            "action-close_synthesis": "Fermer la synthèse",
-            "action-open": "Ouvrir le widget",
-            "action-open_synthesis": "Ouvrir la synthèse"
           }
         },
         "warningzoom": {

diff --git a/src/terra-front/locales/fr/translation.json b/src/terra-front/locales/fr/translation.json
@@ -249,11 +249,11 @@
             "tooltip_synthesis": ""
           },
           "widget": {
-            "action-close": "Fermer le widget",
+            "action-close": "Fermer {{ context }}",
             "action-close_synthesis": "Fermer la synthèse",
-            "action-open": "Ouvrir le widget",
+            "action-open": "Ouvrir {{ context }}",
             "action-open_synthesis": "Ouvrir la synthèse",
-            "title": "Widget",
+            "title": "Widget {{ context }}",
             "title_synthesis": "Widget de synthèse"
           }
         },

diff --git a/...isualizer/LayersTree/LayersTreeItem/LayersTreeItemOptions/LayersTreeItemOptionOverflow.js b/...isualizer/LayersTree/LayersTreeItem/LayersTreeItemOptions/LayersTreeItemOptionOverflow.js
@@ -5,7 +5,7 @@ import { Button, Classes, Menu, Popover, Tooltip } from '@blueprintjs/core';
 const LayersTreeItemOptionOverflow = ({ hasSomeOptionActive, children, translate }) => {
   const [isPopoverOpen, setPopoverOpen] = React.useState(false);
 
-  const buttons = children.filter(Boolean);
+  const buttons = children.filter(Boolean).flat();
   const overFlowedButtons =
     buttons.length <= 3
       ? []

diff --git a/...isualizer/LayersTree/LayersTreeItem/LayersTreeItemOptions/LayersTreeItemOptionsDesktop.js b/...isualizer/LayersTree/LayersTreeItem/LayersTreeItemOptions/LayersTreeItemOptionsDesktop.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import classnames from 'classnames';
 import { Button, Dialog } from '@blueprintjs/core';
-import LocateButton from '../LocateButton';
-
-import translateMock from '../../../../../utils/translate';
+import { useTranslation } from 'react-i18next';
 
+import LocateButton from '../LocateButton';
 import LayerFetchValues from '../LayerFetchValues';
 import FiltersPanel from '../FiltersPanel';
 import Tooltip from '../../../../../components/Tooltip';
 import LayersTreeItemOptionOverflow from './LayersTreeItemOptionOverflow';
 import GenericPanel from '../GenericPanel';
 
+
 const LayersTreeItemOptionsDesktop = ({
   hasSomeOptionActive,
   isOptionsOpen,
@@ -29,36 +29,13 @@ const LayersTreeItemOptionsDesktop = ({
   map,
   extent,
   isDetailsVisible,
-  translate = translateMock({
-    'terralego.visualizer.layerstree.itemOptions.widget.title': 'widget',
-    'terralego.visualizer.layerstree.itemOptions.widget.action-open': 'open widget',
-    'terralego.visualizer.layerstree.itemOptions.widget.action-close': 'close widget',
-    'terralego.visualizer.layerstree.itemOptions.widget.title_synthesis': 'widget synthesis',
-    'terralego.visualizer.layerstree.itemOptions.widget.action-open_synthesis': 'open synthesis',
-    'terralego.visualizer.layerstree.itemOptions.widget.action-close_synthesis': 'close synthesis',
-    'terralego.visualizer.layerstree.itemOptions.table.label': 'table',
-    'terralego.visualizer.layerstree.itemOptions.table.alt': 'open table',
-    'terralego.visualizer.layerstree.itemOptions.table.alt_close': 'close table',
-    'terralego.visualizer.layerstree.itemOptions.table.tooltip': 'open table',
-    'terralego.visualizer.layerstree.itemOptions.table.tooltip_close': 'close table',
-    'terralego.visualizer.layerstree.itemOptions.filter.label': 'filters',
-    'terralego.visualizer.layerstree.itemOptions.filter.alt': 'open filters',
-    'terralego.visualizer.layerstree.itemOptions.filter.alt_close': 'close filters',
-    'terralego.visualizer.layerstree.itemOptions.filter.tooltip': 'open filters',
-    'terralego.visualizer.layerstree.itemOptions.filter.tooltip_close': 'close filters',
-    'terralego.visualizer.layerstree.itemOptions.options.label': 'options',
-    'terralego.visualizer.layerstree.itemOptions.options.alt': 'open options',
-    'terralego.visualizer.layerstree.itemOptions.options.alt_close': 'close options',
-    'terralego.visualizer.layerstree.itemOptions.options.tooltip': 'open options',
-    'terralego.visualizer.layerstree.itemOptions.options.tooltip_close': 'close options',
-    'terralego.visualizer.layerstree.itemOptions.opacity.label': 'Opacité',
-    'terralego.visualizer.layerstree.itemOptions.opacity.tooltip': "Changer l'opacité de la couche",
-  }),
 }) => {
   const [isPanelOpen, setPanelOpen] = React.useState(false);
   const [isOverlayOpen, setOverlayOpen] = React.useState(false);
   const [activeEmbed, setActiveEmbed] = React.useState(null);
 
+  const { t: translate } = useTranslation();
+
   const handleOverlayClose = React.useCallback(() => {
     setOverlayOpen(false);
     setActiveEmbed(null);
@@ -115,7 +92,7 @@ const LayersTreeItemOptionsDesktop = ({
             !!widgets.length &&
             // i18next-extract-mark-context-start ["", "synthesis"]
             widgets.map(widget => {
-              const { component: context } = widget;
+              const context = widget.title ?? widget.component;
               const isActive = isWidgetActive(widget);
 
               const actionText = isActive
@@ -139,7 +116,7 @@ const LayersTreeItemOptionsDesktop = ({
                     })}
                     onClick={toggleWidgets(widget)}
                     minimal
-                    icon="selection"
+                    icon={widget.icon ?? 'selection'}
                     title={translate('terralego.visualizer.layerstree.itemOptions.widget.title', {
                       context,
                     })}

diff --git a/...izer/LayersTree/LayersTreeItem/LayersTreeItemOptions/LayersTreeItemOptionsDesktop.test.js b/...izer/LayersTree/LayersTreeItem/LayersTreeItemOptions/LayersTreeItemOptionsDesktop.test.js
@@ -53,7 +53,7 @@ it('should open widget', () => {
       toggleWidgets={jest.fn(() => true)}
     />
   ));
-  expect(wrapper.find('.widgets').props().content).toBe('open widget');
+  expect(wrapper.find('.widgets').props().content).toBe('terralego.visualizer.layerstree.itemOptions.widget.action-open');
 });
 
 it('should close table', () => {
@@ -63,8 +63,8 @@ it('should close table', () => {
       isTableActive
     />
   ));
-  expect(wrapper.find('.table').props().content).toBe('close table');
-  expect(wrapper.find('.table').dive().find('.layerstree-node-content__options__button').props().alt).toBe('close table');
+  expect(wrapper.find('.table').props().content).toBe('terralego.visualizer.layerstree.itemOptions.table.tooltip');
+  expect(wrapper.find('.table').dive().find('.layerstree-node-content__options__button').props().alt).toBe('terralego.visualizer.layerstree.itemOptions.table.alt');
 });
 
 it('should close form', () => {
@@ -74,7 +74,7 @@ it('should close form', () => {
       isFilterVisible
     />
   ));
-  expect(wrapper.find('.filters').props().content).toBe('close filters');
+  expect(wrapper.find('.filters').props().content).toBe('terralego.visualizer.layerstree.itemOptions.filter.tooltip');
 });
 
 it('should close options', () => {
@@ -83,6 +83,6 @@ it('should close options', () => {
       isOptionsOpen
     />
   ));
-  expect(wrapper.find('.options').props().content).toBe('Changer l\'opacité de la couche');
-  expect(wrapper.find('.options').dive().find('.layerstree-node-content__options__button').props().alt).toBe('Opacité');
+  expect(wrapper.find('.options').props().content).toBe('terralego.visualizer.layerstree.itemOptions.opacity.tooltip');
+  expect(wrapper.find('.options').dive().find('.layerstree-node-content__options__button').props().alt).toBe('terralego.visualizer.layerstree.itemOptions.opacity.label');
 });
diff --git a/...ersTreeItem/LayersTreeItemOptions/__snapshots__/LayersTreeItemOptionsDesktop.test.js.snap b/...ersTreeItem/LayersTreeItemOptions/__snapshots__/LayersTreeItemOptionsDesktop.test.js.snap
@@ -27,12 +27,12 @@ exports[`should render default options 1`] = `
         onMouseLeave={[Function]}
       >
         <button
-          alt="Opacité"
+          alt="terralego.visualizer.layerstree.itemOptions.opacity.label"
           className="bp3-button bp3-minimal layerstree-node-content__options__button"
           onKeyDown={[Function]}
           onKeyUp={[Function]}
           tabIndex={0}
-          title="Opacité"
+          title="terralego.visualizer.layerstree.itemOptions.opacity.label"
           type="button"
         >
           <span
@@ -57,7 +57,7 @@ exports[`should render default options 1`] = `
           <span
             className="bp3-button-text"
           >
-            Opacité
+            terralego.visualizer.layerstree.itemOptions.opacity.label
           </span>
         </button>
       </span>
@@ -93,12 +93,12 @@ exports[`should render no tooltip if empty widget empty 1`] = `
         onMouseLeave={[Function]}
       >
         <button
-          alt="Opacité"
+          alt="terralego.visualizer.layerstree.itemOptions.opacity.label"
           className="bp3-button bp3-minimal layerstree-node-content__options__button"
           onKeyDown={[Function]}
           onKeyUp={[Function]}
           tabIndex={0}
-          title="Opacité"
+          title="terralego.visualizer.layerstree.itemOptions.opacity.label"
           type="button"
         >
           <span
@@ -123,7 +123,7 @@ exports[`should render no tooltip if empty widget empty 1`] = `
           <span
             className="bp3-button-text"
           >
-            Opacité
+            terralego.visualizer.layerstree.itemOptions.opacity.label
           </span>
         </button>
       </span>
@@ -160,13 +160,13 @@ Array [
           onMouseLeave={[Function]}
         >
           <button
-            alt="close widget"
+            alt="terralego.visualizer.layerstree.itemOptions.widget.action-close"
             className="bp3-button bp3-minimal layerstree-node-content__options__button layerstree-node-content__options__button--active"
             onClick={true}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
             tabIndex={0}
-            title="widget"
+            title="terralego.visualizer.layerstree.itemOptions.widget.title"
             type="button"
           >
             <span
@@ -191,7 +191,7 @@ Array [
             <span
               className="bp3-button-text"
             >
-              widget
+              terralego.visualizer.layerstree.itemOptions.widget.title
             </span>
           </button>
         </span>
@@ -215,11 +215,11 @@ Array [
             onMouseLeave={[Function]}
           >
             <button
-              alt="close options"
+              alt="terralego.visualizer.layerstree.itemOptions.options.alt"
               className="bp3-button bp3-minimal layerstree-node-content__options__button layerstree-node-content__options__button--more"
               onKeyDown={[Function]}
               onKeyUp={[Function]}
-              title="options"
+              title="terralego.visualizer.layerstree.itemOptions.options.label"
               type="button"
             >
               <span

diff --git a/src/views/Visualizer/View/Widgets/WidgetLayout.js b/src/views/Visualizer/View/Widgets/WidgetLayout.js
@@ -24,8 +24,13 @@ const WidgetLayout = ({
   return (
     <div className="widget">
       <div className="widget__header">
+        {widget.icon && (
+          <div className="widget__icon">
+            <Icon icon={widget.icon} />
+          </div>
+        )}
         <div className="widget__title">
-          {title}
+          {widget.title ?? title}
         </div>
         <div className="widget__buttons">
           <button

diff --git a/src/views/Visualizer/View/Widgets/WidgetSynthesis/WidgetSynthesis.js b/src/views/Visualizer/View/Widgets/WidgetSynthesis/WidgetSynthesis.js
@@ -45,22 +45,26 @@ export class WidgetSynthesis extends React.Component {
   debouncedLoad = debounce(() => this.load(), 1000);
 
   componentDidMount () {
-    const { map } = this.props;
+    const { map, boundingbox_mode: boundingBoxMode } = this.props;
     if (!map) return;
     this.debouncedLoad();
-    map.on('moveend', this.debouncedLoad);
-    map.on('zoomend', this.debouncedLoad);
+    if (boundingBoxMode === 'visible') {
+      map.on('moveend', this.debouncedLoad);
+      map.on('zoomend', this.debouncedLoad);
+    }
   }
 
   componentDidUpdate ({
     filters: prevFilters,
     query: prevQuery,
     visibleBoundingBox: prevVisibleBoundingBox,
+    boundingbox_mode: prevBoundingBoxMode,
   }) {
-    const { filters, query, visibleBoundingBox } = this.props;
+    const { filters, query, visibleBoundingBox, boundingbox_mode: boundingBoxMode } = this.props;
     if (!isEqual(filters, prevFilters)
       || query !== prevQuery
-      || visibleBoundingBox !== prevVisibleBoundingBox) {
+      || boundingBoxMode !== prevBoundingBoxMode
+      || (boundingBoxMode !== 'defined' && visibleBoundingBox !== prevVisibleBoundingBox)) {
       this.resetValues();
       this.debouncedLoad();
     }
@@ -87,11 +91,14 @@ export class WidgetSynthesis extends React.Component {
       query,
       map,
       visibleBoundingBox,
+      boundingbox_mode: boundingBoxMode,
+      boundingbox_value: boundingBoxValue,
+
       displayedLayer: { baseEsQuery = {} } = {},
     } = this.props;
 
     if (!map) return;
-    const boundingBox = getExtent(map, visibleBoundingBox);
+    const boundingBox = boundingBoxMode === 'defined' ? boundingBoxValue : getExtent(map, visibleBoundingBox);
 
     const aggregations = items.map(({ name, type, field }) => ({
       name, type, field,

diff --git a/src/views/Visualizer/View/Widgets/styles.scss b/src/views/Visualizer/View/Widgets/styles.scss
@@ -1,11 +1,23 @@
 @import '../../../variables.scss';
 $containerWidth: 20rem;
 
+@keyframes widget-render-in {
+  0% {
+    opacity: 0;
+    transform: translateX(2em);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0em);
+  }
+}
+
 .widgets-panel {
   position: relative;
   width: 0;
   height: 100%;
   transition: width .2s ease-in;
+  animation: widget-render-in .2s ease;
   z-index: 80;
   background: rgb(48,64,77);
   will-change: width;
@@ -23,6 +35,7 @@ $containerWidth: 20rem;
     position: relative;
     margin: .5rem;
     background: #F5F8FA;
+    animation: widget-render-in .2s ease;
 
     &__header {
       display: flex;