824 display more information on the extractor popup

frontend/src/components/listeners/ExtractionHistory.tsx

@@ -11,7 +11,8 @@ import {
 	ListSubheader,
 } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
-import { Listener, RootState } from "../../types/data";
+import { RootState } from "../../types/data";
+import { EventListenerOut as Listener } from "../../openapi/v2";
 import Layout from "../Layout";
 import { fetchListenerJobs, fetchListeners } from "../../actions/listeners";
 import { ArrowBack, ArrowForward } from "@material-ui/icons";

frontend/src/components/listeners/ExtractionJobs.tsx

@@ -136,6 +136,7 @@ export const ExtractionJobs = (props) => {
 					open={openExtractorPane}
 					onClose={handleSubmitExtractionClose}
 					fullWidth={true}
+					maxWidth="md"
 				>
 					<DialogTitle>Extractor Logs</DialogTitle>
 					<DialogContent>

frontend/src/components/listeners/ListenerInfo.tsx

@@ -3,15 +3,18 @@ import { Box, Typography } from "@mui/material";
 import { ClowderTitle } from "../styledComponents/ClowderTitle";
 import { ClowderFootnote } from "../styledComponents/ClowderFootnote";
 import { parseDate } from "../../utils/common";
-import { Listener } from "../../types/data";
+import { EventListenerOut as Listener } from "../../openapi/v2";
 import Chip from "@mui/material/Chip";
+import { ListenerInfoDetails } from "./ListenerInfoDetails";
+import { theme } from "../../theme";
 
 type ListenerInfoProps = {
 	selectedExtractor: Listener | undefined;
+	defaultExpanded?: boolean;
 };
 
 export const ListenerInfo = (props: ListenerInfoProps) => {
-	const { selectedExtractor } = props;
+	const { selectedExtractor, defaultExpanded } = props;
 
 	return (
 		<Box>
@@ -34,13 +37,20 @@ export const ListenerInfo = (props: ListenerInfoProps) => {
 			) : null}
 			{selectedExtractor &&
 			selectedExtractor["created"] &&
-			selectedExtractor["author"] ? (
-				<ClowderFootnote>
-					{`Created by ${selectedExtractor["author"]} at ${parseDate(
-						selectedExtractor["created"]
-					)}`}
+			selectedExtractor["properties"] &&
+			selectedExtractor["properties"]["author"] ? (
+				<ClowderFootnote style={{ color: theme.palette.info.main }}>
+					{`Created by ${
+						selectedExtractor["properties"]["author"]
+					} at ${parseDate(selectedExtractor["created"])}`}
 				</ClowderFootnote>
 			) : null}
+			{selectedExtractor ? (
+				<ListenerInfoDetails
+					listener={selectedExtractor}
+					defaultExpanded={defaultExpanded}
+				/>
+			) : null}
 		</Box>
 	);
 };

frontend/src/components/listeners/ListenerInfoDetails.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { Box, Button } from "@mui/material";
+import { parseDate } from "../../utils/common";
+import { StackedList } from "../util/StackedList";
+import { EventListenerOut as Listener } from "../../openapi/v2";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+
+type ListenerAboutProps = {
+	listener: Listener;
+	defaultExpanded?: boolean;
+};
+
+export function ListenerInfoDetails(props: ListenerAboutProps) {
+	const { listener, defaultExpanded } = props;
+	const [expanded, setExpanded] = useState(
+		defaultExpanded ? defaultExpanded : false
+	);
+
+	const handleChange =
+		(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+			setExpanded(isExpanded ? panel : false);
+		};
+
+	const details = new Map<string, string>();
+	details.set("Last Alive", parseDate(listener.lastAlive ?? ""));
+	details.set("Last Modified", parseDate(listener.modified ?? ""));
+
+	if (listener.properties) {
+		details.set("Maturity", listener.properties.maturity ?? "");
+
+		if (
+			listener.properties.contributors &&
+			listener.properties.contributors.length > 0
+		) {
+			details.set("Contributors", listener.properties.contributors.join(", "));
+		}
+
+		if (
+			listener.properties.external_services &&
+			listener.properties.external_services.length > 0
+		) {
+			details.set(
+				"External Services",
+				listener.properties.external_services.join(", ")
+			);
+		}
+
+		if (
+			listener.properties.categories &&
+			listener.properties.categories.length > 0
+		) {
+			details.set("Categories", listener.properties.categories.join(", "));
+		}
+
+		if (listener.properties.bibtex && listener.properties.bibtex.length > 0) {
+			details.set(
+				"Bibtex",
+				listener.properties.bibtex.join(", ") !== ""
+					? listener.properties.bibtex.join(", ")
+					: "Not Available"
+			);
+		}
+
+		if (
+			listener.properties.default_labels &&
+			listener.properties.default_labels.length > 0
+		) {
+			details.set(
+				"Default Labels",
+				listener.properties.default_labels.join(", ")
+			);
+		}
+
+		if (
+			listener.properties.libraries &&
+			listener.properties.libraries.length > 0
+		) {
+			details.set("Libraries", listener.properties.libraries.join(", "));
+		}
+
+		if (
+			listener.properties.process &&
+			Object.keys(listener.properties.process).length > 0
+		) {
+			Object.keys(listener.properties.process).forEach((key) => {
+				details.set(
+					`Process ${key} by`,
+					listener.properties.process[key].join(", ")
+				);
+			});
+		}
+
+		if (
+			listener.properties.contexts &&
+			listener.properties.contexts.length > 0
+		) {
+			listener.properties.contexts.forEach((context) => {
+				Object.keys(context).forEach((key) => {
+					details.set(`Context: ${key}`, context[key]);
+				});
+			});
+		}
+
+		if (
+			listener.properties.repository &&
+			listener.properties.repository.length > 0
+		) {
+			listener.properties.repository.forEach((repo) => {
+				Object.keys(repo).forEach((key) => {
+					details.set(key, repo[key] !== "" ? repo[key] : "Not Available");
+				});
+			});
+		}
+	}
+
+	return (
+		<Box mt={2} mb={2}>
+			{!expanded && !defaultExpanded ? (
+				<Button
+					onClick={() => {
+						setExpanded(true);
+					}}
+					sx={{ padding: 0, float: "right" }}
+					endIcon={<ExpandMoreIcon />}
+				>
+					Read More
+				</Button>
+			) : null}
+
+			{expanded ? <StackedList keyValues={details} /> : null}
+
+			{expanded && !defaultExpanded ? (
+				<Button
+					onClick={() => {
+						setExpanded(false);
+					}}
+					sx={{ padding: 0, float: "right" }}
+					endIcon={<ExpandLessIcon />}
+				>
+					Read Less
+				</Button>
+			) : null}
+		</Box>
+	);
+}

frontend/src/components/listeners/ListenerItem.tsx

@@ -13,6 +13,7 @@ type ListenerCardProps = {
 	extractorName: string;
 	extractorDescription: string;
 	setOpenSubmitExtraction: any;
+	setInfoOnly: any;
 	setSelectedExtractor: any;
 };
 
@@ -25,6 +26,7 @@ export default function ListenerItem(props: ListenerCardProps) {
 		extractorName,
 		extractorDescription,
 		setOpenSubmitExtraction,
+		setInfoOnly,
 		setSelectedExtractor,
 	} = props;
 
@@ -50,13 +52,10 @@ export default function ListenerItem(props: ListenerCardProps) {
 					</Tooltip>
 				)}
 				<Button
-					disabled={
-						!(fileId !== undefined || datasetId !== undefined) ||
-						!extractor["alive"]
-					}
 					onClick={() => {
 						setOpenSubmitExtraction(true);
 						setSelectedExtractor(extractor);
+						setInfoOnly(true);
 					}}
 				>
 					{extractorName}
@@ -101,6 +100,7 @@ export default function ListenerItem(props: ListenerCardProps) {
 					onClick={() => {
 						setOpenSubmitExtraction(true);
 						setSelectedExtractor(extractor);
+						setInfoOnly(false);
 					}}
 				>
 					<PlayCircleIcon />