Fix/89 (#117)

EmilioTR · mvanbrab · web-flow · commit 1b7952961ce4 · 2024-05-07T16:12:36.000+02:00
Adding queryGroups. Fixes #89. --------- Co-authored-by: Martin Vanbrabant <martin.vanbrabant@ugent.be>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - "Clear query cache and refresh" button (#105)
 - Source verification effective code (#77)
 - Query can now also be based on index file (#91)
+- Added collapsible query groups to the menu on the left (#89)
 
 ### Changed
 
diff --git a/README.md b/README.md
@@ -91,13 +91,21 @@ The configuration file follows a simple structure.
   "queryFolder": "The base location of the queries, all query locations will start from this folder (relative to public folder.)",
   "httpProxy": "The http proxy through which the requests will be rerouted. When left empty, the Comunica query engine will handle it. This is useful when CORS headers are not set (correctly) on the queried source.",
   "introductionText": "The text that the app shows on the dashboard, which the app also shows when you first open it.",
+  "queryGroups" : [
+    {
+      "id": "A unique ID for the query group",
+      "name": "A name for the query group",
+      "icon": "The key to the icon for the query group. This is optional and a default menu icon will be used when left empty."
+    }
+  ],
   "queries": [
     {
+      "id": "A unique ID for the query. This ID appears in the URL of the displayed result. Queries are ordered in the menu according to ascending ID.",
+      "queryGroupId": "ID of the query group too which this query belongs. If not given, the query is displayed outside existing groups.",
       "queryLocation": "Path to the query location, relative to 'queryFolder'",
       "name": "A name for the query",
       "description": "Description of the query",
-      "id": "A unique ID for the query",
-      "icon": "The key to the icon for the query . This is optional and a default menu icon will be used when left empty.",
+      "icon": "The key to the icon for the query. This is optional and a default menu icon will be used when left empty.",
       "comunicaContext": {
         "sources": "Initial list of sources over which the query should be executed",
         "useProxy": "True or false, whether the query should be executed through the proxy or not. This field is optional and defaults to false.",
diff --git a/cypress/e2e/aggregating-query.cy.js b/cypress/e2e/aggregating-query.cy.js
@@ -1,7 +1,7 @@
 describe("Aggregating query", () => {
   it("AVG() function - see https://github.com/SolidLabResearch/generic-data-viewer-react-admin/issues/70", () => {
     cy.visit("/");
-
+    cy.contains("General examples").click();
     cy.contains("Average value").click();
     cy.contains("Finished in:");
     cy.get('.column-average').find('span').contains("75");
diff --git a/cypress/e2e/bad-cors.cy.js b/cypress/e2e/bad-cors.cy.js
@@ -1,7 +1,7 @@
 describe("Bad CORS", () => {
   it('Querying resource with "bad" cors header, though a proxy should work', () => {
     cy.visit("/");
-
+    cy.contains("General examples").click();
     cy.contains("My idols").click();
     cy.get(".MuiSnackbarContent-message").should("not.exist");
   });
diff --git a/cypress/e2e/column-header.cy.js b/cypress/e2e/column-header.cy.js
@@ -1,8 +1,8 @@
 describe("Column header", () => {
   it("Variables link to ontology", () => {
     cy.visit("/");
-
-    cy.contains("My favourite musicians").click();
+    cy.contains("General examples").click();
+    cy.contains("A query about musicians").click();
     cy.contains("Finished in:");
     cy.get('a[href="http://schema.org/name"]');
   })
diff --git a/cypress/e2e/dashboard.cy.js b/cypress/e2e/dashboard.cy.js
@@ -5,7 +5,7 @@ describe("Dashboard", () => {
 
   it("Custom icon per query is displayed", () => {
     cy.visit("/");
-
+    cy.contains("General examples").click();
     cy.get('[data-testid="PhotoIcon"]').should("exist");
     cy.get('[data-testid="BrushIcon"]').should("exist");
   })
diff --git a/cypress/e2e/fetch-status.cy.js b/cypress/e2e/fetch-status.cy.js
@@ -3,9 +3,10 @@ describe("Fetch Status", () => {
     it("Fetch data with no authenticated user", () => {
 
         cy.visit("/");
-
+        
         // Go immediately to query
-        cy.contains("A book query testing sources with and without authentication required").click();  
+        cy.contains("For testing only").click();
+        cy.contains("A query on a secret and a public list of books").click();  
         
         // Check if the public and restricted sources appear
         cy.get('[aria-label="Sources info"]').click();
@@ -49,7 +50,8 @@ describe("Fetch Status", () => {
         cy.url().should("eq", "http://localhost:5173/");
 
         // Go to the mixed book query
-        cy.contains("A book query testing sources with and without authentication required").click();
+        cy.contains("For testing only").click();
+        cy.contains("A query on a secret and a public list of books").click();
 
         // Check if the public and restricted sources appear
         cy.get('[aria-label="Sources info"]').click();
@@ -75,7 +77,8 @@ describe("Fetch Status", () => {
         cy.visit("/");
 
         // Go immediately to query
-        cy.contains("My favourite musicians").click();  
+        cy.contains("General examples").click();
+        cy.contains("A query about musicians").click();  
         
         // Check if the good and bad sources appear
         cy.get('[aria-label="Sources info"]').click();
diff --git a/cypress/e2e/lenient.cy.js b/cypress/e2e/lenient.cy.js
@@ -1,8 +1,8 @@
 describe("Lenient mode", () => {
   it("When one source throws an error, the results of other sources are still shown", () => {
     cy.visit("/");
-
-    cy.contains("My favourite musicians").click();
+    cy.contains("General examples").click();
+    cy.contains("A query about musicians").click();
     cy.contains("Finished in:");
     cy.contains("Ludwig van Beethoven");
   });
diff --git a/cypress/e2e/log-in.cy.js b/cypress/e2e/log-in.cy.js
@@ -65,7 +65,8 @@ describe("Log in", () => {
 
     cy.url().should("eq", "http://localhost:5173/");
 
-    cy.contains("A list of my favorite books").click();
+    cy.contains("General examples").click();
+    cy.contains("A secret list of my favorite books").click();
     cy.contains("It Ends With Us");
 
     cy.get('[aria-label="Profile"]').click();
@@ -76,15 +77,15 @@ describe("Log in", () => {
 
   it("Do not log in and query on private data unauthenticated", () => {
     cy.visit("/");
-
-    cy.contains("A list of my favorite books").click();
+    cy.contains("General examples").click();
+    cy.contains("A secret list of my favorite books").click();
     cy.contains("It Ends With Us").should("not.exist");
   });
 
   it("Do not log in and query public data", () => {
     cy.visit("/");
-
-    cy.contains("My wish list").click();
+    cy.contains("General examples").click();
+    cy.contains("A public list of books I'd love to own").click();
     cy.contains("Too Late");
   });
 });
diff --git a/cypress/e2e/no-duplicates.cy.js b/cypress/e2e/no-duplicates.cy.js
@@ -1,7 +1,7 @@
 describe("No duplicates", () => {
   it("When sources contain identical triples, duplicates should not be counted in a SELECT DISTINCT query", () => {
     cy.visit("/");
-
+    cy.contains("For testing only").click();
     cy.contains("A test on DISTINCT LIMIT OFFSET").click();
     cy.contains("1-10 of 36");
     cy.contains("http://www.example.com/data#s00").should("not.exist");
diff --git a/cypress/e2e/sources-from-indexfile.cy.js b/cypress/e2e/sources-from-indexfile.cy.js
@@ -4,7 +4,8 @@ describe("Sources from index file", () => {
         cy.visit("/");
 
         // Navigate to correct query
-        cy.contains("Components and their materials, with sources from only the index file").click();
+        cy.contains("General examples").click();
+        cy.contains("Sources from an index file").click();
 
         // Check that it finished
         cy.contains("Finished in:");
@@ -22,6 +23,7 @@ describe("Sources from index file", () => {
         cy.visit("/");
 
         // Navigate to correct query
+        cy.contains("For testing only").click();
         cy.contains("Components and their materials, with sources from index file also containing an unauthorized source").click();
 
         // Check that the query finished
@@ -40,6 +42,7 @@ describe("Sources from index file", () => {
         cy.visit("/");
 
         // Navigate to correct query
+        cy.contains("For testing only").click();
         cy.contains("Components and their materials, with mixed sources from comunicaContext and index file").click();
 
         // Check that the query finished
diff --git a/cypress/e2e/sources-info.cy.js b/cypress/e2e/sources-info.cy.js
@@ -1,8 +1,8 @@
 describe("Sources info", () => {
   it("Fetch status on fetch failure", () => {
     cy.visit("/");
-
-    cy.contains("My favourite musicians").click();
+    cy.contains("General examples").click();
+    cy.contains("A query about musicians").click();
     cy.contains("Finished in:");
     cy.get('[aria-label="Sources info"]').click();
 
@@ -11,8 +11,8 @@ describe("Sources info", () => {
 
   it("Fetch status on fetch success", () => {
     cy.visit("/");
-
-    cy.contains("My wish list").click();
+    cy.contains("General examples").click();
+    cy.contains("A public list of books I'd love to own").click();
     cy.contains("Finished in:");
     cy.get('[aria-label="Sources info"]').click();
 
@@ -21,7 +21,7 @@ describe("Sources info", () => {
 
   it("Fetch status on cached source - see https://github.com/SolidLabResearch/generic-data-viewer-react-admin/issues/59", () => {
     cy.visit("/");
-
+    cy.contains("Project related examples").click();
     cy.contains("Components").click();
     cy.contains("Finished in:");
     cy.get('[aria-label="Sources info"]').click();
@@ -38,8 +38,8 @@ describe("Sources info", () => {
 
   it("Authentication not required for query on public data", () => {
     cy.visit("/");
-
-    cy.contains("My wish list").click();
+    cy.contains("General examples").click();
+    cy.contains("A public list of books I'd love to own").click();
     cy.contains("Finished in:");
     cy.get('[aria-label="Sources info"]').click();
 
@@ -63,7 +63,8 @@ describe("Sources info", () => {
 
     cy.url().should("eq", "http://localhost:5173/");
 
-    cy.contains("A list of my favorite books").click();
+    cy.contains("General examples").click();
+    cy.contains("A secret list of my favorite books").click();
     cy.contains("Finished in:");
     cy.get('[aria-label="Sources info"]').click();
 
@@ -72,8 +73,8 @@ describe("Sources info", () => {
 
   it("Authentication uncertain for query on not existing source", () => {
     cy.visit("/");
-
-    cy.contains("My favourite musicians").click();
+    cy.contains("General examples").click();
+    cy.contains("A query about musicians").click();
     cy.contains("Finished in:");
     cy.get('[aria-label="Sources info"]').click();
 
diff --git a/cypress/e2e/templated-query.cy.js b/cypress/e2e/templated-query.cy.js
@@ -6,7 +6,8 @@ describe("Templated query", () => {
   it("With 1 variable", () => {
 
     cy.visit("/");
-    cy.contains("Templated query about my favourite musicians").click();
+    cy.contains("General examples").click();
+    cy.contains("A templated query about musicians").click();
 
     // Fill in the query, select Baroque (7 existant artists -> perfect for this test)
     cy.get('form').within(() => {
@@ -40,8 +41,8 @@ describe("Templated query", () => {
 
   it("With 2 variables", () => {
     cy.visit("/");
-
-    cy.contains("Templated query #2 about my favourite musicians").click();
+    cy.contains("For testing only").click();
+    cy.contains("A templated query about musicians, two variables").click();
 
     cy.get('form').within(() => {
       cy.get('#genre').click();
@@ -59,7 +60,8 @@ describe("Templated query", () => {
 
   it("Able to change variables after making a templated query", () => {
     cy.visit("/");
-    cy.contains("Templated query about my favourite musicians").click();
+    cy.contains("General examples").click();
+    cy.contains("A templated query about musicians").click();
 
     // Fill in the query
     cy.get('form').within(() => {
@@ -86,7 +88,8 @@ describe("Templated query", () => {
 
   it("Correct message displayed when no resulting data", () => {
     cy.visit("/");
-    cy.contains("Templated query #2 about my favourite musicians").click();
+    cy.contains("For testing only").click();
+    cy.contains("A templated query about musicians, two variables").click();
 
     // Chose a genre
     cy.get('form').within(() => {
@@ -109,7 +112,8 @@ describe("Templated query", () => {
 
   it("Able to change variables after having no results", () => {
     cy.visit("/");
-    cy.contains("Templated query #2 about my favourite musicians").click();
+    cy.contains("For testing only").click();
+    cy.contains("A templated query about musicians, two variables").click();
 
     // Chose a genre
     cy.get('form').within(() => {
diff --git a/cypress/e2e/type-representation.cy.js b/cypress/e2e/type-representation.cy.js
@@ -2,7 +2,8 @@ describe("Type representation", () => {
   it("Querying variable ending on _img should return an image as result", () => {
     cy.visit("/");
 
-    cy.contains("A test for images").click();
+    cy.contains("General examples").click();
+    cy.contains("Some images").click();
     cy.contains("Finished in:");
     cy.get("td").find("img");
   });
diff --git a/cypress/e2e/verify-source.cy.js b/cypress/e2e/verify-source.cy.js
@@ -1,8 +1,9 @@
 describe("Verify source", () => {
   it("Verification button exists and returns correct result", () => {
     cy.visit("/");
-
-    cy.contains("Components, with source verification").click();
+    
+    cy.contains("General examples").click();
+    cy.contains("Source verification").click();
 
     cy.get('[aria-label="Sources info"]').click();
 
diff --git a/initial-pod-data/favourite-musicians$.jsonld b/initial-pod-data/favourite-musicians$.jsonld
@@ -1,7 +1,7 @@
 {
   "@context": "http://schema.org",
   "@type": "ItemList",
-  "name": "My Favourite Musicians",
+  "name": "A query about musicians",
   "ItemListElement": [
     {
       "@type": "Person",
diff --git a/src/App.css b/src/App.css
@@ -4,4 +4,19 @@
 
 .RaSidebar-docked > .MuiPaper-root > .RaSidebar-fixed{
     overflow-x: visible!important; /*The important tag is necessary as react-admin will try to override it*/
-}
+}
+ 
+
+/* 
+    Temporary solution to make the small sidebar invisible
+    Not such a good practise
+    */
+
+ .RaMenu-closed {
+    display: none; 
+    visibility: hidden;
+    overflow: hidden;
+  } 
+
+
+  
diff --git a/src/App.jsx b/src/App.jsx
@@ -51,6 +51,7 @@ function App() {
       }
     });
   });
+
   return (
     <Admin
       queryClient={queryClient}
@@ -68,7 +69,7 @@ function App() {
           <Resource
             key={query.id}
             name={query.id}
-            options={{ label: query.name, descr: query.description }}
+            options={{label: query.name, descr: query.description, queryGroupId : query.queryGroupId}}
             icon={IconProvider[query.icon]}
             list={TemplatedListResultTable}
           />
diff --git a/src/IconProvider/IconProvider.js b/src/IconProvider/IconProvider.js
@@ -3,11 +3,17 @@ import MenuBookIcon from "@mui/icons-material/MenuBook";
 import MusicNoteIcon from '@mui/icons-material/MusicNote';
 import PhotoIcon from '@mui/icons-material/Photo';
 import FunctionsIcon from '@mui/icons-material/Functions';
+import ListAltIcon from '@mui/icons-material/ListAlt';
+import FactoryIcon from '@mui/icons-material/Factory';
+import BugReportIcon from '@mui/icons-material/BugReport';
 
 export default {
   BrushIcon,
   MenuBookIcon,
   MusicNoteIcon,
   PhotoIcon,
-  FunctionsIcon
+  FunctionsIcon,
+  ListAltIcon,
+  FactoryIcon,
+  BugReportIcon
 };
diff --git a/src/components/InteractionLayout/SelectionMenu/SelectionMenu.jsx b/src/components/InteractionLayout/SelectionMenu/SelectionMenu.jsx
diff --git a/src/config.json b/src/config.json
