fix: metadata contextmenu position (#6643)

Co-authored-by: 杨国璇 <[email protected]>

frontend/src/components/dir-view-mode/dir-views.js

@@ -34,6 +34,8 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
     updateEnableMetadata(value);
   }, [updateEnableMetadata]);
 
+  if (!enableMetadataManagement) return null;
+
   return (
     <>
       <TreeSection

frontend/src/metadata/metadata-view/components/context-menu/index.css

@@ -2,4 +2,5 @@
   display: block;
   opacity: 1;
   box-shadow: 0 0 5px #ccc;
+  position: fixed;
 }

frontend/src/metadata/metadata-view/components/context-menu/index.jsx

@@ -26,6 +26,8 @@ const ContextMenu = ({
   onClearSelected,
   onCopySelected,
   updateRecords,
+  getTableContentRect,
+  getTableCanvasContainerRect,
 }) => {
   const menuRef = useRef(null);
   const [visible, setVisible] = useState(false);
@@ -220,41 +222,33 @@ const ContextMenu = ({
     setVisible(false);
   }, [onOpenFileInNewTab, onOpenParentFolder, onCopySelected, onClearSelected, generateSummary]);
 
-  const getMenuPosition = (x = 0, y = 0) => {
+  const getMenuPosition = useCallback((x = 0, y = 0) => {
     let menuStyles = {
       top: y,
       left: x
     };
     if (!menuRef.current) return menuStyles;
-
-    const { innerWidth, innerHeight } = window;
     const rect = menuRef.current.getBoundingClientRect();
+    const tableCanvasContainerRect = getTableCanvasContainerRect();
+    const tableContentRect = getTableContentRect();
+    const { right: innerWidth, bottom: innerHeight } = tableContentRect;
+    menuStyles.top = menuStyles.top - tableCanvasContainerRect.top;
+    menuStyles.left = menuStyles.left - tableCanvasContainerRect.left;
 
-    // Calculate the offset of the parent components
-    const parentRect = menuRef.current.parentElement.getBoundingClientRect();
-    const offsetX = parentRect.left;
-    const offsetY = parentRect.top;
-
-    // Adjust the position based on the offset
-    menuStyles.top = y - offsetY;
-    menuStyles.left = x - offsetX;
-
-    const metadataResultFooterHeight = 32;
-    const contentHeight = innerHeight - metadataResultFooterHeight;
-    if (y + rect.height > contentHeight) {
+    if (y + rect.height > innerHeight - 10) {
       menuStyles.top -= rect.height;
     }
     if (x + rect.width > innerWidth) {
       menuStyles.left -= rect.width;
     }
     if (menuStyles.top < 0) {
-      menuStyles.top = rect.height < contentHeight ? (contentHeight - rect.height) / 2 : 0;
+      menuStyles.top = rect.bottom > innerHeight ? (innerHeight - 10 - rect.height) / 2 : 0;
     }
     if (menuStyles.left < 0) {
       menuStyles.left = rect.width < innerWidth ? (innerWidth - rect.width) / 2 : 0;
     }
     return menuStyles;
-  };
+  }, [getTableContentRect, getTableCanvasContainerRect]);
 
   useEffect(() => {
     const handleShow = (event) => {
@@ -272,6 +266,7 @@ const ContextMenu = ({
     return () => {
       document.removeEventListener('contextmenu', handleShow);
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -313,6 +308,7 @@ ContextMenu.propTypes = {
   selectedRange: PropTypes.object,
   selectedPosition: PropTypes.object,
   recordMetrics: PropTypes.object,
+  getTableContentRect: PropTypes.func,
   recordGetterByIndex: PropTypes.func,
 };
 

frontend/src/metadata/metadata-view/components/table/table-main/records/body.js

@@ -542,6 +542,7 @@ class RecordsBody extends Component {
             gridUtils={this.props.gridUtils}
             getCopiedRecordsAndColumnsFromRange={this.props.getCopiedRecordsAndColumnsFromRange}
             modifyColumnData={this.props.modifyColumnData}
+            getTableCanvasContainerRect={this.props.getTableCanvasContainerRect}
           />
           <div className="sf-metadata-result-table" style={{ width: this.props.totalWidth + SEQUENCE_COLUMN_WIDTH }} ref={this.setResultRef}>
             {this.renderRecords()}
@@ -608,6 +609,7 @@ RecordsBody.propTypes = {
   openDownloadFilesDialog: PropTypes.func,
   cacheDownloadFilesProps: PropTypes.func,
   onCellContextMenu: PropTypes.func,
+  getTableCanvasContainerRect: PropTypes.func,
 };
 
 export default RecordsBody;

frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js

@@ -904,6 +904,7 @@ class GroupBody extends Component {
             gridUtils={this.props.gridUtils}
             getCopiedRecordsAndColumnsFromRange={this.props.getCopiedRecordsAndColumnsFromRange}
             modifyColumnData={this.props.modifyColumnData}
+            getTableCanvasContainerRect={this.props.getTableCanvasContainerRect}
           />
           <div className="sf-metadata-result-table" ref={this.setResultRef}>
             {this.renderGroups()}
@@ -972,6 +973,7 @@ GroupBody.propTypes = {
   openDownloadFilesDialog: PropTypes.func,
   cacheDownloadFilesProps: PropTypes.func,
   onCellContextMenu: PropTypes.func,
+  getTableCanvasContainerRect: PropTypes.func,
 };
 
 export default GroupBody;

frontend/src/metadata/metadata-view/components/table/table-main/records/index.js

@@ -609,6 +609,10 @@ class Records extends Component {
     }
   };
 
+  getTableCanvasContainerRect = () => {
+    return this.resultContainerRef.getBoundingClientRect();
+  };
+
   renderRecordsBody = ({ containerWidth }) => {
     const { isGroupView, recordGetterByIndex, updateRecords } = this.props;
     const { recordMetrics, columnMetrics, colOverScanStartIdx, colOverScanEndIdx } = this.state;
@@ -629,6 +633,7 @@ class Records extends Component {
       hasSelectedCell: this.hasSelectedCell,
       cacheScrollTop: this.storeScrollTop,
       onCellContextMenu: this.onCellContextMenu,
+      getTableCanvasContainerRect: this.getTableCanvasContainerRect,
     };
     if (this.props.isGroupView) {
       return (

frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js

@@ -1124,6 +1124,8 @@ class InteractionMasks extends React.Component {
           selectedRange: !isSelectedSingleCell ? selectedRange : null,
           onClearSelected: this.handleSelectCellsDelete,
           onCopySelected: this.onCopySelected,
+          getTableContentRect: this.props.getTableContentRect,
+          getTableCanvasContainerRect: this.props.getTableCanvasContainerRect
         })}
       </div>
     );
@@ -1178,6 +1180,7 @@ InteractionMasks.propTypes = {
   gridUtils: PropTypes.object,
   getCopiedRecordsAndColumnsFromRange: PropTypes.func,
   onCommit: PropTypes.func,
+  getTableCanvasContainerRect: PropTypes.func,
 };
 
 export default InteractionMasks;