From bdcab9f9fff321feecc4990c87d7c7c728324197 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Wed, 29 Nov 2023 10:36:07 -0600 Subject: [PATCH 01/11] add extractor information details to the pop up --- .../listeners/ExtractionHistory.tsx | 3 +- .../src/components/listeners/ListenerInfo.tsx | 15 +- .../listeners/ListenerInfoDetails.tsx | 106 ++++++++++ .../components/listeners/SubmitExtraction.tsx | 193 +++++++++++------- frontend/src/types/data.ts | 15 +- 5 files changed, 234 insertions(+), 98 deletions(-) create mode 100644 frontend/src/components/listeners/ListenerInfoDetails.tsx diff --git a/frontend/src/components/listeners/ExtractionHistory.tsx b/frontend/src/components/listeners/ExtractionHistory.tsx index ee579b88c..2c0c6fe49 100644 --- a/frontend/src/components/listeners/ExtractionHistory.tsx +++ b/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"; diff --git a/frontend/src/components/listeners/ListenerInfo.tsx b/frontend/src/components/listeners/ListenerInfo.tsx index 7adfd27d2..d5e149135 100644 --- a/frontend/src/components/listeners/ListenerInfo.tsx +++ b/frontend/src/components/listeners/ListenerInfo.tsx @@ -3,8 +3,9 @@ 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"; type ListenerInfoProps = { selectedExtractor: Listener | undefined; @@ -34,13 +35,17 @@ export const ListenerInfo = (props: ListenerInfoProps) => { ) : null} {selectedExtractor && selectedExtractor["created"] && - selectedExtractor["author"] ? ( + selectedExtractor["properties"] && + selectedExtractor["properties"]["author"] ? ( - {`Created by ${selectedExtractor["author"]} at ${parseDate( - selectedExtractor["created"] - )}`} + {`Created by ${ + selectedExtractor["properties"]["author"] + } at ${parseDate(selectedExtractor["created"])}`} ) : null} + {selectedExtractor ? ( + + ) : null} ); }; diff --git a/frontend/src/components/listeners/ListenerInfoDetails.tsx b/frontend/src/components/listeners/ListenerInfoDetails.tsx new file mode 100644 index 000000000..1e9c8ebf0 --- /dev/null +++ b/frontend/src/components/listeners/ListenerInfoDetails.tsx @@ -0,0 +1,106 @@ +import React from "react"; +import { Box } from "@mui/material"; +import { parseDate } from "../../utils/common"; +import { StackedList } from "../util/StackedList"; +import { EventListenerOut as Listener } from "../../openapi/v2"; + +type ListenerAboutProps = { + listener: Listener; +}; + +export function ListenerInfoDetails(props: ListenerAboutProps) { + const { listener } = props; + + const details = new Map(); + 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(", ")); + } + + 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 ( + + + + ); +} diff --git a/frontend/src/components/listeners/SubmitExtraction.tsx b/frontend/src/components/listeners/SubmitExtraction.tsx index bb85db712..6da201566 100644 --- a/frontend/src/components/listeners/SubmitExtraction.tsx +++ b/frontend/src/components/listeners/SubmitExtraction.tsx @@ -1,5 +1,5 @@ -import React, {useState} from "react"; -import {useDispatch, useSelector} from "react-redux"; +import React, { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; import { Box, Button, @@ -15,43 +15,52 @@ import { Stepper, } from "@mui/material"; -import {ListenerInfo} from "./ListenerInfo"; +import { ListenerInfo } from "./ListenerInfo"; import Form from "@rjsf/material-ui"; -import {FormProps} from "@rjsf/core"; -import {submitFileExtractionAction} from "../../actions/file"; -import {submitDatasetExtractionAction} from "../../actions/dataset"; -import {Extractor, RootState} from "../../types/data"; -import {ClowderRjsfSelectWidget} from "../styledComponents/ClowderRjsfSelectWidget"; -import {ClowderRjsfTextWidget} from "../styledComponents/ClowderRjsfTextWidget"; +import { FormProps } from "@rjsf/core"; +import { submitFileExtractionAction } from "../../actions/file"; +import { submitDatasetExtractionAction } from "../../actions/dataset"; +import { RootState } from "../../types/data"; +import { EventListenerOut as Extractor } from "../../openapi/v2"; +import { ClowderRjsfSelectWidget } from "../styledComponents/ClowderRjsfSelectWidget"; +import { ClowderRjsfTextWidget } from "../styledComponents/ClowderRjsfTextWidget"; import ExtractorStatus from "./ExtractorStatus"; type SubmitExtractionProps = { - fileId: string, - datasetId: string, - open: boolean, - handleClose: any, - selectedExtractor: Extractor -} + fileId: string; + datasetId: string; + open: boolean; + handleClose: any; + selectedExtractor: Extractor; +}; const widgets = { - TextWidget: ClowderRjsfTextWidget, - SelectWidget: ClowderRjsfSelectWidget - }; + TextWidget: ClowderRjsfTextWidget, + SelectWidget: ClowderRjsfSelectWidget, +}; export default function SubmitExtraction(props: SubmitExtractionProps) { - - const {fileId, datasetId, open, handleClose, selectedExtractor} = props; + const { fileId, datasetId, open, handleClose, selectedExtractor } = props; const dispatch = useDispatch(); - const submitFileExtraction = - (fileId: string | undefined, extractorName: string | undefined, requestBody: FormData) => dispatch(submitFileExtractionAction(fileId, extractorName, requestBody)); - const submitDatasetExtraction = - (datasetId: string | undefined, extractorName: string | undefined, requestBody: FormData) => dispatch(submitDatasetExtractionAction(datasetId, extractorName, requestBody)); - + const submitFileExtraction = ( + fileId: string | undefined, + extractorName: string | undefined, + requestBody: FormData + ) => dispatch(submitFileExtractionAction(fileId, extractorName, requestBody)); + const submitDatasetExtraction = ( + datasetId: string | undefined, + extractorName: string | undefined, + requestBody: FormData + ) => + dispatch( + submitDatasetExtractionAction(datasetId, extractorName, requestBody) + ); + const job_id = useSelector((state: RootState) => state.listener.currJobId); const onSubmit = (formData: FormData) => { - const extractorName = selectedExtractor.name + const extractorName = selectedExtractor.name; if (fileId === undefined && datasetId !== undefined) { submitDatasetExtraction(datasetId, extractorName, formData); handleNext(); @@ -59,7 +68,7 @@ export default function SubmitExtraction(props: SubmitExtractionProps) { submitFileExtraction(fileId, extractorName, formData); handleNext(); } - } + }; const [activeStep, setActiveStep] = useState(0); const handleNext = () => { @@ -67,76 +76,100 @@ export default function SubmitExtraction(props: SubmitExtractionProps) { }; const handleBack = () => { setActiveStep((prevActiveStep) => prevActiveStep - 1); - } + }; const handleFinish = () => { setActiveStep(0); - } + }; const onClose = () => { handleClose(); setActiveStep(0); - } + }; return ( // TODO replace this with submit extraction content - - - + + + + + {/*step 1 fill in parameters and submit extractions*/} Submit Extractions - { - selectedExtractor && - selectedExtractor["properties"] - && selectedExtractor["properties"]["parameters"] - && selectedExtractor["properties"]["parameters"]["schema"] ? - -
["schema"]}} - onSubmit={({formData}) => { - onSubmit(formData); - }}> - - - -
- - : - -
{ - onSubmit(formData); - }}> - - - -
- - } + {selectedExtractor && + selectedExtractor["properties"] && + selectedExtractor["properties"]["parameters"] && + selectedExtractor["properties"]["parameters"]["schema"] ? ( + +
["schema"], + }} + onSubmit={({ formData }) => { + onSubmit(formData); + }} + > + + + +
+ + ) : ( + +
{ + onSubmit(formData); + }} + > + + + +
+ + )} {/*step 2 status*/} Extraction Status - + {/*buttons*/} - - @@ -147,12 +180,16 @@ export default function SubmitExtraction(props: SubmitExtractionProps) { Extracted Results {/*buttons*/} - + <> - - diff --git a/frontend/src/types/data.ts b/frontend/src/types/data.ts index 200409243..914925bb5 100644 --- a/frontend/src/types/data.ts +++ b/frontend/src/types/data.ts @@ -3,6 +3,7 @@ import { DatasetOut as Dataset, DatasetRoles, EventListenerJobDB, + EventListenerOut as Listener, FileOut as FileSummary, FileVersion, FolderOut, @@ -16,20 +17,6 @@ import { VisualizationDataOut, } from "../openapi/v2"; -export interface Extractor { - name: string; - description: string; - id: string; - parameters: any; -} - -export interface Listener { - name: string; - description: string; - id: string; - parameters: any; -} - export interface Profile { id: string; email: string; From 12fc5c1a025a15b4f1060d6ba82e38e3874a6b45 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Wed, 29 Nov 2023 10:54:10 -0600 Subject: [PATCH 02/11] add button instead; need to tweak details --- .../listeners/ListenerInfoDetails.tsx | 39 ++++++++++++++++--- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/listeners/ListenerInfoDetails.tsx b/frontend/src/components/listeners/ListenerInfoDetails.tsx index 1e9c8ebf0..af9aad8d9 100644 --- a/frontend/src/components/listeners/ListenerInfoDetails.tsx +++ b/frontend/src/components/listeners/ListenerInfoDetails.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import { Box } from "@mui/material"; +import React, { useState } from "react"; +import { Button } from "@mui/material"; import { parseDate } from "../../utils/common"; import { StackedList } from "../util/StackedList"; import { EventListenerOut as Listener } from "../../openapi/v2"; @@ -8,8 +8,23 @@ type ListenerAboutProps = { listener: Listener; }; +const accordionStyle = { + accordion: { + boxShadow: "none", + border: "none", + }, + accordionSummary: { + backgroundColor: "transparent", + }, +}; export function ListenerInfoDetails(props: ListenerAboutProps) { const { listener } = props; + const [expanded, setExpanded] = useState(false); + + const handleChange = + (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { + setExpanded(isExpanded ? panel : false); + }; const details = new Map(); details.set("Last Alive", parseDate(listener.lastAlive ?? "")); @@ -43,7 +58,12 @@ export function ListenerInfoDetails(props: ListenerAboutProps) { } if (listener.properties.bibtex && listener.properties.bibtex.length > 0) { - details.set("Bibtex", listener.properties.bibtex.join(", ")); + details.set( + "Bibtex", + listener.properties.bibtex.join(", ") !== "" + ? listener.properties.bibtex.join(", ") + : "Not Available" + ); } if ( @@ -99,8 +119,15 @@ export function ListenerInfoDetails(props: ListenerAboutProps) { } return ( - - - + <> + + {expanded ? : null} + ); } From 952085901f46ed6f4c100defd5adc05be2dc5666 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Wed, 29 Nov 2023 13:39:12 -0600 Subject: [PATCH 03/11] add collapsable --- .../listeners/ListenerInfoDetails.tsx | 48 +++++++++++-------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/frontend/src/components/listeners/ListenerInfoDetails.tsx b/frontend/src/components/listeners/ListenerInfoDetails.tsx index af9aad8d9..79d26ca59 100644 --- a/frontend/src/components/listeners/ListenerInfoDetails.tsx +++ b/frontend/src/components/listeners/ListenerInfoDetails.tsx @@ -1,22 +1,15 @@ import React, { useState } from "react"; -import { Button } from "@mui/material"; +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; }; -const accordionStyle = { - accordion: { - boxShadow: "none", - border: "none", - }, - accordionSummary: { - backgroundColor: "transparent", - }, -}; export function ListenerInfoDetails(props: ListenerAboutProps) { const { listener } = props; const [expanded, setExpanded] = useState(false); @@ -119,15 +112,32 @@ export function ListenerInfoDetails(props: ListenerAboutProps) { } return ( - <> - + + {!expanded ? ( + + ) : null} + {expanded ? : null} - + + {expanded ? ( + + ) : null} + ); } From a099b07ee2277ddc907056e588884dd2842d7b24 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Wed, 29 Nov 2023 13:42:49 -0600 Subject: [PATCH 04/11] change color palatte and set default expanding as a prop --- frontend/src/components/listeners/ListenerInfo.tsx | 3 ++- frontend/src/components/listeners/ListenerInfoDetails.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/listeners/ListenerInfo.tsx b/frontend/src/components/listeners/ListenerInfo.tsx index d5e149135..565f19d66 100644 --- a/frontend/src/components/listeners/ListenerInfo.tsx +++ b/frontend/src/components/listeners/ListenerInfo.tsx @@ -6,6 +6,7 @@ import { parseDate } from "../../utils/common"; 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; @@ -37,7 +38,7 @@ export const ListenerInfo = (props: ListenerInfoProps) => { selectedExtractor["created"] && selectedExtractor["properties"] && selectedExtractor["properties"]["author"] ? ( - + {`Created by ${ selectedExtractor["properties"]["author"] } at ${parseDate(selectedExtractor["created"])}`} diff --git a/frontend/src/components/listeners/ListenerInfoDetails.tsx b/frontend/src/components/listeners/ListenerInfoDetails.tsx index 79d26ca59..a93e84295 100644 --- a/frontend/src/components/listeners/ListenerInfoDetails.tsx +++ b/frontend/src/components/listeners/ListenerInfoDetails.tsx @@ -8,11 +8,14 @@ import ExpandLessIcon from "@mui/icons-material/ExpandLess"; type ListenerAboutProps = { listener: Listener; + defaultExpanded?: boolean; }; export function ListenerInfoDetails(props: ListenerAboutProps) { - const { listener } = props; - const [expanded, setExpanded] = useState(false); + const { listener, defaultExpanded } = props; + const [expanded, setExpanded] = useState( + defaultExpanded ? defaultExpanded : false + ); const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { From 4befc787f86bf0876afac55dc20de72d9db6b617 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Wed, 29 Nov 2023 14:09:15 -0600 Subject: [PATCH 05/11] info only implemented --- .../src/components/listeners/ListenerInfo.tsx | 8 +- .../src/components/listeners/ListenerItem.tsx | 4 + .../src/components/listeners/Listeners.tsx | 3 + .../components/listeners/SubmitExtraction.tsx | 201 +++++++++--------- 4 files changed, 118 insertions(+), 98 deletions(-) diff --git a/frontend/src/components/listeners/ListenerInfo.tsx b/frontend/src/components/listeners/ListenerInfo.tsx index 565f19d66..d45a4e036 100644 --- a/frontend/src/components/listeners/ListenerInfo.tsx +++ b/frontend/src/components/listeners/ListenerInfo.tsx @@ -10,10 +10,11 @@ import { theme } from "../../theme"; type ListenerInfoProps = { selectedExtractor: Listener | undefined; + defaultExpanded?: boolean; }; export const ListenerInfo = (props: ListenerInfoProps) => { - const { selectedExtractor } = props; + const { selectedExtractor, defaultExpanded } = props; return ( @@ -45,7 +46,10 @@ export const ListenerInfo = (props: ListenerInfoProps) => { ) : null} {selectedExtractor ? ( - + ) : null} ); diff --git a/frontend/src/components/listeners/ListenerItem.tsx b/frontend/src/components/listeners/ListenerItem.tsx index ec0c3a2ab..acedaae30 100644 --- a/frontend/src/components/listeners/ListenerItem.tsx +++ b/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; @@ -57,6 +59,7 @@ export default function ListenerItem(props: ListenerCardProps) { onClick={() => { setOpenSubmitExtraction(true); setSelectedExtractor(extractor); + setInfoOnly(true); }} > {extractorName} @@ -101,6 +104,7 @@ export default function ListenerItem(props: ListenerCardProps) { onClick={() => { setOpenSubmitExtraction(true); setSelectedExtractor(extractor); + setInfoOnly(false); }} > diff --git a/frontend/src/components/listeners/Listeners.tsx b/frontend/src/components/listeners/Listeners.tsx index f731b011e..aa747b3d4 100644 --- a/frontend/src/components/listeners/Listeners.tsx +++ b/frontend/src/components/listeners/Listeners.tsx @@ -78,6 +78,7 @@ export function Listeners(props: ListenerProps) { const [nextDisabled, setNextDisabled] = useState(false); const [openSubmitExtraction, setOpenSubmitExtraction] = useState(false); + const [infoOnly, setInfoOnly] = useState(false); const [selectedExtractor, setSelectedExtractor] = useState(); const [searchText, setSearchText] = useState(""); const [selectedCategory, setSelectedCategory] = useState(""); @@ -282,6 +283,7 @@ export function Listeners(props: ListenerProps) { extractor={listener} extractorName={listener.name} extractorDescription={listener.description} + setInfoOnly={setInfoOnly} setOpenSubmitExtraction={setOpenSubmitExtraction} setSelectedExtractor={setSelectedExtractor} /> @@ -321,6 +323,7 @@ export function Listeners(props: ListenerProps) { fileId={fileId} datasetId={datasetId} open={openSubmitExtraction} + infoOnly={infoOnly} handleClose={handleSubmitExtractionClose} selectedExtractor={selectedExtractor} /> diff --git a/frontend/src/components/listeners/SubmitExtraction.tsx b/frontend/src/components/listeners/SubmitExtraction.tsx index 6da201566..b78921cdc 100644 --- a/frontend/src/components/listeners/SubmitExtraction.tsx +++ b/frontend/src/components/listeners/SubmitExtraction.tsx @@ -30,6 +30,7 @@ type SubmitExtractionProps = { fileId: string; datasetId: string; open: boolean; + infoOnly: boolean; handleClose: any; selectedExtractor: Extractor; }; @@ -40,7 +41,8 @@ const widgets = { }; export default function SubmitExtraction(props: SubmitExtractionProps) { - const { fileId, datasetId, open, handleClose, selectedExtractor } = props; + const { fileId, datasetId, open, infoOnly, handleClose, selectedExtractor } = + props; const dispatch = useDispatch(); const submitFileExtraction = ( @@ -100,107 +102,114 @@ export default function SubmitExtraction(props: SubmitExtractionProps) { }} > - + - - - - {/*step 1 fill in parameters and submit extractions*/} - - Submit Extractions - - {selectedExtractor && - selectedExtractor["properties"] && - selectedExtractor["properties"]["parameters"] && - selectedExtractor["properties"]["parameters"]["schema"] ? ( - -
["schema"], - }} - onSubmit={({ formData }) => { - onSubmit(formData); - }} - > - - - -
- - ) : ( - -
{ - onSubmit(formData); - }} - > - + + + + +
+ ) : ( + +
{ + onSubmit(formData); + }} + > + + + +
+ + )} + + + {/*step 2 status*/} + + Extraction Status + + + {/*buttons*/} + + + + + + {/*step 2 results*/} + + Extracted Results + + {/*buttons*/} + + <> + - - - - )} - - - {/*step 2 status*/} - - Extraction Status - - - {/*buttons*/} - - - - - - {/*step 2 results*/} - - Extracted Results - - {/*buttons*/} - - <> - - - - - - - - - - - + + + + + + + + + + + ) : null} ); From 2f789ad71081658243f053af8922abf2e8762eb5 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Wed, 29 Nov 2023 14:34:28 -0600 Subject: [PATCH 06/11] fix scrollable bug --- frontend/src/components/listeners/ExtractionJobs.tsx | 1 + frontend/src/components/listeners/SubmitExtraction.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/listeners/ExtractionJobs.tsx b/frontend/src/components/listeners/ExtractionJobs.tsx index d852ee899..a58e8cebc 100644 --- a/frontend/src/components/listeners/ExtractionJobs.tsx +++ b/frontend/src/components/listeners/ExtractionJobs.tsx @@ -136,6 +136,7 @@ export const ExtractionJobs = (props) => { open={openExtractorPane} onClose={handleSubmitExtractionClose} fullWidth={true} + maxWidth="md" > Extractor Logs diff --git a/frontend/src/components/listeners/SubmitExtraction.tsx b/frontend/src/components/listeners/SubmitExtraction.tsx index b78921cdc..d5709920d 100644 --- a/frontend/src/components/listeners/SubmitExtraction.tsx +++ b/frontend/src/components/listeners/SubmitExtraction.tsx @@ -98,6 +98,7 @@ export default function SubmitExtraction(props: SubmitExtractionProps) { sx={{ ".MuiPaper-root": { padding: "2em", + height: "auto", }, }} > @@ -110,7 +111,7 @@ export default function SubmitExtraction(props: SubmitExtractionProps) { {!infoOnly ? ( <> - + {/*step 1 fill in parameters and submit extractions*/} From f2e81eaabe8dab6d8e7f9c1d3b4608c190e940f5 Mon Sep 17 00:00:00 2001 From: Chen Wang Date: Thu, 30 Nov 2023 09:14:43 -0600 Subject: [PATCH 07/11] stretch the list of extractors --- .../src/components/listeners/Listeners.tsx | 108 ++++++++---------- 1 file changed, 48 insertions(+), 60 deletions(-) diff --git a/frontend/src/components/listeners/Listeners.tsx b/frontend/src/components/listeners/Listeners.tsx index aa747b3d4..6957941b1 100644 --- a/frontend/src/components/listeners/Listeners.tsx +++ b/frontend/src/components/listeners/Listeners.tsx @@ -5,14 +5,13 @@ import { ButtonGroup, Divider, FormControl, - FormControlLabel, - FormLabel, Grid, IconButton, InputBase, + InputLabel, List, - Radio, - RadioGroup, + MenuItem, + Select, } from "@mui/material"; import { RootState } from "../../types/data"; @@ -171,8 +170,8 @@ export function Listeners(props: ListenerProps) { return ( <> - - + + {/*searchbox*/} - - {/*categories*/} - - - Filter by category - - - } label="All" /> - {categories.map((category: string) => { - return ( - } - label={capitalize(category)} - /> - ); - })} - - - - - {/*labels*/} - - - Filter by labels - - - } label="All" /> - {labels.map((label: string) => { - return ( - } - label={capitalize(label)} - /> - ); - })} - - - - + {/*categories*/} + + + Filter by category + + + + + + Filter by labels + + + + + + Date: Thu, 30 Nov 2023 10:56:22 -0600 Subject: [PATCH 08/11] don't show expand/collapse when just the information --- frontend/src/components/listeners/ListenerInfoDetails.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/listeners/ListenerInfoDetails.tsx b/frontend/src/components/listeners/ListenerInfoDetails.tsx index a93e84295..762f4bf31 100644 --- a/frontend/src/components/listeners/ListenerInfoDetails.tsx +++ b/frontend/src/components/listeners/ListenerInfoDetails.tsx @@ -116,7 +116,7 @@ export function ListenerInfoDetails(props: ListenerAboutProps) { return ( - {!expanded ? ( + {!expanded && !defaultExpanded ? ( - + Date: Thu, 7 Dec 2023 12:15:45 -0600 Subject: [PATCH 11/11] still allow extractor title to be clicked --- frontend/src/components/listeners/ListenerItem.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/src/components/listeners/ListenerItem.tsx b/frontend/src/components/listeners/ListenerItem.tsx index acedaae30..b149ded1a 100644 --- a/frontend/src/components/listeners/ListenerItem.tsx +++ b/frontend/src/components/listeners/ListenerItem.tsx @@ -52,10 +52,6 @@ export default function ListenerItem(props: ListenerCardProps) { )}