Merge pull request #335 from amroahmed90/legendSettingsProps

Task #1184 solved
emerson-eps · Nov 11, 2022 · fdf9ab6 · fdf9ab6
2 parents 90994e3 + 083db76
commit fdf9ab6
Show file tree

Hide file tree

Showing 36 changed files with 749 additions and 124 deletions.
diff --git a/react-app/.storybook/main.js b/react-app/.storybook/main.js
@@ -1,15 +1,12 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-storysource",
   ],
-  "framework": "@storybook/react",
-    core: {
-        builder: "webpack5",
-    },
-}
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
+  },
+};
diff --git a/react-app/.storybook/preview.js b/react-app/.storybook/preview.js
@@ -6,4 +6,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+};
diff --git a/react-app/.vscode/settings.json b/react-app/.vscode/settings.json
@@ -1,3 +1,3 @@
-{
-    "git.ignoreLimitWarning": true
-}
+{
+  "git.ignoreLimitWarning": true
+}
diff --git a/react-app/package-lock.json b/react-app/package-lock.json
diff --git a/react-app/package.json b/react-app/package.json
@@ -29,6 +29,7 @@
     "@equinor/eds-core-react": "^0.25.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.2",
     "d3": "^7.2.0",
     "d3-color": "^3.0.1",
@@ -67,8 +68,8 @@
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storysource": "^6.5.12",
     "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-storysource": "^6.5.12",
     "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/react": "^6.5.9",

