260 show extractor metadata (#274)

* fixing uvicorn, this got overwritten with local (i think by me)

* new tab, placeholder

* gets metadata with listeners
nothing shows yet

* adding separate component for each listener metadata entry, currently does not display anything

* adding component for contents and listener agent
very basic, only works for non-nested metadata

* working on nested metadata, only displays top level correctly

* json displays properly, need to put each metadata in a box and make metadata collapsible

* toggle. can hide or view metadata now

* formatting. pipenv run black app

* adding new tab to dataset for extractor metadata

* changing tab order, tab names, and setting metadata json open by default

* metadata from extractors appears in solid boxes. change in font for listener agent.

* changing tab order, names for dataset

* Added card to extracted metadata entries and fixed grid around them.

Co-authored-by: Luigi Marini <[email protected]>

Author: tcnichol

.run/uvicorn.run.xml

@@ -21,4 +21,4 @@
     <option name="INPUT_FILE" value="" />
     <method v="2" />
   </configuration>
-</component>
+</component>

frontend/src/components/datasets/Dataset.tsx

@@ -13,6 +13,7 @@ import FilesTable from "../files/FilesTable";
 import config from "../../app.config";
 import {DatasetIn, MetadataIn} from "../../openapi/v2";
 import {DisplayMetadata} from "../metadata/DisplayMetadata";
+import {DisplayListenerMetadata} from "../metadata/DisplayListenerMetadata";
 import {EditMetadata} from "../metadata/EditMetadata";
 import {
 	deleteDatasetMetadata as deleteDatasetMetadataAction,
@@ -185,9 +186,12 @@ export const Dataset = (): JSX.Element => {
 					<Tabs value={selectedTabIndex} onChange={handleTabChange} aria-label="dataset tabs">
 						<Tab icon={<InsertDriveFile/>} iconPosition="start" sx={tab} label="Files" {...a11yProps(0)} />
 						<Tab icon={<FormatListBulleted/>} iconPosition="start" sx={tab}
-							 label="Metadata" {...a11yProps(1)} disabled={false}/>
+							 label="User Metadata" {...a11yProps(1)} disabled={false}/>
 						 <Tab icon={<AssessmentIcon/>} iconPosition="start" sx={tab}
-							 label="Extractors" {...a11yProps(2)} disabled={false}/>
+							 label="Extracted Metadata" {...a11yProps(2)} disabled={false}/>
+						<Tab icon={<AssessmentIcon/>} iconPosition="start" sx={tab}
+							 label="Extractors" {...a11yProps(3)} disabled={false}/>
+
 					</Tabs>
 					<TabPanel value={selectedTabIndex} index={0}>
 						<FilesTable datasetId={datasetId} folderId={folderId}/>
@@ -225,11 +229,15 @@ export const Dataset = (): JSX.Element => {
 						}
 					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={2}>
+						<DisplayListenerMetadata updateMetadata={updateDatasetMetadata}
+													 deleteMetadata={deleteDatasetMetadata}
+													 resourceType="dataset" resourceId={datasetId}/>
+					</TabPanel>
+					<TabPanel value={selectedTabIndex} index={3}>
 						<Listeners
 							datasetId={datasetId}
 						/>
 					</TabPanel>
-					<TabPanel value={selectedTabIndex} index={3}/>
 					<TabPanel value={selectedTabIndex} index={4}/>
 				</Grid>
 				<Grid item>

frontend/src/components/files/File.tsx

@@ -13,6 +13,7 @@ import {MainBreadcrumbs} from "../navigation/BreadCrumb";
 import {ActionModal} from "../dialog/ActionModal";
 import {FileVersionHistory} from "../versions/FileVersionHistory";
 import {DisplayMetadata} from "../metadata/DisplayMetadata";
+import {DisplayListenerMetadata} from "../metadata/DisplayListenerMetadata";
 import {
 	deleteFileMetadata as deleteFileMetadataAction,
 	fetchFileMetadata,
@@ -132,6 +133,8 @@ export const File = (): JSX.Element => {
 
 	const setMetadata = (metadata: any) => {
 		// TODO wrap this in to a function
+		console.log('metadata in file component');
+		console.log(metadata);
 		setMetadataRequestForms(prevState => {
 			// merge the contents field; e.g. lat lon
 			if (metadata.definition in prevState) {
@@ -228,8 +231,9 @@ export const File = (): JSX.Element => {
 					<Tabs value={selectedTabIndex} onChange={handleTabChange} aria-label="file tabs">
 						{/*<Tab label="Previews" {...a11yProps(0)} />*/}
 						<Tab label="Version History" {...a11yProps(0)} />
-						<Tab label="Metadata" {...a11yProps(1)} disabled={false}/>
-						<Tab label="Extractors" {...a11yProps(2)} disabled={false}/>
+						<Tab label="User Metadata" {...a11yProps(1)} disabled={false}/>
+						<Tab label="Extracted Metadata" {...a11yProps(2)} disabled={false}/>
+						<Tab label="Extractors" {...a11yProps(3)} disabled={false}/>
 					</Tabs>
 					{/*Preview Tab*/}
 					{/*<TabPanel value={selectedTabIndex} index={0}>*/}
@@ -283,11 +287,16 @@ export const File = (): JSX.Element => {
 						}
 					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={2}>
+						<DisplayListenerMetadata updateMetadata={updateFileMetadata}
+													 deleteMetadata={deleteFileMetadata}
+													 resourceType="file" resourceId={fileId}/>
+					</TabPanel>
+					<TabPanel value={selectedTabIndex} index={3}>
 						<Listeners fileId={fileId}
 								   datasetId={datasetId}
 						/>
 					</TabPanel>
-					<TabPanel value={selectedTabIndex} index={3}>
+					<TabPanel value={selectedTabIndex} index={4}>
 						Comments
 					</TabPanel>
 				</Grid>

frontend/src/components/metadata/DisplayListenerMetadata.tsx

@@ -0,0 +1,80 @@
+import React, {useEffect, useState} from "react";
+import {Box, Grid, Typography} from "@mui/material";
+import {metadataConfig} from "../../metadata.config";
+import {useSelector, useDispatch} from "react-redux";
+import {RootState} from "../../types/data";
+import {fetchDatasetMetadata, fetchFileMetadata, fetchMetadataDefinitions} from "../../actions/metadata";
+import {Agent} from "./Agent";
+import {MetadataDeleteButton} from "./widgets/MetadataDeleteButton";
+import {ListenerMetadataEntry} from "../metadata/ListenerMetadataEntry";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+
+type MetadataType = {
+	updateMetadata: any,
+	deleteMetadata: any,
+	resourceType: string | undefined,
+	resourceId: string | undefined,
+}
+
+/*
+This is the interface displayed already created metadata and allow eidts
+Uses only the list of metadata
+*/
+export const DisplayListenerMetadata = (props: MetadataType) => {
+
+	const {updateMetadata, deleteMetadata, resourceType, resourceId} = props;
+
+	const dispatch = useDispatch();
+
+	const getMetadatDefinitions = (name: string | null, skip: number, limit: number) => dispatch(fetchMetadataDefinitions(name, skip, limit));
+	const metadataDefinitionList = useSelector((state: RootState) => state.metadata.metadataDefinitionList);
+	const listDatasetMetadata = (datasetId: string | undefined) => dispatch(fetchDatasetMetadata(datasetId));
+	const listFileMetadata = (fileId: string | undefined) => dispatch(fetchFileMetadata(fileId));
+	const datasetMetadataList = useSelector((state: RootState) => state.metadata.datasetMetadataList);
+	const fileMetadataList = useSelector((state: RootState) => state.metadata.fileMetadataList);
+
+	useEffect(() => {
+		getMetadatDefinitions(null, 0, 100);
+	}, []);
+
+	// complete metadata list with both definition and values
+	useEffect(() => {
+		if (resourceType === "dataset") {
+			listDatasetMetadata(resourceId);
+		} else if (resourceType === "file") {
+			listFileMetadata(resourceId);
+		}
+	}, [resourceType, resourceId]);
+
+	return (
+		<>
+			{
+				(() => {
+					let metadataList = [];
+					if (resourceType === "dataset") metadataList = datasetMetadataList;
+					else if (resourceType === "file") metadataList = fileMetadataList;
+					let listenerMetadataList = [];
+					let listenerMetadataContent = [];
+
+					return (<Grid container spacing={2}>
+						{metadataList.map((metadata, idx) => {
+						if (metadata.agent.listener !== null) {
+							return (<Grid item xs={12}><Card key={idx}>
+								<CardContent>
+									<ListenerMetadataEntry agent={metadata.agent}
+														   contents={metadata.contents}
+														   context={metadata.context}
+														   context_url={metadata.context_url}
+														   created={metadata.created}
+									/>
+								</CardContent>
+							</Card></Grid>);
+						}
+						})}
+					</Grid>);
+			})()
+			}
+		</>
+	)
+}

frontend/src/components/metadata/ListenerAgent.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import {Box, Typography} from "@mui/material";
+import {theme} from "../../theme";
+import {parseDate} from "../../utils/common";
+
+const textStyle = {
+	fontWeight: "normal",
+	fontSize: "16x",
+	color: theme.palette.primary,
+};
+
+
+export const ListenerAgent = (props) => {
+	const {created, agent} = props;
+	const id = `agent-${agent.id}`;
+	const listener = agent.listener;
+
+	return (
+		<>
+			<Box key={id}>
+				<Typography sx={textStyle}>Listener name: {agent.listener.name}</Typography>
+				<Typography sx={textStyle}>Version: {agent.listener.version}</Typography>
+				<Typography sx={textStyle}>Created at: {parseDate(created)}</Typography>
+				<Typography sx={textStyle}>Created by: {agent.creator.first_name} {agent.creator.last_name}</Typography>
+			</Box>
+		</>
+	)
+}

frontend/src/components/metadata/ListenerContents.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {Box, Typography} from "@mui/material";
+import {theme} from "../../theme";
+import {parseDate} from "../../utils/common";
+
+const textStyle = {
+	fontWeight: "normal",
+	fontSize: "16x",
+	color: theme.palette.primary,
+};
+
+type ListenerContentsEntry = {
+	contents: any,
+}
+
+
+
+export const ListenerContents = (props: ListenerContentsEntry) => {
+	const {contents} = props;
+
+	return <div><pre>{JSON.stringify(contents, null, 2)}</pre></div>
+}

frontend/src/components/metadata/ListenerMetadataEntry.tsx

@@ -0,0 +1,75 @@
+import React, {useEffect, useState} from "react";
+import {Box, Grid, Typography, Divider, Button} from "@mui/material";
+import {metadataConfig} from "../../metadata.config";
+import {useSelector, useDispatch} from "react-redux";
+import {RootState} from "../../types/data";
+import {fetchDatasetMetadata, fetchFileMetadata, fetchMetadataDefinitions} from "../../actions/metadata";
+import {ListenerAgent} from "./ListenerAgent";
+import {ListenerContents} from "./ListenerContents";
+import {MetadataDeleteButton} from "./widgets/MetadataDeleteButton";
+
+
+type ListenerMetadata = {
+	agent: any,
+	contents: any,
+	context: any,
+	context_url: any,
+	created: string,
+}
+
+/*
+This is the interface displayed already created metadata and allow eidts
+Uses only the list of metadata
+*/
+export const ListenerMetadataEntry = (props: ListenerMetadata) => {
+
+	const {agent, contents, context, context_url, created} = props;
+
+	const dispatch = useDispatch();
+
+	const [isOpened, setIsOpened] = useState(true);
+	const buttonTextClosed = "View Metadata";
+	const buttonTextOpened = "Hide Metadata";
+	const [buttonText, setButtonText] = useState(buttonTextOpened);
+
+	function toggle() {
+    	setIsOpened(wasOpened => !wasOpened);
+    	if (buttonText == buttonTextClosed){
+    		setButtonText(buttonTextOpened)
+		} else {
+    		setButtonText(buttonTextClosed)
+		}
+
+  	}
+
+
+	return (
+		<>
+			{
+				(() => {
+					return <Grid container spacing={2}>
+						<Grid item xs={11} sm={11} md={11} lg={11} xl={11}>
+							<div>
+								<ListenerAgent created={created} agent={agent} />
+							</div>
+							<Divider></Divider>
+								<Button
+								  onClick={toggle}
+								>
+									{buttonText}
+							</Button>
+							{isOpened && (
+								<ListenerContents
+									contents={contents}/>
+     						 )}
+
+
+						</Grid>
+					</Grid>
+
+
+				})()
+			}
+		</>
+	)
+}