From 74c3e28688c4287ce5efc9b862674266cdf0620c Mon Sep 17 00:00:00 2001
From: Matteo V <matteo.velludini@geosolutionsgroup.com>
Date: Tue, 26 Sep 2023 17:24:02 +0200
Subject: [PATCH] #9473 fix longituindal profile issues - marker and dropup
 style issue (#9485)

* fix longituindal profile issues

* fix lint

* fix crash if node cannot be found

* Update web/client/utils/__tests__/DOMUtil-test.js

* Update web/client/utils/__tests__/DOMUtil-test.js

---------

Co-authored-by: Lorenzo Natali <lorenzo.natali@geosolutionsgroup.com>
---
 web/client/epics/longitudinalProfile.js       |  1 -
 .../plugins/longitudinalProfile/Menu.jsx      | 16 +++++++++----
 web/client/themes/default/icons.less          |  2 +-
 web/client/utils/DOMUtil.js                   | 23 +++++++++++++++++++
 web/client/utils/__tests__/DOMUtil-test.js    | 22 +++++++++++++++++-
 5 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/web/client/epics/longitudinalProfile.js b/web/client/epics/longitudinalProfile.js
index 1623a80f17..7c0c961c9e 100644
--- a/web/client/epics/longitudinalProfile.js
+++ b/web/client/epics/longitudinalProfile.js
@@ -304,7 +304,6 @@ export const LPonAddMarkerEpic = (action$) =>
                                             opacity: 1,
                                             size: 32,
                                             anchor: "bottom",
-                                            offset: [0, -16],
                                             rotate: 0,
                                             msBringToFront: true,
                                             msHeightReference: 'none',
diff --git a/web/client/plugins/longitudinalProfile/Menu.jsx b/web/client/plugins/longitudinalProfile/Menu.jsx
index 1466b87e4e..ea62dca7e3 100644
--- a/web/client/plugins/longitudinalProfile/Menu.jsx
+++ b/web/client/plugins/longitudinalProfile/Menu.jsx
@@ -5,7 +5,7 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
 */
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {DropdownButton, Glyphicon, MenuItem, NavDropdown} from 'react-bootstrap';
 import {connect} from "react-redux";
@@ -23,6 +23,8 @@ import {
     isParametersOpenSelector
 } from "../../selectors/longitudinalProfile";
 import { isCesium } from '../../selectors/maptype';
+import { getOffsetTop, getOffsetBottom } from '../../utils/DOMUtil';
+
 
 const TNavDropdown = tooltip(NavDropdown);
 const TDropdownButton = tooltip(DropdownButton);
@@ -45,13 +47,19 @@ const UserMenu = ({
     onToggleSourceMode
 }) => {
     let DropDown = nav ? TNavDropdown : TDropdownButton;
-
+    const [dropUp, setDropUp ] = useState(false);
     const onToggleTool = useCallback((toolName) => () => {
         onActivateTool();
         onToggleSourceMode(toolName);
     }, []);
+    useEffect(() => {
+        const ButtonElement = document.getElementById("longitudinal-tool");
+        const offsetTop = getOffsetTop(ButtonElement);
+        const offsetBottom = getOffsetBottom(ButtonElement);
+        const dropUpVal = offsetTop > 2000 && offsetBottom < 130;
+        setDropUp(dropUpVal);
+    }, []);
     const [open, setMenuOpen ] = useState(false);
-
     const body = (<>
         {showDrawOption ? <MenuItem active={dataSourceMode === 'draw'} key="draw" onClick={onToggleTool('draw')}>
             <Glyphicon glyph="pencil"/><Message msgId="longitudinalProfile.draw"/>
@@ -68,7 +76,7 @@ const UserMenu = ({
         </MenuItem>
     </>);
     const DropDownMenu = (<DropDown
-        dropup
+        dropup={dropUp}
         open={open}
         onToggle={(val) => setMenuOpen(val)}
         id="longitudinal-tool"
diff --git a/web/client/themes/default/icons.less b/web/client/themes/default/icons.less
index 66c5fc001d..8cc1d4e9a6 100644
--- a/web/client/themes/default/icons.less
+++ b/web/client/themes/default/icons.less
@@ -397,7 +397,7 @@
 .glyphicon-zoom-out:before { content: "\f263"; }
 .glyphicon-zoom-to:before { content: "\f264"; }
 
-/* 
+/*
 classes with icon code
 they can be used as mixin to get the content code
 structure .glyphicon-{iconName}-content
diff --git a/web/client/utils/DOMUtil.js b/web/client/utils/DOMUtil.js
index abb400cbce..4f83488b73 100644
--- a/web/client/utils/DOMUtil.js
+++ b/web/client/utils/DOMUtil.js
@@ -22,3 +22,26 @@ export const scrollIntoViewId = (viewId) => {
     }
 };
 
+
+/**
+ * @param {node} elem the node element you want to inspect top offset
+ * @returns {number} the total offset from the top
+ */
+export function getOffsetTop( elem ) {
+    var offsetTop = 0;
+    do {
+        if ( !isNaN( elem?.offsetTop ) ) {
+            offsetTop += elem.offsetTop;
+        }
+    // eslint-disable-next-line no-param-reassign, no-cond-assign
+    } while ( elem = elem?.offsetParent );
+    return offsetTop;
+}
+/**
+ * @param {node} elem the node element you want to inspect bottom offset
+ * @returns {number} the total offset from the bottom
+ */
+export const getOffsetBottom = ( element, containerClass = "container") =>{
+    const container = document.getElementById(containerClass);
+    return container.clientHeight - getOffsetTop(element);
+};
diff --git a/web/client/utils/__tests__/DOMUtil-test.js b/web/client/utils/__tests__/DOMUtil-test.js
index f78e84f7e4..a7930904d6 100644
--- a/web/client/utils/__tests__/DOMUtil-test.js
+++ b/web/client/utils/__tests__/DOMUtil-test.js
@@ -9,7 +9,7 @@
 
 import expect from 'expect';
 
-import { scrollIntoViewId } from '../DOMUtil';
+import { getOffsetBottom, getOffsetTop, scrollIntoViewId } from '../DOMUtil';
 
 describe('Test the DOMUtils', () => {
 
@@ -23,5 +23,25 @@ describe('Test the DOMUtils', () => {
         scrollIntoViewId('container');
         expect(spy.calls.length).toEqual(1);
     });
+    it('test getOffsetTop', function() {
+        document.body.innerHTML = `
+        <div id="container">
+            <div id="content">
+            test
+            </div>
+        </div>`;
+        const offset = getOffsetTop(document.querySelector("#content"));
+        expect(offset).toEqual(8);
+    });
+    it('test getOffsetBottom', function() {
+        document.body.innerHTML = `
+        <div id="container">
+            <div id="content">
+            test
+            </div>
+        </div>`;
+        const offset = getOffsetBottom(document.querySelector("#content"));
+        expect(offset).toEqual(10);
+    });
 
 });