Skip to content

Commit 66abc2e

Browse files
longshuicylongshuicy
authored
824 display more information on the extractor popup (#841)
* add extractor information details to the pop up * add button instead; need to tweak details * add collapsable * change color palatte and set default expanding as a prop * info only implemented * fix scrollable bug * stretch the list of extractors * don't show expand/collapse when just the information * add close button * reorganize search and filter * still allow extractor title to be clicked
1 parent f947d55 commit 66abc2e

File tree

8 files changed

+407
-243
lines changed

8 files changed

+407
-243
lines changed

‎frontend/src/components/listeners/ExtractionHistory.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
ListSubheader,
1212
} from "@mui/material";
1313
import { useDispatch, useSelector } from "react-redux";
14-
import { Listener, RootState } from "../../types/data";
14+
import { RootState } from "../../types/data";
15+
import { EventListenerOut as Listener } from "../../openapi/v2";
1516
import Layout from "../Layout";
1617
import { fetchListenerJobs, fetchListeners } from "../../actions/listeners";
1718
import { ArrowBack, ArrowForward } from "@material-ui/icons";

‎frontend/src/components/listeners/ExtractionJobs.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ export const ExtractionJobs = (props) => {
136136
open={openExtractorPane}
137137
onClose={handleSubmitExtractionClose}
138138
fullWidth={true}
139+
maxWidth="md"
139140
>
140141
<DialogTitle>Extractor Logs</DialogTitle>
141142
<DialogContent>

‎frontend/src/components/listeners/ListenerInfo.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,18 @@ import { Box, Typography } from "@mui/material";
33
import { ClowderTitle } from "../styledComponents/ClowderTitle";
44
import { ClowderFootnote } from "../styledComponents/ClowderFootnote";
55
import { parseDate } from "../../utils/common";
6-
import { Listener } from "../../types/data";
6+
import { EventListenerOut as Listener } from "../../openapi/v2";
77
import Chip from "@mui/material/Chip";
8+
import { ListenerInfoDetails } from "./ListenerInfoDetails";
9+
import { theme } from "../../theme";
810

911
type ListenerInfoProps = {
1012
selectedExtractor: Listener | undefined;
13+
defaultExpanded?: boolean;
1114
};
1215

1316
export const ListenerInfo = (props: ListenerInfoProps) => {
14-
const { selectedExtractor } = props;
17+
const { selectedExtractor, defaultExpanded } = props;
1518

1619
return (
1720
<Box>
@@ -34,13 +37,20 @@ export const ListenerInfo = (props: ListenerInfoProps) => {
3437
) : null}
3538
{selectedExtractor &&
3639
selectedExtractor["created"] &&
37-
selectedExtractor["author"] ? (
38-
<ClowderFootnote>
39-
{`Created by ${selectedExtractor["author"]} at ${parseDate(
40-
selectedExtractor["created"]
41-
)}`}
40+
selectedExtractor["properties"] &&
41+
selectedExtractor["properties"]["author"] ? (
42+
<ClowderFootnote style={{ color: theme.palette.info.main }}>
43+
{`Created by ${
44+
selectedExtractor["properties"]["author"]
45+
} at ${parseDate(selectedExtractor["created"])}`}
4246
</ClowderFootnote>
4347
) : null}
48+
{selectedExtractor ? (
49+
<ListenerInfoDetails
50+
listener={selectedExtractor}
51+
defaultExpanded={defaultExpanded}
52+
/>
53+
) : null}
4454
</Box>
4555
);
4656
};

‎frontend/src/components/listeners/ListenerInfoDetails.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import React, { useState } from "react";
2+
import { Box, Button } from "@mui/material";
3+
import { parseDate } from "../../utils/common";
4+
import { StackedList } from "../util/StackedList";
5+
import { EventListenerOut as Listener } from "../../openapi/v2";
6+
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
7+
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
8+
9+
type ListenerAboutProps = {
10+
listener: Listener;
11+
defaultExpanded?: boolean;
12+
};
13+
14+
export function ListenerInfoDetails(props: ListenerAboutProps) {
15+
const { listener, defaultExpanded } = props;
16+
const [expanded, setExpanded] = useState(
17+
defaultExpanded ? defaultExpanded : false
18+
);
19+
20+
const handleChange =
21+
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
22+
setExpanded(isExpanded ? panel : false);
23+
};
24+
25+
const details = new Map<string, string>();
26+
details.set("Last Alive", parseDate(listener.lastAlive ?? ""));
27+
details.set("Last Modified", parseDate(listener.modified ?? ""));
28+
29+
if (listener.properties) {
30+
details.set("Maturity", listener.properties.maturity ?? "");
31+
32+
if (
33+
listener.properties.contributors &&
34+
listener.properties.contributors.length > 0
35+
) {
36+
details.set("Contributors", listener.properties.contributors.join(", "));
37+
}
38+
39+
if (
40+
listener.properties.external_services &&
41+
listener.properties.external_services.length > 0
42+
) {
43+
details.set(
44+
"External Services",
45+
listener.properties.external_services.join(", ")
46+
);
47+
}
48+
49+
if (
50+
listener.properties.categories &&
51+
listener.properties.categories.length > 0
52+
) {
53+
details.set("Categories", listener.properties.categories.join(", "));
54+
}
55+
56+
if (listener.properties.bibtex && listener.properties.bibtex.length > 0) {
57+
details.set(
58+
"Bibtex",
59+
listener.properties.bibtex.join(", ") !== ""
60+
? listener.properties.bibtex.join(", ")
61+
: "Not Available"
62+
);
63+
}
64+
65+
if (
66+
listener.properties.default_labels &&
67+
listener.properties.default_labels.length > 0
68+
) {
69+
details.set(
70+
"Default Labels",
71+
listener.properties.default_labels.join(", ")
72+
);
73+
}
74+
75+
if (
76+
listener.properties.libraries &&
77+
listener.properties.libraries.length > 0
78+
) {
79+
details.set("Libraries", listener.properties.libraries.join(", "));
80+
}
81+
82+
if (
83+
listener.properties.process &&
84+
Object.keys(listener.properties.process).length > 0
85+
) {
86+
Object.keys(listener.properties.process).forEach((key) => {
87+
details.set(
88+
`Process ${key} by`,
89+
listener.properties.process[key].join(", ")
90+
);
91+
});
92+
}
93+
94+
if (
95+
listener.properties.contexts &&
96+
listener.properties.contexts.length > 0
97+
) {
98+
listener.properties.contexts.forEach((context) => {
99+
Object.keys(context).forEach((key) => {
100+
details.set(`Context: ${key}`, context[key]);
101+
});
102+
});
103+
}
104+
105+
if (
106+
listener.properties.repository &&
107+
listener.properties.repository.length > 0
108+
) {
109+
listener.properties.repository.forEach((repo) => {
110+
Object.keys(repo).forEach((key) => {
111+
details.set(key, repo[key] !== "" ? repo[key] : "Not Available");
112+
});
113+
});
114+
}
115+
}
116+
117+
return (
118+
<Box mt={2} mb={2}>
119+
{!expanded && !defaultExpanded ? (
120+
<Button
121+
onClick={() => {
122+
setExpanded(true);
123+
}}
124+
sx={{ padding: 0, float: "right" }}
125+
endIcon={<ExpandMoreIcon />}
126+
>
127+
Read More
128+
</Button>
129+
) : null}
130+
131+
{expanded ? <StackedList keyValues={details} /> : null}
132+
133+
{expanded && !defaultExpanded ? (
134+
<Button
135+
onClick={() => {
136+
setExpanded(false);
137+
}}
138+
sx={{ padding: 0, float: "right" }}
139+
endIcon={<ExpandLessIcon />}
140+
>
141+
Read Less
142+
</Button>
143+
) : null}
144+
</Box>
145+
);
146+
}

