Merge pull request #1379 from chhsiao1981/style-hide-display

style-hide display

Author: chhsiao1981

.gitmodules

@@ -4,3 +4,6 @@
 [submodule "testing/sample_dicoms"]
 	path = testing/sample_dicoms
 	url = https://github.com/FNNDSC/sample_dicom_downloader.git
+[submodule "third-party/fs2NiiVueColormaps"]
+	path = third-party/fs2NiiVueColormaps
+	url = [email protected]:niivue/fs2NiiVueColormaps.git

package.json

@@ -36,7 +36,8 @@
     "preview": "vite preview",
     "__helper_functions": "",
     "get-running-url": "./testing/get_running_url.sh",
-    "print-version": "node printVersion.js"
+    "print-version": "node printVersion.js",
+    "fs2niivue": "if [ -d third-party/fs2NiiVueColormaps ]; then cd third-party/fs2NiiVueColormaps; python3 fs2niivue.py; cp FreesurferColorLUT.v7.4.1.json ../../src/components/Preview/displays; rm *.json; cd ../..; else echo '[WARN] need to git submodule fs2NiiVueColormaps first'; fi"
   },
   "dependencies": {
     "@ant-design/icons": "^5.5.1",
@@ -73,7 +74,6 @@
     "marked": "14.1.2",
     "micromark": "^4.0.0",
     "micromark-extension-gfm": "^3.0.0",
-    "niivue-react": "github:niivue/niivue-react",
     "pako": "^1.0.11",
     "papaparse": "^5.4.1",
     "preval.macro": "^5.0.0",

pnpm-lock.yaml

@@ -184,6 +184,7 @@ export const fileViewerMap: any = {
   mov: "VideoDisplay", // Add mov format
   wmv: "VideoDisplay", // Add wmv format
   mkv: "VideoDisplay", // Add mkv format
+  mha: "NiiVueDisplay",
 };
 
 // Description: get file type by file extension

src/api/model.ts

@@ -18,11 +18,11 @@ import {
 } from "@patternfly/react-core";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { Alert, Popover, Spin } from "antd";
-import React, { type ReactNode, useState } from "react";
+import React, { type CSSProperties, type ReactNode, useState } from "react";
 import Dots from "react-activity/dist/Dots";
 import "react-activity/dist/library.css";
-import { Cookies } from "react-cookie";
 import ReactJson from "@microlink/react-json-view";
+import { Cookies } from "react-cookie";
 import {
   ArchiveIcon,
   CubesIcon,
@@ -46,9 +46,18 @@ export const EmptyStateComponent = ({ title }: { title?: string }) => {
   );
 };
 
-export const SpinContainer = ({ title }: { title: string }) => {
+type SpinContainerProps = {
+  title: string;
+  isHide?: boolean;
+};
+export const SpinContainer = (props: SpinContainerProps) => {
+  const { title, isHide } = props;
+  const style: CSSProperties = {};
+  if (isHide) {
+    style.display = "none";
+  }
   return (
-    <div className="example">
+    <div className="example" style={style}>
       <Spin tip={title}>
         <div className="content" />
       </Spin>

src/components/Common/index.tsx

@@ -0,0 +1,3 @@
+.hide {
+    display: none;
+}

src/components/FeedOutputBrowser/EmptyStateLoader.module.css

@@ -0,0 +1,24 @@
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateVariant,
+  Title,
+} from "@patternfly/react-core";
+
+import styles from "./EmptyStateLoader.module.css";
+
+type Props = {
+  title: string;
+  isHide?: boolean;
+};
+
+export const EmptyStateLoader = (props: Props) => {
+  const { title, isHide } = props;
+  const className = isHide ? styles.hide : "";
+  return (
+    <EmptyState variant={EmptyStateVariant.lg} className={className}>
+      <Title headingLevel="h4" size="lg" />
+      <EmptyStateBody>{title}</EmptyStateBody>
+    </EmptyState>
+  );
+};

src/components/FeedOutputBrowser/EmptyStateLoader.tsx

@@ -1,25 +1,20 @@
 import type { PluginInstance } from "@fnndsc/chrisapi";
-import {
-  EmptyState,
-  EmptyStateBody,
-  EmptyStateVariant,
-  Title,
-} from "@patternfly/react-core";
 import { Alert } from "../Antd";
 import { SpinContainer } from "../Common";
 import "./FeedOutputBrowser.css";
+import { EmptyStateLoader } from "./EmptyStateLoader";
 import FileBrowser from "./FileBrowser";
 import { useFeedBrowser } from "./useFeedBrowser";
 
-export interface FeedOutputBrowserProps {
+type Props = {
   handlePluginSelect: (node: PluginInstance) => void;
   explore: boolean;
   statuses: {
     [id: number]: string;
   };
-}
+};
 
-const FeedOutputBrowser: React.FC<FeedOutputBrowserProps> = (props) => {
+export default (props: Props) => {
   const {
     selected,
     pluginFilesPayload,
@@ -43,41 +38,42 @@ const FeedOutputBrowser: React.FC<FeedOutputBrowserProps> = (props) => {
     props.statuses,
   );
 
+  const isHideFetchFilesLoader = finished;
+  const isHideFileBrowser =
+    !finished || !pluginFilesPayload || !selected || isError;
+  const isHideError = !finished || !isError;
+  const isHideEmptyStateLoader =
+    !isHideFetchFilesLoader || !isHideFileBrowser || !isHideError;
+
   return (
     <div style={{ height: "100%" }} className="feed-output-browser">
-      {!finished ? (
-        <FetchFilesLoader title="Plugin executing. Files will be fetched when plugin completes" />
-      ) : pluginFilesPayload && selected && !isError ? (
-        <FileBrowser
-          selected={selected}
-          handleFileClick={handleFileClick}
-          pluginFilesPayload={pluginFilesPayload}
-          currentPath={currentPath}
-          fetchMore={fetchMore}
-          observerTarget={observerTarget}
-          handlePagination={handlePagination}
-          isLoading={filesLoading}
-        />
-      ) : isError ? (
-        <Alert type="error" description={error?.message} />
-      ) : (
-        <EmptyStateLoader title="" />
-      )}
+      <FetchFilesLoader
+        title="Plugin executing. Files will be fetched when plugin completes"
+        isHide={isHideFetchFilesLoader}
+      />
+      <FileBrowser
+        selected={selected}
+        handleFileClick={handleFileClick}
+        pluginFilesPayload={pluginFilesPayload}
+        currentPath={currentPath}
+        fetchMore={fetchMore}
+        observerTarget={observerTarget}
+        handlePagination={handlePagination}
+        isLoading={filesLoading}
+        isHide={isHideFileBrowser}
+      />
+      {!isHideError && <Alert type="error" description={error?.message} />}
+      <EmptyStateLoader title="" isHide={isHideEmptyStateLoader} />
     </div>
   );
 };
 
-export default FeedOutputBrowser;
-
-export const EmptyStateLoader = ({ title }: { title: string }) => {
-  return (
-    <EmptyState variant={EmptyStateVariant.lg}>
-      <Title headingLevel="h4" size="lg" />
-      <EmptyStateBody>{title}</EmptyStateBody>
-    </EmptyState>
-  );
+type FetchFilesLoaderProps = {
+  title: string;
+  isHide?: boolean;
 };
 
-const FetchFilesLoader = ({ title }: { title: string }) => {
-  return <SpinContainer title={title} />;
+const FetchFilesLoader = (props: FetchFilesLoaderProps) => {
+  const { title, isHide } = props;
+  return <SpinContainer title={title} isHide={isHide} />;
 };

src/components/FeedOutputBrowser/FeedOutputBrowser.tsx

@@ -0,0 +1,3 @@
+.hide {
+    display: none;
+}