ATLAS-5225: ATLAS UI: Upgrade UI dependencies and improve code quality across dashboard, dashboardv2, and docs.

dashboard/src/components/QueryBuilder/Filters.tsx

@@ -25,7 +25,7 @@ import {
   FormControlLabel
 } from "@mui/material";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import {
   Accordion,
   AccordionDetails,
@@ -154,9 +154,9 @@ const Filters = ({
     paramsObject[key] = value;
   });
 
-  const { type, tag, tagFilters, entityFilters } = paramsObject || {};
+  const { type, tag: _tag, tagFilters, entityFilters } = paramsObject || {};
 
-  let obj = {
+  const _obj = {
     value: paramsObject,
     relationship: getUrlState.isRelationSearch() ? true : false,
     searchVent: {}
@@ -335,10 +335,10 @@ const Filters = ({
 
   const applyFilter = () => {
     let isTag;
-    let isRelationship;
-    let filtertype;
+    let _isRelationship: boolean | undefined;
+    let _filtertype: string | undefined;
 
-    let isFilterValidate = true;
+    let _isFilterValidate = true;
 
     const highlightInvalidField = (ruleId: string) => {
       const element = document.querySelector(
@@ -412,16 +412,16 @@ const Filters = ({
 
     if (tagParams) {
       isTag = true;
-      filtertype = isTag ? "tagFilters" : "entityFilters";
+      _filtertype = isTag ? "tagFilters" : "entityFilters";
     }
     if (typeParams) {
       isTag = false;
-      filtertype = isTag ? "tagFilters" : "entityFilters";
+      _filtertype = isTag ? "tagFilters" : "entityFilters";
     }
     if (relationshipParams) {
       isTag = false;
-      isRelationship = true;
-      filtertype = "relationshipFilters";
+      _isRelationship = true;
+      _filtertype = "relationshipFilters";
     }
 
     if (!isEmpty(typeQuery)) {
@@ -448,7 +448,7 @@ const Filters = ({
         searchParams.delete("entityFilters");
       }
     } else {
-      isFilterValidate = false;
+      _isFilterValidate = false;
       searchParams.delete("entityFilters");
     }
 
@@ -475,7 +475,7 @@ const Filters = ({
         searchParams.delete("tagFilters");
       }
     } else {
-      isFilterValidate = false;
+      _isFilterValidate = false;
       searchParams.delete("tagFilters");
     }
 

dashboard/src/components/commonComponents.tsx

@@ -34,13 +34,8 @@ import {
 } from "../utils/Utils";
 import { JSONPrettyPrint, getValue } from "../utils/CommonViewFunction";
 import { useSelector } from "react-redux";
-import {
-  entityStateReadOnly,
-  filterQueryValue,
-  queryBuilderDateRangeUIValueToAPI,
-  systemAttributes
-} from "../utils/Enum";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { entityStateReadOnly } from "../utils/Enum";
+import { Link, useLocation } from "react-router-dom";
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
 import { useEffect, useState } from "react";
 import { getDetailPageData } from "../api/apiMethods/detailpageApiMethod";

dashboard/src/utils/CommonViewFunction.ts

@@ -27,7 +27,6 @@ import {
 import {
   convertToValidDate,
   formatedDate,
-  getUrlState,
   isEmpty,
   isObject,
   isString

dashboard/src/views/Administrator/Audits/AuditsFilter/AuditFilters.tsx

@@ -18,7 +18,7 @@
  */
 
 import { Popover, Stack, Typography } from "@mui/material";
-import { SetStateAction, useEffect, useState } from "react";
+import { SetStateAction, useState } from "react";
 import type {
   Operator,
   RuleGroupType,
@@ -38,7 +38,6 @@ import {
 } from "@components/muiComponents";
 import { fields } from "./AuditFiltersFields";
 import { useAppSelector } from "@hooks/reducerHook";
-import DatePicker from "react-datepicker";
 import moment from "moment";
 import { GlobalQueryState, isEmpty } from "@utils/Utils";
 import { attributeFilter } from "@utils/CommonViewFunction";
@@ -52,7 +51,7 @@ const customOperators: Operator[] = [
 ];
 
 const CustomValueEditor: React.FC<ValueEditorProps> = (props) => {
-  const { field, operator, value, handleOnChange, loader } = props;
+  const { field, operator, value, handleOnChange } = props;
   const [_customRange, setCustomRange] = useState<[Date | null, Date | null]>([
     null,
     null
@@ -166,7 +165,7 @@ const AuditFilters = ({
   filtersPopover,
   handleCloseFilterPopover,
   setupdateTable,
-  queryApiObj,
+  queryApiObj: _queryApiObj,
   setQueryApiObj
 }: any) => {
   const { entityData = {} } = useAppSelector((state: any) => state.entity);

dashboard/src/views/Administrator/TypeSystemTreeView.tsx

@@ -26,16 +26,13 @@ import {
   Divider,
   FormControl,
   IconButton,
-  MenuItem,
   Popover,
   Slide,
   Stack,
-  Switch,
   TextField,
   Typography
 } from "@mui/material";
 import LineageHelper from "@views/Lineage/atlas-lineage/src";
-import { useSelector } from "react-redux";
 import {
   Close as CloseIcon,
   Search as SearchIcon,
@@ -48,7 +45,6 @@ import {
   Refresh as RefreshIcon
 } from "@mui/icons-material";
 import { LightTooltip } from "@components/muiComponents";
-import { useAppSelector } from "@hooks/reducerHook";
 import {
   cloneDeep,
   extend,
@@ -60,7 +56,7 @@ import { lineageDepth } from "@utils/Enum";
 import { AntSwitch } from "@utils/Muiutils";
 
 const TypeSystemTreeView = ({ entityDefs }: any) => {
-  const optionsVal = [
+  const _optionsVal = [
     { label: "3" },
     { label: "6" },
     { label: "9" },
@@ -75,8 +71,8 @@ const TypeSystemTreeView = ({ entityDefs }: any) => {
   let selectedDetailNode = {};
   const [isFullScreen, setIsFullScreen] = useState(false);
   const typeSystemTreeViewPageRef = useRef(null);
-  const panelRef = useRef(null);
-  const tableBodyRef = useRef(null);
+  const _panelRef = useRef(null);
+  const _tableBodyRef = useRef(null);
 
   const [lineageMethods, setLineageMethods] = useState({});
   const [settingsPopover, setSettingsPopover] = useState(null);
@@ -95,7 +91,7 @@ const TypeSystemTreeView = ({ entityDefs }: any) => {
   const [nodeDetailsChecked, setNodeDetailsChecked] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [nodeDetails, setNodeDetails] = useState({});
-  const [value, setValue] = useState<any>();
+  const [_value, setValue] = useState<any>();
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
@@ -128,7 +124,25 @@ const TypeSystemTreeView = ({ entityDefs }: any) => {
   };
 
   useEffect(() => {
-    let node = lineageDivRef.current.getBoundingClientRect();
+    if (!lineageDivRef.current) return;
+
+    const clearPreviousContent = () => {
+      if (lineageHelperRef.current) {
+        try {
+          lineageHelperRef.current.clear?.();
+        } catch (_e) {
+          /* ignore */
+        }
+        lineageHelperRef.current = null;
+      }
+      if (lineageDivRef.current) {
+        lineageDivRef.current.innerHTML = "";
+      }
+    };
+
+    clearPreviousContent();
+
+    const node = lineageDivRef.current.getBoundingClientRect();
 
     const lineageGraph = new LineageHelper({
       el: lineageDivRef.current,
@@ -158,10 +172,14 @@ const TypeSystemTreeView = ({ entityDefs }: any) => {
         return nodeDetailsChecked;
       }
     });
-    // LineageHelperRef = lineageGraph;
+
     lineageHelperRef.current = lineageGraph;
     setLineageMethods(lineageGraph);
     fetchGraph();
+
+    return () => {
+      clearPreviousContent();
+    };
   }, [currentPathChecked, nodeDetailsChecked]);
 
   const fetchGraph = (options: any) => {
@@ -240,7 +258,7 @@ const TypeSystemTreeView = ({ entityDefs }: any) => {
             styleObj: styleObj
           });
         };
-        const setGraphData = function (fromEntityId, toEntityId) {
+        const _setGraphData = function (fromEntityId: string, toEntityId: string) {
           setNode(
             fromEntityId,
             options.data.find((obj) => obj.guid === fromEntityId)
@@ -405,11 +423,11 @@ const TypeSystemTreeView = ({ entityDefs }: any) => {
     setNodeDetailsChecked(event.target.checked);
   };
 
-  const handleChange = (newValue: any) => {
+  const _handleChange = (newValue: any) => {
     setValue(newValue);
   };
 
-  const onClickSaveSvg = (e, a) => {
+  const onClickSaveSvg = (_e: React.MouseEvent, _a: unknown) => {
     lineageMethods.exportLineage({ downloadFileName: "TypeSystemView" });
   };
 
@@ -466,7 +484,7 @@ const TypeSystemTreeView = ({ entityDefs }: any) => {
     newValue: string | null
   ) => {
     e.stopPropagation();
-    const { label, value }: any = newValue;
+    const { label }: any = newValue;
     if (!isRefreshing) {
       filterData(label);
     } else {
@@ -480,10 +498,10 @@ const TypeSystemTreeView = ({ entityDefs }: any) => {
     newValue: string | null
   ) => {
     e.stopPropagation();
-    const { label, value }: any = newValue;
+    const { label, value: searchValue }: any = newValue;
 
     if (!isRefreshing) {
-      lineageMethods.searchNode({ guid: value });
+      lineageMethods.searchNode({ guid: searchValue });
     } else {
       setIsRefreshing(false);
     }