Merge pull request #98 from SolidLabResearch/fix/41

Fix/41

CHANGELOG.md

@@ -7,14 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-### Added
+### Added<<<<<<< fix/41
 - Added 'Unauthorized' to the fetch status (#90)
+- Query title above the result table (#41)
 
 ### Changed
 - On empty query result, show clear message (#86)
 
 ### Fixed
 - Fixed pagination bug in templated queries (#80)
+- Fixed title display inside the selection menu when hovering, does not flow over table anymore (#41)
 
 ### Removed
 

src/components/InteractionLayout/SelectionMenu/SelectionMenu.jsx

@@ -37,8 +37,10 @@ const menuItemTheme = createTheme({
             verticalAlign: "middle",
           },
           "&:hover": {
+            display: "inline-flex",
             overflow: "visible",
-            minWidth: "fit-content"
+            whiteSpace: "normal" ,
+            minWidth: "fit-content",
           }
         },
       },

src/components/ListResultTable/QueryResultList/QueryResultList.jsx

@@ -1,19 +1,20 @@
 import { Component, useEffect, useState } from "react";
-import { Datagrid, ListView, Title, useListContext } from "react-admin";
+import { Datagrid, ListView, Title, useListContext, useResourceDefinition } from "react-admin";
 import ActionBar from "../../ActionBar/ActionBar";
 import GenericField from "../../../representationProvider/GenericField";
 import { Term } from "sparqljs";
 import config from "../../../config";
 import TableHeader from "./TableHeader/TableHeader";
 import Button from '@mui/material/Button';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
-import { SvgIcon, Box } from "@mui/material";
+import { SvgIcon, Box, Typography } from "@mui/material";
 
 /**
  * @param {object} props - the props passed down to the component
  * @returns {Component} custom ListViewer as defined by react-admin containing the results of the query with each variable its generic field. 
  */
 function QueryResultList(props) {
+  const QueryTitle = useResourceDefinition().options.label;
   const { data } = useListContext(props);
   const {changeVariables, submitted} = props;
   const [values, setValues] = useState(undefined);
@@ -28,8 +29,9 @@ function QueryResultList(props) {
   return (
     <>
       <Title title={config.title} />
-      {submitted && <Aside changeVariables={changeVariables}/> /*  Adding button to make a new query - top left corner */ } 
 
+      {submitted && <Aside changeVariables={changeVariables}/> /*  Adding button to make a new query - top left corner */ } 
+      <Typography fontSize={"2rem"} mt={2} > {QueryTitle} </Typography>
       {values ?(
           <ListView title=" " actions={<ActionBar />} {...props} >
             <Datagrid header={<TableHeader config={config}/>} bulkActionButtons={false}>