Tutorial steps tweaked

nohup.out

@@ -0,0 +1,31 @@
+
+> [email protected] start
+> react-scripts --max_old_space_size=4096 start
+
+(node:1117914) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
+(Use `node --trace-deprecation ...` to show where the warning was created)
+(node:1117914) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
+Starting the development server...
+
+Compiled successfully!
+
+You can now view intuition in the browser.
+
+  http://localhost:3000
+
+Note that the development build is not optimized.
+To create a production build, use npm run build.
+
+webpack compiled successfully
+Compiling...
+Compiled successfully!
+webpack compiled successfully
+Compiling...
+Compiled successfully!
+webpack compiled successfully
+Compiling...
+Compiled successfully!
+webpack compiled successfully
+Compiling...
+Compiled successfully!
+webpack compiled successfully

package.json

@@ -1,6 +1,7 @@
 {
   "name": "intuition",
   "version": "0.1.0",
+  "homepage": "https://semantics.inf.um.es/intuition",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",

src/components/BindingsModal/bindingsModal.test.js

@@ -4,7 +4,6 @@ import userEvent from '@testing-library/user-event';
 import BindingsModal from './bindingsModal';
 
 // Mock data
-
 jest.mock('react-dom', () => ({
     ...jest.requireActual('react-dom'),
     createPortal: (element, target) => element,

src/components/Navbar/navbar.js

@@ -23,7 +23,7 @@ export default function Navbar() {
                         <CustomLink to="/" onClick={toggleMenu}>Home</CustomLink>
                     </li>
                     <li className={NavbarStyles.listItem}>
-                        <CustomLink to="/intuition" onClick={toggleMenu}>Queries</CustomLink>
+                        <CustomLink to="/queries" onClick={toggleMenu}>Queries</CustomLink>
                     </li>
                     <li className={NavbarStyles.listItem}>
                         <CustomLink to="/about" onClick={toggleMenu}>About</CustomLink>

src/config.js

@@ -1,5 +1,5 @@
 const config = {
-    backendUrl: 'http://localhost:8888',
+    backendUrl: 'https://semantics.inf.um.es:8888',
     //endpointUrl: 'https://dbpedia.org/sparql',
     //endpointUrl: 'http://ssb4.nt.ntnu.no:23032/sparql',
     //endpointUrl: 'https://biogateway.eu/sparql-endpoint/',

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { HashRouter, Routes, Route } from "react-router-dom";
 import './index.css'; // TODO this is bad practice. Move css to each component
 import Navbar from "./components/Navbar/navbar";
 import ErrorBoundary from "./components/ErrorBoundary/errorBoundary";
@@ -16,7 +16,7 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <ErrorBoundary>
     <div id="modal"></div>
-    <BrowserRouter>
+    <HashRouter>
       <Navbar />
       <link rel="icon" href={favicon} />
       <Routes>
@@ -25,14 +25,14 @@ root.render(
           element={<Main />}
         ></Route>
         <Route
-          path="/intuition"
+          path="/queries"
           element={<Queries />}
         ></Route>
         <Route
           path="/about"
           element={<About />}
         ></Route>
       </Routes>
-    </BrowserRouter>
+    </HashRouter>
   </ErrorBoundary>
 );

src/pages/main.js

@@ -110,10 +110,10 @@ function Main() {
 
   const tutorialSteps = [
     'No need to know querying languages to explore the RDF.',
-    'Select the first node or subject, in this case, Gene, in the Variable browser.',
-    'Select the second node or object, in this case, Protein, in the Variable browser.',
-    'Select in the Properties selectors the one that relates both, in this case, "encodes".',
-    'Select in "Nodes shown" in the Query builder the data we want to show in the output.',
+    'Select the first entity (subject node), in this case, Gene, in the Variable browser.',
+    'Select the second entity (object node), in this case, Protein, in the Variable browser.',
+    'Select the relation between both entities in the Properties selectors, in this case, "encodes".',
+    'Select in "Nodes shown" the data you want to show in the output.',
     'Click on "Query" to launch the query.',
     'Click on "Export as" to download the data. Click on "Export query" to save the query.'
   ];
@@ -144,10 +144,10 @@ function Main() {
             <div className={MainStyles.textContainer}>
               <h2 className={MainStyles.centeredHeading}>Introduction</h2>
               <p className={MainStyles.introText}>
-                INTUITION is a web application for user-friendly SPARQL query building. It analyses an accessible endpoint, BioGateway, and allows building queries graphically by representing nodes (entities) and edges (properties).
+                INTUITION is a web application for user-friendly SPARQL query building. It analyses the knowledge network of an accessible endpoint, BioGateway, and allows building biological queries graphically by representing biological entities (nodes) related through properties (edges).
               </p>
               <span className={MainStyles.lesserText}>
-                RDF knowledge graphs represent entities through uniform resource identifiers (URIs), and information through triples or statements that represent a directional relationship between two entities, similar to a sentence: {"<"}subject{">"} {"<"}predicate{">"} {"<"}object{">"}. For example: {"<"}Gene{">"} {"<"}encodes{">"} {"<"}Protein{">"}. The SPARQL query language also uses this pattern to build queries. These queries can be complex by linking multiple triples and including operations. A tutorial for building SPARQL queries in BioGateway (BGW) is available in this <a href="https://github.com/juan-mulero/cisreg" target="_blank" rel="noopener noreferrer">repository</a>.
+                RDF knowledge graphs represent entities through Uniform Resource Identifiers (URIs), and information through triples or statements that represent a directional relationship between two entities, similar to a sentence: {"<"}subject{">"} {"<"}predicate{">"} {"<"}object{">"}. For example: {"<"}Gene{">"} {"<"}encodes{">"} {"<"}Protein{">"}. The SPARQL query language also uses this pattern to build queries. These queries can be complex by linking multiple triples and including operations. A tutorial for building SPARQL queries in BioGateway (BGW) is available in this <a href="https://github.com/juan-mulero/cisreg" target="_blank" rel="noopener noreferrer">repository</a>.
               </span>
             </div>
           </div>
@@ -242,27 +242,35 @@ function Main() {
         <div className={MainStyles.contentContainer}>
           <div className={MainStyles.textImageContainer}>
             <div className={MainStyles.textContainer}>
-              <h2 className={MainStyles.centeredHeading}>Filters and Other Clauses</h2>
+              <h2 className={MainStyles.centeredHeading}>Data filtering and other possible operations</h2>
               <span className={MainStyles.introText}>
-                Each entity's attributes can also be filtered through the 'Data properties' modal, in the Property Selector.
+                Linking two biological entities or variables by their relation (object property) is the simplest filtering. However, any biological entity can also be filtered by its characteristics or attributes (data properties). For example, the gene name.
               </span>
             </div>
             <OverlappingImages images={[{ src: images[5], alt: "Figure 6" }, { src: images[6], alt: "Figure 7" }]} />
           </div>
           <span className={MainStyles.introText}>
-            INTUITION offers various clauses like DISTINCT and COUNT to refine your queries. You can easily apply these clauses and filters through the interface to achieve more precise results.
+	   Clicking on "data properties" we can filter these attributes. If the value is a string we can use the operator {"'='"} to indicate an exact string, or the operator {"'⊆'"} to indicate a substring contained in the string. If the value is numeric we can use the operators {"'='"}, {"'>'"}, {"'≥'"}, {"'<'"}, {"'≤'"}.
+	  </span>
+	  <span className={MainStyles.introText}>
+	   INTUITION also permits the assignment of one or more values to a specific variable. For example, we can query cis regulatory modules identified in two tissues of interest. To do this, in the "Property Selector", multiple values can be defined introducing each element in the value stack. The input values for filtering must be URIs.
+	  </span>
+          <LandingImage imageSrc={require('../resources/images/tutorial/NewValues.png')} maintainAspectRatio={true} alt="Values" addDarkBorder={true} />
+	  <br/>
+	  <br/>
+          <span className={MainStyles.introText}>
+	   The output table shows the biological entities consulted. Since the user has the freedom to choose which entities want to include in the output ("Nodes shown" button), the result can include duplicate entities. The Distinct button, activated by default, removes these duplicates. The Count button allows you to count the results obtained.
           </span>
+
           {images[4] && <LandingImage imageSrc={images[4]} maintainAspectRatio={true} alt="Figure 5" addDarkBorder={true} />}
-          <div className={MainStyles.textImageContainer}>
-            {/* Load Values.png before the VALUES text */}
-            <LandingImage imageSrc={require('../resources/images/tutorial/Values.png')} maintainAspectRatio={true} alt="Values" addDarkBorder={true} />
-            <div className={MainStyles.textContainer}>
-              <span className={MainStyles.introText}>
-                In the Property Selector, VALUES statements can be defined introducing each element of the value pile. The input values for filtering must be URIs.
-              </span>
-            </div>
-          </div>
+	 <div className={MainStyles.imageContainer}>
+          <div className={MainStyles.textContainer}>
+           <span className={MainStyles.introText}>
+           </span>
+         </div>
+         </div>
         </div>
+
         {/* Additional Features Section */}
         <div className={MainStyles.contentContainer}>
           <div className={MainStyles.textImageContainer}>
@@ -279,9 +287,9 @@ function Main() {
         </div>
         {/* UNION Clause Section */}
         <div className={MainStyles.contentContainer}>
-          <h2 className={MainStyles.centeredHeading}>UNION Clause</h2>
+          <h2 className={MainStyles.centeredHeading}>Union of queries</h2>
           <span className={MainStyles.introText}>
-            INTUITION also allows the use of the UNION clause. UNION merges subqueries through common variables in both queries. We illustrate its use through a use case. For example, we retrieve the OMIM entities that contain the string "breast cancer" as a name or synonym. To do that, follow the steps outlined below:
+            INTUITION also allows to merge subqueries that contain common variables in both queries. We illustrate its use through a use case. For example, we retrieve the OMIM entities that contain the string "breast cancer" as a name or synonym. To do that, follow the steps outlined below:
           </span>
           <div className={MainStyles.textImageContainerUnion}>
             <div className={MainStyles.imageContainerUnion}>
@@ -342,7 +350,7 @@ function Main() {
             <div className={MainStyles.textContainer}>
               <h2 className={MainStyles.centeredHeading}>Use Cases</h2>
               <span className={MainStyles.introText}>
-                The following Use Cases were developed in the paper "Analysis of the landscape of human enhancer sequences in biological databases". The corresponding queries are attached for reproducibility and as examples of use.
+                The following Use Cases were developed in the paper "Analysis of the landscape of human enhancer sequences in biological databases". The corresponding queries are attached for reproducibility and as examples of use. We recommend their consultation for a deeper understanding of the concepts introduced. Some more examples can be found <a href="https://github.com/juan-mulero/cisreg/blob/107278c55e9024dda16f8fb9e6d69e690613ba1a/INTUITION_Tutorial.pdf" target="_blank" rel="noopener noreferrer">here</a>.
                 <ul className={MainStyles.linkList}>
                   <LandingDownloadLink fileName="UC1.zip" label="Try Use Case 1" />
                   <LandingDownloadLink fileName="UC2.zip" label="Try Use Case 2" />
@@ -354,7 +362,7 @@ function Main() {
         </div>
         {/* Get Started Button */}
         <div className={MainStyles.buttonContainer}>
-          <Link to={"/intuition"}>
+          <Link to={"/queries"}>
             <button className={MainStyles.big_button}>Get Started</button>
           </Link>
         </div>