jbrowse page width fixed.

EBI-Metagenomics · Nov 13, 2024 · 8b8e108 · 8b8e108
1 parent 398bfcd
commit 8b8e108
Show file tree

Hide file tree

Showing 3 changed files with 208 additions and 175 deletions.
diff --git 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
@@ -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 {