‎frontend/src/components/listeners/ListenerItem.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ type ListenerCardProps = {
1313
extractorName: string;
1414
extractorDescription: string;
1515
setOpenSubmitExtraction: any;
16+
setInfoOnly: any;
1617
setSelectedExtractor: any;
1718
};
1819

@@ -25,6 +26,7 @@ export default function ListenerItem(props: ListenerCardProps) {
2526
extractorName,
2627
extractorDescription,
2728
setOpenSubmitExtraction,
29+
setInfoOnly,
2830
setSelectedExtractor,
2931
} = props;
3032

@@ -50,13 +52,10 @@ export default function ListenerItem(props: ListenerCardProps) {
5052
</Tooltip>
5153
)}
5254
<Button
53-
disabled={
54-
!(fileId !== undefined || datasetId !== undefined) ||
55-
!extractor["alive"]
56-
}
5755
onClick={() => {
5856
setOpenSubmitExtraction(true);
5957
setSelectedExtractor(extractor);
58+
setInfoOnly(true);
6059
}}
6160
>
6261
{extractorName}
@@ -101,6 +100,7 @@ export default function ListenerItem(props: ListenerCardProps) {
101100
onClick={() => {
102101
setOpenSubmitExtraction(true);
103102
setSelectedExtractor(extractor);
103+
setInfoOnly(false);
104104
}}
105105
>
106106
<PlayCircleIcon />

0 commit comments

Comments
 (0)