From fa48718d22f229f45dd9f321f389d1225d1c0462 Mon Sep 17 00:00:00 2001 From: Pedro Assis Date: Mon, 26 Jul 2021 17:11:53 -0400 Subject: [PATCH] for demo only --- src/encoded/region_search.py | 7 + .../static/components/region_search.js | 208 +++++++++++++----- .../static/scss/encoded/modules/_search.scss | 1 + 3 files changed, 156 insertions(+), 60 deletions(-) diff --git a/src/encoded/region_search.py b/src/encoded/region_search.py index aabe3883174..40e94b12466 100644 --- a/src/encoded/region_search.py +++ b/src/encoded/region_search.py @@ -354,9 +354,16 @@ def region_search(context, request): used_filters['files.uuid'] = file_uuids query['aggs'] = set_facets(_FACETS, used_filters, principals, ['Experiment']) schemas = (types[item_type].schema for item_type in ['Experiment']) + + ######################### DO NOT MERGE THIS + from elasticsearch import Elasticsearch + es = Elasticsearch(hosts=['34.208.231.246'], port=9201) ### IP FROM ENCODE DEMO + ########################################### + es_results = es.search( body=query, index='experiment', doc_type='experiment', size=size, request_timeout=60 ) + result['@graph'] = list(format_results(request, es_results['hits']['hits'])) result['total'] = total = es_results['hits']['total'] result['facets'] = format_facets(es_results, _FACETS, used_filters, schemas, total, principals) diff --git a/src/encoded/static/components/region_search.js b/src/encoded/static/components/region_search.js index 6b32a8f3413..64994d64a38 100644 --- a/src/encoded/static/components/region_search.js +++ b/src/encoded/static/components/region_search.js @@ -1,12 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import url from 'url'; -import { Panel, PanelBody } from '../libs/ui/panel'; +import { Panel, PanelBody, TabPanel } from '../libs/ui/panel'; +import GenomeBrowser from './genome_browser'; +import * as globals from './globals'; +import getSeriesData from './series_search.js'; import { FacetList, Listing } from './search'; +import { ASSEMBLY_DETAILS, BrowserSelector } from './vis_defines'; +import { + SearchBatchDownloadController, + BatchDownloadActuator, +} from './batch_download'; +import { svgIcon } from '../libs/svg-icons'; +import QueryString from '../libs/query_string'; import { FetchedData, Param } from './fetched'; -import * as globals from './globals'; -import { BrowserSelector } from './vis_defines'; - const regionGenomes = [ { value: 'GRCh37', display: 'hg19' }, @@ -15,7 +22,6 @@ const regionGenomes = [ { value: 'GRCm38', display: 'mm10' }, ]; - const AutocompleteBox = (props) => { const terms = props.auto['@graph']; // List of matching terms from server const { handleClick } = props; @@ -195,15 +201,15 @@ class AdvSearch extends React.Component { } render() { - const { context } = this.props; + const context = this.props; const id = url.parse(this.context.location_href, true); const region = id.query.region || ''; if (this.state.genome === '') { let assembly = regionGenomes[0].value; - if (context.assembly) { + if (this.props.assembly) { assembly = regionGenomes.find((el) => ( - context.assembly === el.value || context.assembly === el.display + this.props.assembly === el.value || this.props.assembly === el.display )).value; } this.setState({ genome: assembly }); @@ -256,20 +262,60 @@ AdvSearch.contextTypes = { location_href: PropTypes.string, }; +// Default assembly for each organism +const defaultAssemblyByOrganism = { + 'Homo sapiens': 'GRCh38', + 'Mus musculus': 'mm10', +}; -// Maximum number of selected items that can be visualized. -const VISUALIZE_LIMIT = 100; - - -class RegionSearch extends React.Component { - constructor() { - super(); - - // Bind this to non-React methods. - this.onFilter = this.onFilter.bind(this); - } - - onFilter(e) { +// The encyclopedia page displays a table of results corresponding to a selected annotation type +const Encyclopedia = (props, context) => { + const defaultAssembly = 'GRCh38'; + const defaultFileDownload = 'all'; + const defaultVisualization = 'List View'; + const visualizationOptions = ['List View', 'Genome Browser']; + const encyclopediaVersion = 'ENCODE v5'; + const searchBase = url.parse(context.location_href).search || ''; + + const [selectedVisualization, setSelectedVisualization] = React.useState(defaultVisualization); + const [selectedAssembly, setAssembly] = React.useState(defaultAssembly); + const [assemblyList, setAssemblyList] = React.useState([defaultAssembly]); + + var browser_files = []; + + const results = props.context['@graph']; + results.forEach((res) => { + res['files'].forEach((file) => { + if (file['preferred_default'] && (file['file_format'] == 'bigBed' || file['file_format'] == 'bigWig')) { + browser_files.push(file); + } + }); + }); + + // Data which populates the browser + const [vizFiles, setVizFiles] = React.useState(browser_files); + + // vizFilesError is true when there are no results for selected filters + const [vizFilesError, setVizFilesError] = React.useState(false); + // Number of files available is displayed + const [totalFiles, setTotalFiles] = React.useState(browser_files.length); + + // Update assembly, organism, browser files, and download link when user clicks on tab + const handleTabClick = (tab) => { + setVizFiles([]); + setAssembly(defaultAssemblyByOrganism[tab]); + }; + + const { columns, notification, filters, facets, total } = props.context; +// const results = props.context['@graph']; + const trimmedSearchBase = searchBase.replace(/[?|&]limit=all/, ''); + + + // Maximum number of selected items that can be visualized. + const VISUALIZE_LIMIT = 100; + const visualizeDisabledTitle = total > VISUALIZE_LIMIT ? `Filter to ${VISUALIZE_LIMIT} to visualize` : ''; + + const onFilter = (e) => { if (this.props.onChange) { const search = e.currentTarget.getAttribute('href'); this.props.onChange(search); @@ -278,30 +324,25 @@ class RegionSearch extends React.Component { } } - render() { - const { context } = this.props; - const results = context['@graph']; - const { columns, notification, filters, facets, total } = context; - const searchBase = url.parse(this.context.location_href).search || ''; - const trimmedSearchBase = searchBase.replace(/[?|&]limit=all/, ''); - const visualizeDisabledTitle = total > VISUALIZE_LIMIT ? `Filter to ${VISUALIZE_LIMIT} to visualize` : ''; + const visualizationTabs = {}; + visualizationOptions.forEach((visualizationName) => { + visualizationTabs[visualizationName] =
{visualizationName}
; + }); - return ( -
-

Region search

- - {notification === 'Success' ? - - + + const listView = ( + +
-
+
+

Showing {results.length} of {total} @@ -312,7 +353,7 @@ class RegionSearch extends React.Component { rel="nofollow" className="btn btn-info btn-sm" href={searchBase ? `${searchBase}&limit=all` : '?limit=all'} - onClick={this.onFilter} + onClick={onFilter} > View All @@ -322,44 +363,91 @@ class RegionSearch extends React.Component { View 25 : null} } - -

- -
+
    {results.map((result) => Listing({ context: result, columns, key: result['@id'] }))}
- + - : null} -
- ); - } -} + ); -RegionSearch.propTypes = { - context: PropTypes.object.isRequired, - onChange: PropTypes.func, -}; + const genomeBrowserView = ( +
+
+ + +
+
+ +
-RegionSearch.defaultProps = { - onChange: null, +
+ +
+
+ + +
+
+ ); + + return ( +
+
+
+
+
+

Region Search

+ {encyclopediaVersion} +
+
+ + + +
+ setSelectedVisualization(tab)} + tabCss="tab-button" + tabPanelCss="tab-container encyclopedia-tabs" + > + { selectedVisualization == 'List View' ? listView : genomeBrowserView } + +
+
+
+
+ ); }; -RegionSearch.contextTypes = { +Encyclopedia.contextTypes = { location_href: PropTypes.string, + navigate: PropTypes.func, + fetch: PropTypes.func, }; -export default AutocompleteBox; - -globals.contentViews.register(RegionSearch, 'region-search'); +globals.contentViews.register(Encyclopedia, 'region-search'); diff --git a/src/encoded/static/scss/encoded/modules/_search.scss b/src/encoded/static/scss/encoded/modules/_search.scss index 85ab2fa15e4..20b4b56a81b 100644 --- a/src/encoded/static/scss/encoded/modules/_search.scss +++ b/src/encoded/static/scss/encoded/modules/_search.scss @@ -35,6 +35,7 @@ $form-bg: #f3f3f3; display: flex; flex-direction: column; } + } @at-root #{&}__report-list {