nested explore page routes

api_routes/routes.js

@@ -10,7 +10,7 @@ const services = require('./services');
 const external_apis = require('./external');
 
 const samples = JSON.parse(fs.readFileSync(path.join(__dirname, './sample-query-cache.json')));
-const drugDiseasePairs = JSON.parse(fs.readFileSync(path.join(__dirname, '../data/drug-disease-mappings-subset.json'))).slice(0, 500);
+const drugDiseasePairs = JSON.parse(fs.readFileSync(path.join(__dirname, '../data/drug-disease-mappings-subset.json'))).slice(0, 1000);
 
 router.use('/', external_apis);
 

src/App.jsx

@@ -11,7 +11,7 @@ import Guide from '~/pages/Guide';
 import Tutorial from '~/pages/Tutorial';
 import TermsofService from '~/pages/TermsofService';
 import QueryBuilder from '~/pages/queryBuilder/QueryBuilder';
-import Explore from '~/pages/Explore';
+import Explore from '~/pages/explore/Explore';
 import Answer from '~/pages/answer/Answer';
 
 import QuestionList from '~/pages/questionList/QuestionList';

src/pages/Explore.jsx → src/pages/explore/DrugDiseasePairs.jsx

@@ -4,9 +4,9 @@ import React from 'react';
 import {
   Grid, Row, Col,
 } from 'react-bootstrap';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import QueryBuilderContext from '~/context/queryBuilder';
-import useQueryBuilder from './queryBuilder/useQueryBuilder';
+import useQueryBuilder from '../queryBuilder/useQueryBuilder';
 
 const useStyles = makeStyles({
   hover: {
@@ -25,7 +25,7 @@ const fetchPairs = async () => {
   return res.json();
 };
 
-export default function Explore() {
+export default function DrugDiseasePairs() {
   const [pairs, setPairs] = React.useState([]);
   const [isLoading, setIsLoading] = React.useState(true);
 
@@ -94,6 +94,7 @@ export default function Explore() {
     <Grid style={{ marginBottom: '50px', marginTop: '50px' }}>
       <Row>
         <Col md={12}>
+          <small><Link to="/explore">← View all datasets</Link></small>
           <h1>Drug - Disease Pairs</h1>
           <p style={{ fontSize: '1.6rem' }}>
             These drug-disease pairs were generated using a machine learning model to align with the nodes
@@ -102,6 +103,11 @@ export default function Explore() {
             can serve as a starting point for a new query by hovering over a pair and clicking &ldquo;Start a Query&rdquo;.
           </p>
 
+          <p>
+            Scores with an asterisk and underline means the drug-disease pair is already known. The score is still
+            predicted using the trained model.
+          </p>
+
           <hr />
 
           {isLoading ? 'Loading...' : (
@@ -132,7 +138,15 @@ export default function Explore() {
                         <Chip>{pair.drug.id}</Chip>
                       </td>
                       <td>
-                        {pair.score.toFixed(6)}{pair.known ? <em>*</em> : null}
+                        {
+                          pair.known ? (
+                            <span style={{ textDecoration: 'underline' }}>
+                              {pair.score.toFixed(6)}*
+                            </span>
+                          ) : (
+                            pair.score.toFixed(6)
+                          )
+                        }
                       </td>
                       <Button
                         variant="contained"

src/pages/explore/Explore.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+  Grid, Row, Col,
+} from 'react-bootstrap';
+import {
+  Switch, Route, Link, useRouteMatch,
+} from 'react-router-dom';
+import DrugChemicalPairs from './DrugDiseasePairs';
+
+export default function Explore() {
+  const match = useRouteMatch();
+
+  return (
+    <Switch>
+      <Route path={`${match.path}/drug-chemical`}>
+        <DrugChemicalPairs />
+      </Route>
+      <Route path={match.path}>
+        <Index />
+      </Route>
+    </Switch>
+  );
+}
+
+function Index() {
+  const match = useRouteMatch();
+
+  return (
+    <Grid style={{ marginBottom: '50px', marginTop: '50px' }}>
+      <Row>
+        <Col md={12}>
+          <h1>Explore</h1>
+          <p style={{ fontSize: '1.6rem' }}>
+            Click a link below to view a curated dataset that can be further explored in the ROBOKOP query builder or answer explorer.
+          </p>
+
+          <hr />
+
+          <Link to={`${match.url}/drug-chemical`} style={{ fontSize: '1.6rem' }}>
+            Drug to Disease Pairs
+          </Link>
+          <p style={{ fontSize: '1.6rem', marginTop: '0.5rem' }}>
+            These drug-disease pairs were generated using a machine learning model to align with the nodes
+            in the ROBOKOP knowledge graph. They highlight potential associations between various drugs and
+            a broad range of diseases, suggesting possible avenues for further research. These connections
+            can serve as a starting point for a new query by hovering over a pair and clicking &ldquo;Start a Query&rdquo;.
+          </p>
+        </Col>
+      </Row>
+    </Grid>
+  );
+}