Merge pull request #158 from IN-CORE/157-semantic-viewer-semantics-ne…

…ed-to-show-description 157 semantic viewer semantics need to show description
IN-CORE · Nov 2, 2023 · 43a0894 · 43a0894
2 parents 528ed51 + c1e76f4
commit 43a0894
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+
+## [Unreleased]
+
+### Changed
+- Missing Filters title for both Data viewer and Semantics Viewer [#156](https://github.com/IN-CORE/incore-ui/issues/156)
+- Semantic viewer needs to show description [#157](https://github.com/IN-CORE/incore-ui/issues/157)
+
+
 ## [1.8.0] - 2023-10-11
 
 ### Changed

diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -429,7 +429,7 @@ class App extends Component {
 						fetch("/SemanticViewer");
 					}}
 				>
-					Semantics Viewer
+					Dataset Type Viewer
 				</MenuItem>
 			</Menu>
 		);

diff --git a/src/components/DataViewer.jsx b/src/components/DataViewer.jsx
@@ -757,6 +757,7 @@ class DataViewer extends Component {
 							{/*filters*/}
 							<Grid item lg={8} sm={8} xl={8} xs={12}>
 								<Paper variant="outlined" className={classes.filter}>
+									<Typography variant="h6">Filters</Typography>
 									<div className={classes.selectDiv}>
 										<Datatype
 											selectedDataType={this.state.selectedDataType}

diff --git a/src/components/SemanticViewer.jsx b/src/components/SemanticViewer.jsx
@@ -46,6 +46,7 @@ import ErrorMessage from "./children/ErrorMessage";
 import Confirmation from "./children/Confirmation";
 import LoadingOverlay from "react-loading-overlay";
 import semantics from "../reducers/semantics";
+import {exportJson} from "../utils/common";
 
 const cookies = new Cookies();
 const redundantProp = ["deleted", "privileges", "spaces"];
@@ -408,6 +409,7 @@ class SemanticViewer extends Component {
 					<TableCell component="th" scope="row">
 						{field["name"]}
 					</TableCell>
+					<TableCell align="right">{field["dc:description"]}</TableCell>
 					<TableCell align="right">{field["titles"]}</TableCell>
 					<TableCell align="right">{field["datatype"]}</TableCell>
 					<TableCell align="right">{field["qudt:unit"]}</TableCell>
@@ -424,6 +426,7 @@ class SemanticViewer extends Component {
 					<TableHead>
 						<TableRow>
 							<TableCell className={classes.headerCell}>Name</TableCell>
+							<TableCell className={classes.headerCell} align="right">Description</TableCell>
 							<TableCell className={classes.headerCell} align="right">Titles</TableCell>
 							<TableCell className={classes.headerCell} align="right">Datatype</TableCell>
 							<TableCell className={classes.headerCell} align="right">Unit</TableCell>
@@ -470,6 +473,7 @@ class SemanticViewer extends Component {
 					<Grid container spacing={4}>
 						<Grid item lg={6} sm={6} xl={6} xs={12}>
 							<Paper variant="outlined" className={classes.filter}>
+								<Typography variant="h6">Filters</Typography>
 								<div className={classes.selectDiv}>
 									<Space
 										selectedSpace={this.state.selectedSpace}
@@ -551,25 +555,57 @@ class SemanticViewer extends Component {
 										<Typography variant="subtitle1">Semantic Schema</Typography>
 									</div>
 									<br/>
-									<Grid container spacing={2} lg={8} md={8} xl={8} xs={12}>
-										<Grid item>
-											<Button
-												color="primary"
-												variant="contained"
-												className={classes.inlineButtons}
-												size="small"
-												onClick={this.downloadTemplate}
-											>
-												Download Template
-											</Button>
+									<Grid container spacing={2}>
+										<Grid item xs={12}>
+											<div className={classes.metadata}>
+												<Button
+													color="primary"
+													variant="contained"
+													className={classes.inlineButtons}
+													size="small"
+													onClick={this.downloadTemplate}
+												>
+													Download Template
+												</Button>
+												<Button
+													color="primary"
+													variant="contained"
+													className={classes.inlineButtons}
+													size="small"
+													onClick={() => {
+														exportJson(this.state.selectedSemanticType);
+													}}
+												>
+													Download Definition
+												</Button>
+												<CopyToClipboard text={this.state.selectedSemanticType["url"]}>
+													<Button
+														color="secondary"
+														variant="contained"
+														className={classes.inlineButtons}
+														size="small"
+													>
+														Copy Type
+													</Button>
+												</CopyToClipboard>
+												{/*<Button*/}
+												{/*	color="secondary"*/}
+												{/*	variant="contained"*/}
+												{/*	className={classes.inlineButtons}*/}
+												{/*	size="small"*/}
+												{/*	onClick={this.onClickDelete}*/}
+												{/*>*/}
+												{/*	DELETE*/}
+												{/*</Button>*/}
+											</div>
 										</Grid>
 										<Grid item xs={12}>
 											<Box  sx={{mx: 1}}>
 												<Typography variant="subtitle2"><strong>{this.state.selectedSemanticType['dc:title']}</strong></Typography>
 											</Box>
 										</Grid>
 										{
-											this.state.selectedSemanticType["dc:description"] === "" ? 
+											this.state.selectedSemanticType["dc:description"] === "" ?
 												null :
 												<Grid item xs={12}>
 													<Box  sx={{mx: 1}}>

diff --git a/src/components/children/Datatype.jsx b/src/components/children/Datatype.jsx
@@ -34,7 +34,7 @@ class Datatype extends React.Component {
 		if (this.props.datatypes.length > 0) {
 			return (
 				<div>
-					<InputLabel>Dataset Type</InputLabel>
+					<InputLabel>Semantic Dataset Type</InputLabel>
 					<Select value={this.props.selectedDataType} onChange={this.props.handleDatatypeSelection}
 						className={classes.select}>
 						<MenuItem key="All" value="All" className={classes.denseStyle}>All</MenuItem>