Get file details panel to show/hide with prov

Author: SeanDuHare

packages/core/components/FileDetails/index.tsx

@@ -6,17 +6,18 @@ import { useDispatch } from "react-redux";
 import FileAnnotationList from "./FileAnnotationList";
 import Pagination from "./Pagination";
 import useFileDetails from "./useFileDetails";
+import useThumbnailPath from "./useThumbnailPath";
 import { PrimaryButton, TertiaryButton } from "../Buttons";
 import Tooltip from "../Tooltip";
 import { ROOT_ELEMENT_ID } from "../../App";
 import FileThumbnail from "../../components/FileThumbnail";
+import useDownloadFiles from "../../hooks/useDownloadFiles";
 import useOpenWithMenuItems from "../../hooks/useOpenWithMenuItems";
 import useTruncatedString from "../../hooks/useTruncatedString";
 import { interaction } from "../../state";
 
 import styles from "./FileDetails.module.css";
-import useDownloadFiles from "../../hooks/useDownloadFiles";
-import useThumbnailPath from "./useThumbnailPath";
+
 
 interface Props {
     className?: string;
@@ -76,11 +77,10 @@ export default function FileDetails(props: Props) {
     const dispatch = useDispatch();
 
     const [fileDetails, isLoading] = useFileDetails();
-    const openWithMenuItems = useOpenWithMenuItems(fileDetails || undefined);
+    const openWithMenuItems = useOpenWithMenuItems(fileDetails);
     const truncatedFileName = useTruncatedString(fileDetails?.name || "", 30);
-    const { isThumbnailLoading, thumbnailPath } = useThumbnailPath(fileDetails || undefined);
-    const { isDownloadDisabled, disabledDownloadReason, onDownload } = useDownloadFiles(fileDetails || undefined);
-
+    const { isThumbnailLoading, thumbnailPath } = useThumbnailPath(fileDetails);
+    const { isDownloadDisabled, disabledDownloadReason, onDownload } = useDownloadFiles(fileDetails);
 
     return (
         <div

packages/core/components/FileDetails/useFileDetails.ts

@@ -1,4 +1,3 @@
-import { isUndefined } from "lodash";
 import * as React from "react";
 import { useSelector } from "react-redux";
 
@@ -10,10 +9,10 @@ import { selection } from "../../state";
  * This hook exposes loading state: if a network request is in flight for file details the second element
  * of the return array will be true.
  */
-export default function useFileDetails(): [FileDetail | null, boolean] {
+export default function useFileDetails(): [FileDetail | undefined, boolean] {
     const fileSelection = useSelector(selection.selectors.getFileSelection);
 
-    const [fileDetails, setFileDetails] = React.useState<FileDetail | null>(null);
+    const [fileDetails, setFileDetails] = React.useState<FileDetail | undefined>();
     const [isLoading, setIsLoading] = React.useState(false);
 
     React.useEffect(() => {
@@ -26,13 +25,7 @@ export default function useFileDetails(): [FileDetail | null, boolean] {
         fileSelection
             .fetchFocusedItemDetails()
             .then((detail) => {
-                if (ignoreResponse) {
-                    return;
-                }
-
-                if (isUndefined(detail)) {
-                    setFileDetails(null);
-                } else {
+                if (!ignoreResponse) {
                     setFileDetails(detail);
                 }
             })

packages/core/components/RelationshipDiagram/index.tsx

@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import * as React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -11,14 +10,15 @@ import styles from "./RelationshipDiagram.module.css";
 
 
 interface Props {
+    className?: string;
     origin?: FileDetail;
 }
 
 /**
  * Overlay for displaying a relationship diagram/graph
  * Should use as much of the screen as possible
  */
-export default function RelationshipDiagram({ origin }: Props) {
+export default function RelationshipDiagram({ className, origin }: Props) {
     const dispatch = useDispatch();
     const provenanceRefreshKey = useSelector(interaction.selectors.getProvenanceRefreshKey);
 
@@ -29,10 +29,8 @@ export default function RelationshipDiagram({ origin }: Props) {
         }
     }, [origin, originalOriginName, setOriginalOriginName]);
 
-    console.log("hidden", !!origin, origin);
-
     return (
-        <div className={classNames({ [styles.hidden]: !!origin})}>
+        <div className={className}>
             <div className={styles.header}>
                 <PrimaryButton
                     iconName="Back"

packages/core/state/interaction/reducer.ts

@@ -196,8 +196,9 @@ export default makeReducer<InteractionStateBranch>(
         }),
         [SET_ORIGIN_FOR_PROVENANCE]: (state, action: SetOriginForProvenance) => ({
             ...state,
-            originForProvenance: action.payload,
+            fileForDetailPanel: undefined,
             provenanceRefreshKey: uniqueId(),
+            originForProvenance: action.payload,
         }),
         [SET_VISIBLE_MODAL]: (state, action: SetVisibleModalAction) => ({
             ...state,