From 8b8e1084324d9f0e739ab46b896aff47d45240f2 Mon Sep 17 00:00:00 2001
From: vikasg11 <vikasg@ebi.ac.uk>
Date: Wed, 13 Nov 2024 18:35:04 +0000
Subject: [PATCH] jbrowse page width fixed.

---
 .../organisms/GeneSearch/GeneSearchForm.tsx   | 179 +++++++++---------
 .../pages/GeneViewerPage.module.scss          |  30 ++-
 .../src/components/pages/GeneViewerPage.tsx   | 174 +++++++++--------
 3 files changed, 208 insertions(+), 175 deletions(-)

diff --git a/dataportal-app/src/components/organisms/GeneSearch/GeneSearchForm.tsx b/dataportal-app/src/components/organisms/GeneSearch/GeneSearchForm.tsx
index 60536d6..438a802 100644
--- a/dataportal-app/src/components/organisms/GeneSearch/GeneSearchForm.tsx
+++ b/dataportal-app/src/components/organisms/GeneSearch/GeneSearchForm.tsx
@@ -110,56 +110,54 @@ const GeneSearchForm: React.FC<GeneSearchFormProps> = ({
 
     // Fetch search results based on the query, selected species, page, sort field, and sort order
     const fetchSearchResults = useCallback(
-    async (page = 1, sortField = currentSortField, sortOrder = currentSortOrder) => {
-        const params = new URLSearchParams({
-            'query': query.trim() || '',
-            'page': String(page),
-            'per_page': String(pageSize),
-            'sortField': sortField,
-            'sortOrder': sortOrder,
-        });
-
-        // Ensure genomeFilter is an array of objects with id and name
-        const genomeFilter = selectedGenomes && selectedGenomes.length > 0
-            ? selectedGenomes.map((genome) => ({ id: genome.id, name: genome.name }))
-            : undefined;
-
-        // Use selectedSpecies directly if only one species is selected, or undefined otherwise
-        const speciesFilter = selectedSpecies && selectedSpecies.length === 1
-            ? selectedSpecies
-            : undefined;
-
-        try {
-            const response = await fetchGeneSearchResults(
-                query, page, pageSize, sortField, sortOrder, genomeFilter, speciesFilter
-            );
-
-            if (response && response.results) {
-                setResults(response.results);
-                setCurrentPage(response.page_number);
-                setTotalPages(response.num_pages);
-                setHasPrevious(response.has_previous);
-                setHasNext(response.has_next);
-            } else {
+        async (page = 1, sortField = currentSortField, sortOrder = currentSortOrder) => {
+            const params = new URLSearchParams({
+                'query': query.trim() || '',
+                'page': String(page),
+                'per_page': String(pageSize),
+                'sortField': sortField,
+                'sortOrder': sortOrder,
+            });
+
+            // Ensure genomeFilter is an array of objects with id and name
+            const genomeFilter = selectedGenomes && selectedGenomes.length > 0
+                ? selectedGenomes.map((genome) => ({id: genome.id, name: genome.name}))
+                : undefined;
+
+            // Use selectedSpecies directly if only one species is selected, or undefined otherwise
+            const speciesFilter = selectedSpecies && selectedSpecies.length === 1
+                ? selectedSpecies
+                : undefined;
+
+            try {
+                const response = await fetchGeneSearchResults(
+                    query, page, pageSize, sortField, sortOrder, genomeFilter, speciesFilter
+                );
+
+                if (response && response.results) {
+                    setResults(response.results);
+                    setCurrentPage(response.page_number);
+                    setTotalPages(response.num_pages);
+                    setHasPrevious(response.has_previous);
+                    setHasNext(response.has_next);
+                } else {
+                    setResults([]);
+                    setCurrentPage(1);
+                    setTotalPages(1);
+                    setHasPrevious(false);
+                    setHasNext(false);
+                }
+            } catch (error) {
+                console.error('Error fetching data:', error);
                 setResults([]);
                 setCurrentPage(1);
                 setTotalPages(1);
                 setHasPrevious(false);
                 setHasNext(false);
             }
-        } catch (error) {
-            console.error('Error fetching data:', error);
-            setResults([]);
-            setCurrentPage(1);
-            setTotalPages(1);
-            setHasPrevious(false);
-            setHasNext(false);
-        }
-    },
-    [query, selectedSpecies, selectedGenomes, currentSortField, currentSortOrder, pageSize]
-);
-
-
+        },
+        [query, selectedSpecies, selectedGenomes, currentSortField, currentSortOrder, pageSize]
+    );
 
 
     useEffect(() => {
@@ -205,61 +203,58 @@ const GeneSearchForm: React.FC<GeneSearchFormProps> = ({
     };
 
     return (
-        <section id="vf-tabs__section--1">
+        <section id="vf-tabs__section--2">
             <div>
                 <p/>
             </div>
-            <div className={`vf-grid__col--span-3 ${styles.vfGeneSection}`}>
-                <form onSubmit={handleSubmit}
-                      className="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
-                    <h2 className={`vf-section-header__subheading ${styles.vfGeneSubHeading}`}>Search Gene</h2>
-                    <div>
-                        <p/>
-                    </div>
-                    <GeneSearchInput
-                        query={query}
-                        onInputChange={handleInputChange}
-                        suggestions={suggestions}
-                        onSuggestionClick={handleSuggestionClick}
-                        onSuggestionsClear={() => setSuggestions([])}
+            <form onSubmit={handleSubmit}
+                  className="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
+                <h2 className={`vf-section-header__subheading ${styles.vfGeneSubHeading}`}>Search Gene</h2>
+                <div>
+                    <p/>
+                </div>
+                <GeneSearchInput
+                    query={query}
+                    onInputChange={handleInputChange}
+                    suggestions={suggestions}
+                    onSuggestionClick={handleSuggestionClick}
+                    onSuggestionsClear={() => setSuggestions([])}
+                />
+                <div>
+                    <p>&nbsp;</p>
+                </div>
+                <div className="vf-grid__col--span-3" id="results-table"
+                     style={{display: results.length > 0 ? 'block' : 'none'}}>
+                    <GeneResultsTable
+                        results={results}
+                        onSortClick={onSortClick}
+                        linkData={linkData}
+                        viewState={viewState}
                     />
+                    {/* Page size dropdown and pagination */}
+                    <div className={styles.paginationContainer}>
+                        <div className={styles.pageSizeDropdown}>
+                            <label htmlFor="pageSize">Page Size: </label>
+                            <select id="pageSize" value={pageSize} onChange={handlePageSizeChange}>
+                                <option value={10}>Show 10</option>
+                                <option value={20}>Show 20</option>
+                                <option value={50}>Show 50</option>
+                            </select>
+                        </div>
 
-
-                    <div>
-                        <p>&nbsp;</p>
+                        {totalPages > 1 && (
+                            <Pagination
+                                currentPage={currentPage}
+                                totalPages={totalPages}
+                                hasPrevious={hasPrevious}
+                                hasNext={hasNext}
+                                onPageClick={handlePageClick}
+                            />
+                        )}
                     </div>
-                    <div className="vf-grid__col--span-3" id="results-table"
-                         style={{display: results.length > 0 ? 'block' : 'none'}}>
-                        <GeneResultsTable
-                            results={results}
-                            onSortClick={onSortClick}
-                            linkData={linkData}
-                            viewState={viewState}
-                        />
-                        {/* Page size dropdown and pagination */}
-                        <div className={styles.paginationContainer}>
-                            <div className={styles.pageSizeDropdown}>
-                                <label htmlFor="pageSize">Page Size: </label>
-                                <select id="pageSize" value={pageSize} onChange={handlePageSizeChange}>
-                                    <option value={10}>Show 10</option>
-                                    <option value={20}>Show 20</option>
-                                    <option value={50}>Show 50</option>
-                                </select>
-                            </div>
+                </div>
+            </form>
 
-                            {totalPages > 1 && (
-                                <Pagination
-                                    currentPage={currentPage}
-                                    totalPages={totalPages}
-                                    hasPrevious={hasPrevious}
-                                    hasNext={hasNext}
-                                    onPageClick={handlePageClick}
-                                />
-                            )}
-                        </div>
-                    </div>
-                </form>
-            </div>
             <div>
                 <p>&nbsp;</p>
                 <p>&nbsp;</p>
diff --git a/dataportal-app/src/components/pages/GeneViewerPage.module.scss b/dataportal-app/src/components/pages/GeneViewerPage.module.scss
index bea28f1..3767a62 100644
--- a/dataportal-app/src/components/pages/GeneViewerPage.module.scss
+++ b/dataportal-app/src/components/pages/GeneViewerPage.module.scss
@@ -1,6 +1,34 @@
+.mainContainer {
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: column;
+}
+
+.vfContent {
+  width: 100% !important;
+  min-width: 800px;
+  float: left !important;
+  padding-right: 20px;
+  justify-content: normal;
+}
+
+.jbrowseViewer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    min-width: 800px;
+    margin: 0 auto;
+}
+
 .jbrowse-container {
   width: 100%;
-  height: 600px;
+  height: 100%;
+  overflow: hidden;
+  min-width: 800px;
 }
 
 .breadcrumbsItem {
diff --git a/dataportal-app/src/components/pages/GeneViewerPage.tsx b/dataportal-app/src/components/pages/GeneViewerPage.tsx
index 3420ab1..edb7e01 100644
--- a/dataportal-app/src/components/pages/GeneViewerPage.tsx
+++ b/dataportal-app/src/components/pages/GeneViewerPage.tsx
@@ -145,93 +145,103 @@ const GeneViewerPage: React.FC = () => {
     };
 
     return (
-        <div style={{padding: '20px'}}>
-            {/* Breadcrumb Section */}
-            <nav className="vf-breadcrumbs" aria-label="Breadcrumb">
-                <ul className="vf-breadcrumbs__list vf-list vf-list--inline">
-                    <li className={styles.breadcrumbsItem}>
-                        <a href="/" className="vf-breadcrumbs__link">Home</a>
-                    </li>
-                    <span className={styles.separator}> | </span>
-                    <li className={styles.breadcrumbsItem}>
-                        <b>Genome View</b>
-                    </li>
-                    <span className={styles.separator}> | </span>
-                    {genomeMeta ? (
-                        <li className={`${styles.breadcrumbsItem} ${styles.dropdown}`}>
-                            <a href="#" className="vf-breadcrumbs__link vf-dropdown__trigger">
-                                Related <span className={`${styles.icon} ${styles.iconDownTriangle}`}></span>
-                            </a>
-                            <ul className={styles.dropdownList}>
-                                <li className={styles.dropdownItem}>
-                                    <a href="/" className={styles.dropdownLink}>Other Strains
-                                        of {genomeMeta.species}</a>
-                                </li>
-                            </ul>
+        <div>
+            <div className={`vf-content ${styles.vfContent}`}>
+                <div style={{height: '20px'}}></div>
+            </div>
+            <div className={`vf-content ${styles.vfContent}`}>
+                <span style={{display: 'none'}}><p>
+                placeholder
+            </p></span>
+            </div>
+
+            <section className="vf-u-fullbleed">
+                {/* Breadcrumb Section */}
+                <nav className="vf-breadcrumbs" aria-label="Breadcrumb">
+                    <ul className="vf-breadcrumbs__list vf-list vf-list--inline">
+                        <li className={styles.breadcrumbsItem}>
+                            <a href="/" className="vf-breadcrumbs__link">Home</a>
                         </li>
-                    ) : (
-                        <p>Loading genome meta information...</p>)}
-                </ul>
-            </nav>
-
-            {/* Genome Metadata Section */}
-            <section style={{marginTop: '20px'}}>
-                {genomeMeta ? (
-                    <div className="genome-meta-info">
-                        <h2>{genomeMeta.species}: {genomeMeta.isolate_name}</h2>
-                        <p><strong>Assembly Name:&nbsp;</strong>
-                            <a href={genomeMeta.fasta_url} target="_blank"
-                               rel="noopener noreferrer">{genomeMeta.assembly_name}
-                            </a>
-                        </p>
-                        <p><strong>Annotations:&nbsp;</strong>
-                            <a href={genomeMeta.gff_url} target="_blank"
-                               rel="noopener noreferrer">{genomeMeta.gff_file}
-                            </a>
-                        </p>
-                        <p><strong>ENA Accession:&nbsp;</strong>
-                            <a
-                                href={
-                                    genomeMeta.assembly_accession
-                                        ? `${process.env.REACT_APP_ENA_BASE_URL}${genomeMeta.assembly_accession}`
-                                        : undefined
-                                }
-                                target="_blank"
-                                rel="noopener noreferrer">
-                                {genomeMeta.assembly_accession ? `XX000000${genomeMeta.assembly_accession}` : "Not Available"}
-                            </a>
-                        </p>
-                    </div>
-                ) : (
-                    <p>Loading genome meta information...</p>
-                )}
-            </section>
+                        <span className={styles.separator}> | </span>
+                        <li className={styles.breadcrumbsItem}>
+                            <b>Genome View</b>
+                        </li>
+                        <span className={styles.separator}> | </span>
+                        {genomeMeta ? (
+                            <li className={`${styles.breadcrumbsItem} ${styles.dropdown}`}>
+                                <a href="#" className="vf-breadcrumbs__link vf-dropdown__trigger">
+                                    Related <span className={`${styles.icon} ${styles.iconDownTriangle}`}></span>
+                                </a>
+                                <ul className={styles.dropdownList}>
+                                    <li className={styles.dropdownItem}>
+                                        <a href="/" className={styles.dropdownLink}>Other Strains
+                                            of {genomeMeta.species}</a>
+                                    </li>
+                                </ul>
+                            </li>
+                        ) : (
+                            <p>Loading genome meta information...</p>)}
+                    </ul>
+                </nav>
 
-            {/* Gene Search Section */}
-            <div style={{paddingLeft: '5px', paddingTop: '20px'}}>
-                <section style={{marginTop: '20px'}}>
-                    <GeneSearchForm
-                        searchQuery={geneSearchQuery}
-                        onSearchQueryChange={e => setGeneSearchQuery(e.target.value)}
-                        onSearchSubmit={handleGeneSearch}
-                        selectedGenomes={genomeId ? [{id: parseInt(genomeId, 10), name: ''}] : []}
-                        results={geneResults}
-                        onSortClick={(sortField) => console.log('Sort by:', sortField)}
-                        currentPage={geneCurrentPage}
-                        totalPages={totalPages}
-                        handlePageClick={(page) => setGeneCurrentPage(page)}
-                        linkData={linkData}
-                        viewState={localViewState}
-                    />
+                {/* Genome Metadata Section */}
+                <section>
+                    {genomeMeta ? (
+                        <div className="genome-meta-info">
+                            <h2>{genomeMeta.species}: {genomeMeta.isolate_name}</h2>
+                            <p><strong>Assembly Name:&nbsp;</strong>
+                                <a href={genomeMeta.fasta_url} target="_blank"
+                                   rel="noopener noreferrer">{genomeMeta.assembly_name}
+                                </a>
+                            </p>
+                            <p><strong>Annotations:&nbsp;</strong>
+                                <a href={genomeMeta.gff_url} target="_blank"
+                                   rel="noopener noreferrer">{genomeMeta.gff_file}
+                                </a>
+                            </p>
+                            <p><strong>ENA Accession:&nbsp;</strong>
+                                <a
+                                    href={
+                                        genomeMeta.assembly_accession
+                                            ? `${process.env.REACT_APP_ENA_BASE_URL}${genomeMeta.assembly_accession}`
+                                            : undefined
+                                    }
+                                    target="_blank"
+                                    rel="noopener noreferrer">
+                                    {genomeMeta.assembly_accession ? `XX000000${genomeMeta.assembly_accession}` : "Not Available"}
+                                </a>
+                            </p>
+                        </div>
+                    ) : (
+                        <p>Loading genome meta information...</p>
+                    )}
                 </section>
-            </div>
 
-            {/* JBrowse Component Section */}
-            <section style={{marginTop: '20px'}}>
-                <div className={styles.sidePanel}>
+
+                {/* Gene Search Section */}
+                <div style={{paddingLeft: '5px', paddingTop: '20px'}}>
+                    <section style={{marginTop: '20px'}}>
+                        <GeneSearchForm
+                            searchQuery={geneSearchQuery}
+                            onSearchQueryChange={e => setGeneSearchQuery(e.target.value)}
+                            onSearchSubmit={handleGeneSearch}
+                            selectedGenomes={genomeId ? [{id: parseInt(genomeId, 10), name: ''}] : []}
+                            results={geneResults}
+                            onSortClick={(sortField) => console.log('Sort by:', sortField)}
+                            currentPage={geneCurrentPage}
+                            totalPages={totalPages}
+                            handlePageClick={(page) => setGeneCurrentPage(page)}
+                            linkData={linkData}
+                            viewState={localViewState}
+                        />
+                    </section>
+                </div>
+
+                {/* JBrowse Component Section */}
+                <div>
                     {localViewState ? (
-                        <div className={styles.geneViewerPage} style={{width: '100%'}}>
-                            <div className={styles.jbrowseContainer}>
+                        <div className={styles.jbrowseViewer}>
+                            <div className={styles.jbrowseContainer} style={{width: '100%', height: '100%'}}>
                                 <JBrowseApp viewState={localViewState}/>
                             </div>
                         </div>