Merge pull request #50 from mboudet/dev_version

Update UI & fix search

Author: mboudet

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         node-version: 15
     - name: npm install

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html)
 
+## [0.4.10] 2023-11-23
+
+### Added
+
+- Added 'disable_header' config option, to hide GeneNotebook links and display on the landing page
+
+### Fixed
+
+- Fixed test CI
+- Fixed gene list not re-rendering properly when searching
+- Fixed search block on the bottom of the landing page
+
 ## [0.4.9] 2023-11-17
 
 ### Fixed

config.json.template

@@ -3,6 +3,7 @@
     "disable_blast": false,
     "disable_user_login": false,
     "disable_user_registration": false,
+    "disable_header": false,
     "blast_link": "",
     "expression_unit": "My unit",
     "externalSearch": false,

imports/ui/genetable/GeneTableBody.jsx

@@ -236,7 +236,7 @@ function GeneTableBody({
   return (
     <tbody className="genetable-body">
       {genes.map((gene) => (
-        <GeneTableRow key={gene.ID} gene={gene} {...props} />
+        <GeneTableRow key={gene._id._str} gene={gene} {...props} />
       ))}
     </tbody>
   );

imports/ui/landingpage/LandingPage.jsx

@@ -4,6 +4,7 @@ import { withTracker } from 'meteor/react-meteor-data';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import SearchBar from '/imports/ui/main/SearchBar.jsx';
 
 import getQueryCount from '/imports/api/methods/getQueryCount.js';
 import { genomeCollection } from '/imports/api/genomes/genomeCollection.js';
@@ -14,9 +15,9 @@ import {
 
 import './landingpage.scss';
 
-function GeneNumber({ _id: genomeId }) {
+function GeneNumber({ _id: genomeId, annotationName: annotationName }) {
   const [geneNumber, setGeneNumber] = useState('...');
-  getQueryCount.call({ query: { genomeId } }, (err, res) => {
+  getQueryCount.call({ query: { genomeId, annotationName } }, (err, res) => {
     setGeneNumber(res);
   });
   return (
@@ -31,32 +32,37 @@ function Stats({ genomes = [] }) {
         <table className="table is-hoverable is-fullwidth has-background-white-bis">
           <thead>
             <tr>
-              <th className="has-text-weight-bold">Name</th>
-              <th className="has-text-weight-bold">Organism</th>
+              <th className="has-text-weight-bold">Genome</th>
+              <th className="has-text-weight-bold">Annotation</th>
               <th className="has-text-weight-bold has-text-centered">Status</th>
               <th className="has-text-weight-bold has-text-right">&#8470; genes</th>
             </tr>
           </thead>
           <tbody>
             {
             genomes.map(({
-              _id, name, organism, isPublic,
-            }) => (
-              <tr key={_id} className="list-group-item d-flex justify-content-between">
-                <td>{name}</td>
-                <td>{ organism }</td>
-                <td className="has-text-centered">
-                  {
-                  isPublic
-                    ? <span className="tag is-success is-light">Public</span>
-                    : <span className="tag is-warning is-light">Private</span>
-                  }
-                </td>
-                <td className="has-text-right">
-                  <GeneNumber _id={_id} />
-                </td>
-              </tr>
-            ))
+              _id, name, isPublic, annotationTrack
+            }) => {
+              if (typeof annotationTrack === 'undefined'){
+                return []
+              }
+              return annotationTrack.map((annotation) => (
+                  <tr key={annotation._id} className="list-group-item d-flex justify-content-between">
+                    <td>{name}</td>
+                    <td>{ annotation.name }</td>
+                    <td className="has-text-centered">
+                      {
+                      isPublic
+                        ? <span className="tag is-success is-light">Public</span>
+                        : <span className="tag is-warning is-light">Private</span>
+                      }
+                    </td>
+                    <td className="has-text-right">
+                      <GeneNumber _id={_id} annotationName={annotation.name} />
+                    </td>
+                  </tr>
+              ))
+            })
           }
           </tbody>
         </table>
@@ -84,7 +90,7 @@ function statsDataTracker() {
 }
 
 function hasNoGenomes({ genomes }) {
-  return typeof genomes === 'undefined' || genomes.length === 0;
+  return typeof genomes === 'undefined' || genomes.length === 0 || !genomes.some((genome) => typeof genome.annotationTrack !== 'undefined' && genome.annotationTrack.length > 0);;
 }
 
 function NoGenomes() {
@@ -93,21 +99,21 @@ function NoGenomes() {
       ? (
         <article className="message is-info" role="alert">
           <div className="message-body">
-            Currently no genomes are available
+            Currently no annotated genomes are available
           </div>
         </article>
       )
       : (
         <article className="message is-info" role="alert">
           <div className="message-body">
-            No public genomes are available.&nbsp;
+            No public annotated genomes are available.&nbsp;
             {! Meteor.settings.public.disable_user_login && (
               <>
               <Link to="/login">
                 Sign in
               </Link>
               &nbsp;to access private data.
-              </> 
+              </>
             )}
           </div>
         </article>
@@ -139,14 +145,18 @@ function LandingPage() {
       </a>
     )
   }
- 
+
 
   return (
     <>
       <section className="hero is-small is-light is-bold">
         <div className="hero-body">
+          { !Meteor.settings.public.disable_header && (
+          <>
           <h1 className="title"> GeneNoteBook </h1>
           <h2 className="subtitle"> A collaborative notebook for genes and genomes </h2>
+          </>
+          )}
           <div className="box">
             <p className="font-weight-light">
               Through this site you can browse and query data for the following genomes:
@@ -157,7 +167,7 @@ function LandingPage() {
           !Meteor.userId()
           && (
           <div className="buttons are-small" role="group">
-            {! (Meteor.settings.public.disable_user_login === true || Meteor.settings.public.disable_user_registration === true) && ( 
+            {! (Meteor.settings.public.disable_user_login === true || Meteor.settings.public.disable_user_registration === true) && (
             <Link to="/register" className="button is-success">
               <span className="icon-user-add" aria-hidden="true" />
               &nbsp;Create account
@@ -169,10 +179,12 @@ function LandingPage() {
               &nbsp;Sign in
             </Link>
             )}
+            { !Meteor.settings.public.disable_header && (
             <a href="http://genenotebook.github.io/" className="button is-dark is-outlined">
               <span className="icon-github" aria-hidden="true" />
               &nbsp;About GeneNotebook
             </a>
+            )}
           </div>
           )
         }
@@ -233,15 +245,9 @@ function LandingPage() {
                     </div>
                   </div>
                   <div className="content">
-                    Search genes by their attributes, such as GO-terms,
-                    protein domains or manual annotations.
-                  </div>
-                  <div className="content">
-                    <Link to={{ path: '/', state: { highLightSearch: true } }} className="button is-warning is-light is-fullwidth">
-                      <span className="icon-search" aria-hidden="true" />
-                &nbsp;Search
-                    </Link>
+                    Search genes by their attributes, such as GO-terms, or protein domains.
                   </div>
+                  <SearchBar isBlock={true}/>
                 </div>
               </div>
             </div>
@@ -269,7 +275,7 @@ function LandingPage() {
                   <div className="content">
                     BLAST your protein or DNA sequence to genome annotations.
                   </div>
-                  <div className="content"> 
+                  <div className="content">
                     {blastLink}
                   </div>
                 </div>

imports/ui/main/SearchBar.jsx

@@ -51,6 +51,7 @@ function SearchBar({
   searchString: initialSearchString,
   attributes,
   highLightSearch,
+  isBlock
 }) {
   const [redirect, setRedirect] = useState(false);
   const [searchString, setSearchString] = useState(initialSearchString);
@@ -128,9 +129,13 @@ function SearchBar({
   let label = Meteor.settings.public.externalSearch ? "Select attributes to display" : "Select attributes to search"
   let display_attr = Meteor.settings.public.redirectSearch ? false : true
 
+  const className = isBlock ? "" : "navbar-item is-pulled-right"
+  const size = isBlock ? "" : "is-small"
+  const expanded = isBlock ? "is-expanded" : ""
+
   return (
     <form
-      className="navbar-item is-pulled-right"
+      className={className}
       role="search"
       onSubmit={submit}
     >
@@ -139,7 +144,7 @@ function SearchBar({
         <div className="control has-dropdown">
           <div className="dropdown is-hoverable">
             <div className="dropdown-trigger">
-              <button type="button" className="button is-small">
+              <button type="button" className={"button " + size }>
                 <span className="icon">
                   <span className="icon-down" />
                 </span>
@@ -170,10 +175,10 @@ function SearchBar({
           </div>
         </div>
         }
-        <div className="control">
+        <div className={"control " + expanded}>
           <input
             type="text"
-            className="input is-small"
+            className={"input " + size }
             placeholder="Search genes"
             value={searchString}
             onChange={(event) => setSearchString(event.target.value)}
@@ -182,7 +187,7 @@ function SearchBar({
           />
         </div>
         <div className="control">
-          <button type="submit" className="button is-small" disabled={invalidForm()}>
+          <button type="submit" className={"button " + size } disabled={invalidForm()}>
             <span className="icon-search" />
           </button>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "genoboo",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "repository": "https://github.com/gogepp/genoboo",
   "description": "A portable website for browsing and querying genome sequences and annotations. Forked from genenotebook",
   "license": "AGPL-3.0",