From 62a3a60d6dc6c3b3821cc53d35af55cdc4a76e8a Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Mon, 9 Sep 2024 14:35:59 +0300 Subject: [PATCH] MWB-766: discover terms after ontology file upload --- .../src/pages/app/ontology-files/index.js | 99 +++++++++++-------- .../sections/app/ontology-term/edit-form.js | 20 ---- 2 files changed, 58 insertions(+), 61 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/ontology-files/index.js b/mapping_workbench/frontend/src/pages/app/ontology-files/index.js index cde0344bb..9faa5b1f6 100644 --- a/mapping_workbench/frontend/src/pages/app/ontology-files/index.js +++ b/mapping_workbench/frontend/src/pages/app/ontology-files/index.js @@ -13,6 +13,7 @@ import DialogContent from "@mui/material/DialogContent"; import {Seo} from 'src/components/seo'; import {Layout as AppLayout} from 'src/layouts/app'; import {ontologyFilesApi as sectionApi} from 'src/api/ontology-files'; +import {ontologyTermsApi} from "../../../api/ontology-terms"; import {useDialog} from 'src/hooks/use-dialog'; import {usePageView} from 'src/hooks/use-page-view'; import {FileUploader} from 'src/sections/app/files-form//file-uploader'; @@ -24,24 +25,25 @@ import {sessionApi} from "src/api/session"; import {Prism as SyntaxHighlighter} from "react-syntax-highlighter"; import CircularProgress from "@mui/material/CircularProgress"; import {Box} from "@mui/system"; +import {toastError, toastLoad, toastSuccess} from "../../../components/app-toast"; const useItemsSearch = (items) => { const [state, setState] = useState({ filters: {}, page: sectionApi.DEFAULT_PAGE, rowsPerPage: sectionApi.DEFAULT_ROWS_PER_PAGE, - sort: { + sort: { column: "filename", direction: "desc" }, search: '', - searchColumns:["filename"], + searchColumns: ["filename"], }); const searchItems = state.search ? items.filter(item => { let returnItem = null; state.searchColumns.forEach(column => { - if(item[column]?.toLowerCase()?.includes(state.search.toLowerCase())) + if (item[column]?.toLowerCase()?.includes(state.search.toLowerCase())) returnItem = item }) return returnItem @@ -50,22 +52,22 @@ const useItemsSearch = (items) => { const filteredItems = searchItems.filter((item) => { let returnItem = item; - Object.entries(state.filters).forEach(filter=> { + Object.entries(state.filters).forEach(filter => { const [key, value] = filter - if(value !== "" && value !== undefined && typeof item[key] === "boolean" && item[key] !== (value == "true")) + if (value !== "" && value !== undefined && typeof item[key] === "boolean" && item[key] !== (value == "true")) returnItem = null - if(value !== undefined && typeof item[key] === "string" && !item[key].toLowerCase().includes(value.toLowerCase)) + if (value !== undefined && typeof item[key] === "string" && !item[key].toLowerCase().includes(value.toLowerCase)) returnItem = null }) return returnItem }) - const sortedItems = () => { + const sortedItems = () => { const sortColumn = state.sort.column - if(!sortColumn) { + if (!sortColumn) { return searchItems } else { - return searchItems.sort((a,b) => { + return searchItems.sort((a, b) => { if (typeof a[sortColumn] === "string") return state.sort.direction === "asc" ? a[sortColumn]?.localeCompare(b[sortColumn]) : @@ -74,18 +76,18 @@ const useItemsSearch = (items) => { return state.sort.direction === "asc" ? a[sortColumn] - b[sortColumn] : b[sortColumn] - a[sortColumn] - }) + }) } } const pagedItems = sortedItems().filter((item, i) => { const pageSize = state.page * state.rowsPerPage - if((pageSize <= i && pageSize + state.rowsPerPage > i) || state.rowsPerPage < 0) + if ((pageSize <= i && pageSize + state.rowsPerPage > i) || state.rowsPerPage < 0) return item }) const handleSearchItems = (filters) => { - setState(prevState => ({...prevState, search: filters })) + setState(prevState => ({...prevState, search: filters})) } @@ -111,14 +113,18 @@ const useItemsSearch = (items) => { } const handleSort = (column, desc) => { - setState(prevState=> ({ ...prevState, sort: {column, - direction: prevState.sort.column === column - ? prevState.sort.direction === "desc" - ? "asc" - : "desc" - : desc - ? "desc" - : "asc"}})) + setState(prevState => ({ + ...prevState, sort: { + column, + direction: prevState.sort.column === column + ? prevState.sort.direction === "desc" + ? "asc" + : "desc" + : desc + ? "desc" + : "asc" + } + })) } const handleRowsPerPageChange = event => { @@ -150,25 +156,36 @@ const Page = () => { usePageView(); - useEffect(() => { + useEffect(() => { handleItemsGet(); - // eslint-disable-next-line react-hooks/exhaustive-deps - },[]); - + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const handleDiscover = () => { + const toastId = toastLoad('Discovering terms ...') + ontologyTermsApi.discoverTerms() + .then(res => { + toastSuccess(`${res.task_name} successfully started.`, toastId) + }) + .catch(err => toastError(`Discovering terms failed: ${err.message}.`, toastId)) + }; const handleItemsGet = () => { - sectionApi.getOntologyFiles() - .then(res => setState(res)) - .catch(err => console.error(err)); - } + sectionApi.getOntologyFiles() + .then(res => setState(res)) + .catch(err => console.error(err)); + } + const afterFileUpload = () => { + handleItemsGet() + handleDiscover() + } const handleItemGet = (name) => { - detailsDialog.handleOpen({load: true, fileName: name}) - sectionApi.getOntologyFile(name) - .then(res => detailsDialog.handleOpen({content: res.content, fileName: res.filename})) - .catch(err => console.log(err)); + detailsDialog.handleOpen({load: true, fileName: name}) + sectionApi.getOntologyFile(name) + .then(res => detailsDialog.handleOpen({content: res.content, fileName: res.filename})) + .catch(err => console.log(err)); } return ( @@ -250,10 +267,10 @@ const Page = () => { {detailsDialog.data?.fileName} @@ -261,13 +278,13 @@ const Page = () => { { detailsDialog.data?.load ? - - - : + + + : + lineProps={{style: {wordBreak: 'break-all', whiteSpace: 'pre-wrap'}}}> {detailsDialog.data?.content} } @@ -276,7 +293,7 @@ const Page = () => { { @@ -31,17 +30,6 @@ export const EditForm = (props) => { type: item.type ?? '', }; - const handleDiscover = () => { - const toastId = toastLoad('Discovering terms ...') - sectionApi.discoverTerms() - .then(res => { - toastSuccess(`${res.task_name} successfully started.`, toastId) - router.push({ - pathname: paths.app.ontology_terms.index, - }); - }) - .catch(err => toastError(`Discovering terms failed: ${err.message}.`, toastId)) - }; const formik = useFormik({ initialValues: initialValues, @@ -68,15 +56,7 @@ export const EditForm = (props) => { helpers.setSubmitting(false); toastSuccess(sectionApi.SECTION_ITEM_TITLE + ' ' + (itemctx.isNew ? "created" : "updated"), toastId); if (response) { - handleDiscover() - // if (itemctx.isNew) { - // router.push({ - // pathname: paths.app.ontology_terms.index, - // }); - // } else if (itemctx.isStateable) { - // itemctx.setState(response); - // } } } catch (err) { console.error(err);