diff --git a/react-app/src/component/BreakPoint/Legend.tsx b/react-app/src/component/BreakPoint/Legend.tsx
@@ -7,12 +7,16 @@ import { CustomizedDialogs } from "../../component/BreakPoint/Modal";
 declare type moduleProps = {
   colorScaleBreakpoints?: any;
   editedData?: any;
+  isModal?: boolean;
+  handleModalClick?: any;
   // setColorScaleBreakpoints?: any;
 };
 
 export const LegendComp: React.FC<moduleProps> = ({
   colorScaleBreakpoints,
   editedData,
+  isModal,
+  handleModalClick,
 }: // setColorScaleBreakpoints,
 moduleProps) => {
   const [breakpointValues, setBreakPointValues] = React.useState(
@@ -21,11 +25,13 @@ moduleProps) => {
 
   React.useEffect(() => {
     setBreakPointValues(colorScaleBreakpoints);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [colorScaleBreakpoints.length]);
   const orderedSelectedColors = React.useMemo(() => {
     return Object.values(breakpointValues).sort(
       (a: any, b: any) => a.position - b.position
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [breakpointValues.length, breakpointValues]);
 
   const arrayOfColors = React.useMemo(
@@ -56,9 +62,19 @@ moduleProps) => {
     (data) => {
       setPopUpState(data.bubbles);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [popUpState]
   );
 
+  React.useEffect(() => {
+    if (isModal) {
+      popUpState
+        ? document.removeEventListener("mousedown", handleModalClick)
+        : document.addEventListener("mousedown", handleModalClick);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [popUpState]);
+
   const classes = useStyles();
   const width = 200;
 
@@ -67,6 +83,7 @@ moduleProps) => {
       setBreakPointValues(value);
       editedData(value);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -77,7 +94,7 @@ moduleProps) => {
         </div>
       </div>
 
-      {popUpState == true && (
+      {popUpState === true && (
         <CustomizedDialogs
           openModal={openEditModal}
           scaleBreakpoints={scaleBreakpoints}

diff --git a/react-app/src/component/BreakPoint/Modal.tsx b/react-app/src/component/BreakPoint/Modal.tsx
@@ -41,6 +41,7 @@ export const CustomizedDialogs: React.FC<dialogProps> = ({
       //setColorScaleBreakpoints(data)
       scaleBreakpoints(data);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [setColorScaleBreakpoints, colorScaleBreakpoints]
   );
 

diff --git a/react-app/src/component/ColorSelector/BreakPointModule.tsx b/react-app/src/component/ColorSelector/BreakPointModule.tsx
@@ -58,7 +58,7 @@ export const BreakPointComp: React.FC<moduleProps> = ({
       const firstItemIndex = 0;
       const lastItemIndex = colorScaleBreakpoints.length - 1;
 
-      if (getIndex != firstItemIndex && getIndex != lastItemIndex) {
+      if (getIndex !== firstItemIndex && getIndex !== lastItemIndex) {
         setColorScaleBreakpoints((items: any) =>
           items.map((item: any, index: any) =>
             index === selectedIndexRef.current
@@ -71,13 +71,15 @@ export const BreakPointComp: React.FC<moduleProps> = ({
         );
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [rectBox, colorScaleBreakpoints.length, getIndex]
   );
 
   const orderedSelectedColors = React.useMemo(() => {
     return Object.values(colorScaleBreakpoints).sort(
       (a: any, b: any) => a.position - b.position
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     colorScaleBreakpoints.length,
     setColorScaleBreakpoints,
@@ -86,6 +88,7 @@ export const BreakPointComp: React.FC<moduleProps> = ({
 
   const arrayOfColors = React.useMemo(
     () => getColorArrayFromBreakPoints(orderedSelectedColors),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       orderedSelectedColors,
       colorScaleBreakpoints.length,
@@ -103,6 +106,7 @@ export const BreakPointComp: React.FC<moduleProps> = ({
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onMouseMove, colorScaleBreakpoints, colorScaleBreakpoints.length]);
 
   const isBreakpointMovingRef = React.useRef(false);
@@ -230,6 +234,7 @@ export const BreakPointComp: React.FC<moduleProps> = ({
     ]);
     setSelectedIndex(colorScaleBreakpoints.length);
     selectedIndexRef.current = colorScaleBreakpoints.length;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     colorScaleBreakpoints,
     colorScaleBreakpoints.length,
@@ -239,8 +244,8 @@ export const BreakPointComp: React.FC<moduleProps> = ({
   const deleteBreakPoint = React.useCallback(
     (indexToDelete: number) => {
       if (
-        indexToDelete != 0 &&
-        indexToDelete != colorScaleBreakpoints.length - 1
+        indexToDelete !== 0 &&
+        indexToDelete !== colorScaleBreakpoints.length - 1
       ) {
         setColorScaleBreakpoints((items: any[]) =>
           items.filter((_, index) => index !== indexToDelete)
@@ -252,6 +257,7 @@ export const BreakPointComp: React.FC<moduleProps> = ({
         }
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       setColorScaleBreakpoints,
       colorScaleBreakpoints,

diff --git a/react-app/src/component/ColorSelector/ColorSelectorAccordion.tsx b/react-app/src/component/ColorSelector/ColorSelectorAccordion.tsx
@@ -4,8 +4,11 @@ import { ColorSelectorWrapper } from "./ColorSelectorWrapper";
 import { LegendComp } from "../BreakPoint/Legend";
 import defaultColorTables from "../color-tables.json";
 import { RGBToHex } from "../Utils/legendCommonFunction";
+import { getColorSelectorPosition } from "../Utils/legendCommonFunction";
+import CancelIcon from "@mui/icons-material/Cancel";
 
 export const ColorSelectorAccordion = (props: any) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const currentLegendName = props.currentLegendName;
   let colorScaleBreakpoints: any = [];
 
@@ -30,24 +33,50 @@ export const ColorSelectorAccordion = (props: any) => {
 
   React.useEffect(() => {
     setBreakPointValues(colorScaleBreakpoints);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [colorScaleBreakpoints.length]);
 
   const editedData = React.useCallback((data) => {
     setBreakPointValues(data);
     props.getEditedBreakPoint(data);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <div
+      ref={containerRef}
       className="Container"
       style={{
         width: "316px",
         position: "absolute",
-        zIndex: 1,
-        top: props.isHorizontal ? 100 : 30,
-        right: props.isHorizontal ? 5 : 165,
+        zIndex: 1000,
+        top: getColorSelectorPosition(props.position, props.isHorizontal).top,
+        left: getColorSelectorPosition(props.position, props.isHorizontal).left,
       }}
     >
+      {!props.isModal && (
+        <div style={{ cursor: "pointer" }}>
+          <CancelIcon
+            style={{
+              position: "absolute",
+              top: "-10px",
+              right: "-10px",
+              cursor: "pointer",
+              color: "#007079",
+            }}
+            onMouseOver={(e) => {
+              e.preventDefault();
+              const target = e.target as SVGAElement;
+              target.style.color = "#1099a5";
+            }}
+            onMouseOut={(e) => {
+              const target = e.target as SVGAElement;
+              target.style.color = "#007079";
+            }}
+            onClick={props.setIsOpen}
+          />
+        </div>
+      )}
       <Accordion>
         <Accordion.Item isExpanded>
           <Accordion.Header>Color Scales</Accordion.Header>
@@ -60,6 +89,7 @@ export const ColorSelectorAccordion = (props: any) => {
                     useColorTableColors={true}
                     newColorScaleData={props?.newColorScaleData}
                     colorTables={props?.colorTables}
+                    currentLegendName={props?.currentLegendName}
                   />
                 </Accordion.Panel>
               </Accordion.Item>
@@ -72,6 +102,7 @@ export const ColorSelectorAccordion = (props: any) => {
                     useColorTableColors={false}
                     newColorScaleData={props?.newColorScaleData}
                     colorTables={props?.colorTables}
+                    currentLegendName={props?.currentLegendName}
                   />
                 </Accordion.Panel>
               </Accordion.Item>
@@ -105,6 +136,8 @@ export const ColorSelectorAccordion = (props: any) => {
                     <LegendComp
                       colorScaleBreakpoints={breakpointValues}
                       editedData={editedData}
+                      isModal={props.isModal}
+                      handleModalClick={props.handleModalClick}
                     />
                   )}
                 </Accordion.Panel>

diff --git a/react-app/src/component/ColorSelector/ColorSelectorComponent.tsx b/react-app/src/component/ColorSelector/ColorSelectorComponent.tsx
@@ -15,6 +15,7 @@ declare type legendProps = {
   useDiscColorTable?: boolean;
   uniqueId?: number;
   colorScaleData: any;
+  currentLegendName?: string;
 };
 
 declare type ItemColor = {
@@ -57,6 +58,10 @@ export const ColorSelectorComponent: React.FC<legendProps> = ({
    * Returns the function
    */
   colorScaleData,
+  /**
+   * The name of the current (selected) color legend
+   */
+  currentLegendName,
 }: legendProps) => {
   const divRef = useRef<HTMLDivElement>(null);
   // create an array of steps based on the color scale
@@ -355,7 +360,11 @@ export const ColorSelectorComponent: React.FC<legendProps> = ({
   }
 
   return (
-    <div>
+    <div
+      className={`${
+        currentLegendName === legendColorName ? "legend selected" : "legend"
+      }`}
+    >
       <div
         id="legend"
         style={{ height: 30 }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,4 +6,4 @@ export const parameters = { @@
           date: /Date$/,
         },
       },
-    }
+    };