Enter filter terms to filter the {type} included in the matrix.
-
-
-
+const ClosedPlate = ({ item }) => (
+
-
-
+
+
- );
- }
-}
-
-/**
-* Render the area above the matrix itself, including the page title.
-*/
-const ChIPSeqMatrixHeader = (props) => {
- const [context] = React.useState(props.context);
-
- return (
- component
-
- // We expect to find child elements inside . For any we find, get
- // the React `key` value and copy it to an `id` value that we add to each child component.
- // That lets each child get an HTML ID matching `key` without having to pass both a key and
- // id with the same value. We also set the `active` property in the TabPanelPane component
- // here too so that each pane knows whether it's the active one or not. ### React14
- if (this.props.children) {
- children = React.Children.map(this.props.children, (child, i) => {
- if (child.type === TabPanelPane) {
- firstPaneIndex = firstPaneIndex === -1 ? i : firstPaneIndex;
-
- // Replace the existing child component
- const active = this.getCurrentTab() === child.key;
- return React.cloneElement(child, { id: child.key, active });
- }
- return child;
- });
- }
-
- const baseUrl = '/chip-seq-matrix/?type=Experiment';
-
- return (
-
-
- );
-};
-
-ChIPSeqMatrixHeader.propTypes = {
- context: PropTypes.object.isRequired,
-};
-
-const ChIPSeqMatrixContent = ({ context }) => (
-
-
-
-
- {context.title}
-
-
-
-
-
-
-
-
-
-
-
-
-
);
-ChIPSeqMatrixContent.propTypes = {
- context: PropTypes.object.isRequired,
+ClosedPlate.propTypes = {
+ item: PropTypes.object.isRequired,
};
-/**
- * Component for creating tab-markup.
- *
- * @class ChIPSeqTabPanel
- * @extends {React.Component}
- */
-class ChIPSeqTabPanel extends React.Component {
- render() {
- const { tabList, navCss, moreComponents, moreComponentsClasses, tabFlange, decoration, decorationClasses, selectedTab, handleTabClick, fontColors } = this.props;
- let children = [];
- let firstPaneIndex = -1; // React.Children.map index of first
-
-
- -
- {tabList.map((tab, index) => (
-
-
-
- {tab.headerImage ?
: '' } - {tab.header} - -
- ))}
- {moreComponents ?
{moreComponents}
: null}
- {decoration}
: null}
- {tabFlange ? : null}
-
-
- {children}
-
+const MobileDisplayControl = (props) => (
+ props.expanded
+ ?
+ {}}>
+
+
+
+
+ :
+ {}}>
+
+
+
- );
- }
-}
-
-ChIPSeqTabPanel.propTypes = {
- /** Object with tab=>pane specifications */
- tabList: PropTypes.array.isRequired,
- /** key of tab to select; it's null for no-selection */
- selectedTab: PropTypes.string,
- /** Classes to add to navigation - */
- navCss: PropTypes.string,
- /** Other components to render in the tab bar */
- moreComponents: PropTypes.object,
- /** Classes to add to moreComponents wrapper
*/
- moreComponentsClasses: PropTypes.string,
- /** True to show a small full-width strip under active tab */
- tabFlange: PropTypes.bool,
- /** Component to render in the tab bar */
- decoration: PropTypes.object,
- /** CSS classes to wrap decoration in */
- decorationClasses: PropTypes.string,
- /** If selectedTab is provided, then parent must keep track of it */
- handleTabClick: PropTypes.func,
- children: PropTypes.node,
- /** Colors of the fonts */
- fontColors: PropTypes.array,
-};
-
-ChIPSeqTabPanel.contextTypes = {
- location_href: PropTypes.string,
- navigate: PropTypes.func,
-};
-
-ChIPSeqTabPanel.defaultProps = {
- fontColors: null,
- selectedTab: '',
- navCss: null,
- moreComponents: null,
- moreComponentsClasses: '',
- tabFlange: false,
- decoration: null,
- decorationClasses: null,
- handleTabClick: null,
- children: null,
-};
-
-
-/**
- * Used for creating modal pop up that gathers information on what organism a user wants to view.
- *
- */
-const SelectOrganismModal = () => (
-
-
-
-
-
ChIP-Seq Matrix — choose organism
-Organism to view in matrix:
-
- {tabLevel1.map((tab, index) => (
- {tab.header}
- ))}
+
+);
- const { context } = this.props;
- const link = context['@id'];
- const query = new QueryString(link);
- const assayTitle = assayTitlesOptions.filter((tab) => query.getKeyValues('assay_title').includes(tab))[0];
- const organismName = query.getKeyValues('replicates.library.biosample.donor.organism.scientific_name')[0];
- const selectedTabLevel1 = (tabLevel1.find((tab) => tab.id === organismName) || tabLevel1[0]).id;
- const selectedTabLevel2 = (tabLevel2.find((tab) => tab.id === assayTitle) || tabLevel2[0]).id;
+MobileDisplayControl.propTypes = {
+ expanded: PropTypes.bool.isRequired,
+ setLayout: PropTypes.func.isRequired,
+};
- this.subTabs = [];
- this.ChIPSeqMatrixData = [];
- this.state = {
- chIPSeqData: [],
- scrolledRight: false,
- showOrganismRequest: false,
- spinnerActive: true,
- organismName,
- selectedTabLevel1,
- selectedTabLevel2,
- };
+const getCardIndice = (data) => {
+ const closedCard1Start = 0;
+ let closedCard1End = 0;
+ let openCardStart = 0;
+ let openCardEnd = 0;
+ let closedCard2Start = 0;
+ let closedCard2End = 0;
+ const dataCount = data.length;
+
+ if (dataCount <= EXPANDED_CARD_SIZE) {
+ openCardEnd = EXPANDED_CARD_SIZE;
+ } else if (dataCount === EXPANDED_CARD_SIZE + 1) {
+ closedCard1End = 1;
+ openCardStart = closedCard1End + 1;
+ openCardEnd = EXPANDED_CARD_SIZE;
+ } else {
+ const closedCardCount = dataCount - EXPANDED_CARD_SIZE;
+ const firstClosedCardRegionCount = Math.floor(closedCardCount / 2);
+
+ closedCard1End = firstClosedCardRegionCount;
+ openCardStart = closedCard1End;
+ openCardEnd = closedCard1End + EXPANDED_CARD_SIZE;
+ closedCard2Start = openCardEnd;
+ closedCard2End = dataCount;
}
- componentDidMount() {
- this.handleScrollIndicator(this.scrollElement);
-
- // extract ChIP-Seq Matrix data and get relevant values out
- const { context } = this.props;
- const link = context['@id'];
- const query = new QueryString(link);
- const assayTitle = query.getKeyValues('assay_title')[0];
- const organismName = query.getKeyValues('replicates.library.biosample.donor.organism.scientific_name')[0];
- const showOrganismRequest = !(assayTitle && organismName);
+ return {
+ closedCard1Start,
+ closedCard1End,
+ openCardStart,
+ openCardEnd,
+ closedCard2Start,
+ closedCard2End,
+ };
+};
- // ALL ChIP-Seq Matrix data
- this.ChIPSeqMatrixData = getChIPSeqData(context, assayTitle, organismName);
+const Carousel = () => {
+ const [expanded, setExpanded] = React.useState(true);
+ const [cards, setCards] = React.useState([...newPageData]);
+ const {
+ closedCard1Start,
+ closedCard1End,
+ openCardStart,
+ openCardEnd,
+ closedCard2Start,
+ closedCard2End,
+ } = getCardIndice(cards);
+ let closedCards1;
+ let openedCards;
+ let closedCards2;
+
+ const setLayout = () => {
+ setExpanded(!expanded);
+ };
- // sub tabs
- this.subTabs = this.ChIPSeqMatrixData ? this.ChIPSeqMatrixData.subTabs : [];
+ const shift = (direction) => {
+ const arr = [...cards];
- // subtab may be in the url #, get it if it is there or default to first subtabs list value
- const storedSelectedTabLevel3 = window.sessionStorage.getItem('encodeSelectedTabLevel3');
- const selectedTabLevel3 = storedSelectedTabLevel3 && this.subTabs.includes(storedSelectedTabLevel3) ?
- storedSelectedTabLevel3 :
- this.subTabs.length > 0 ? this.ChIPSeqMatrixData.subTabs[0] : null;
+ if (direction === 1) {
+ const firstItem = arr.shift();
+ arr.push(firstItem);
- // Note: Hacky. If assay title is Histone and the organism is worm or fly, direct the user to TF assay title
- if (assayTitle === 'Histone ChIP-seq' && organismsWithHiddenHistoneAssay.includes(organismName)) {
- const tfUrl = link.replace('assay_title=Histone%20ChIP-seq', 'assay_title=TF ChIP-seq').replace('assay_title=Histone ChIP-seq', 'assay_title=TF ChIP-seq');
- this.context.navigate(tfUrl);
+ setCards(arr);
+ return;
}
- // sub chIP Seq data to display
- const chIPSeqData = this.ChIPSeqMatrixData ? this.ChIPSeqMatrixData.chIPSeqData[selectedTabLevel3] : {};
- const matrixUpdate = {
- chIPSeqData,
- selectedTabLevel3,
- showOrganismRequest, // determines if organism modal shows
- };
-
- this.setState({ spinnerActive: true }, () => {
- // deferred so spinner is painted on screen before matrix is painted
- _.defer(() => {
- this.setState(matrixUpdate, () => {
- this.setState({ spinnerActive: false });
- });
- });
- });
-
- this.searchSubcription = PubSub.subscribe(SEARCH_PERFORMED_PUBSUB, this.performSearch);
- }
-
- componentDidUpdate() {
- // Updates only happen for scrolling on this page. Every other update causes an
- // unmount/mount sequence.
- this.handleScrollIndicator(this.scrollElement);
- }
-
- // these are important to reset if code blows up
- componentDidCatch() {
- this.setState({ showOrganismRequest: false, spinnerActive: false });
- }
-
- componentWillUnmount() {
- PubSub.unsubscribe(this.searchSubcription);
- }
+ const lastItem = arr.pop();
+ setCards([lastItem, ...arr]);
+ };
- /**
- * Called when the user scrolls the matrix horizontally within its div to handle scroll
- * indicators
- * @param {object} e React synthetic scroll event
- */
- handleOnScroll(e) {
- this.handleScrollIndicator(e.target);
+ if (closedCard1End !== 0) {
+ closedCards1 = cards.slice(closedCard1Start, closedCard1End).map((item) =>
+
+
-
- );
-
-/**
- * Container for ChIP-Seq Matrix page's content.
- *
- * @class ChIPSeqMatrixPresentation
- * @extends {React.Component}
- * @listens PubSub - SEARCH_PERFORMED_PUBSUB
- */
-class ChIPSeqMatrixPresentation extends React.Component {
- constructor(props) {
- super(props);
-
- this.subTabClicked = this.subTabClicked.bind(this);
- this.performSearch = this.performSearch.bind(this);
- this.handleOnScroll = this.handleOnScroll.bind(this);
- this.handleScrollIndicator = this.handleScrollIndicator.bind(this);
+
-
- biosample
- {svgIcon('largeArrow')}
+ return (
+ <>
+
-
-
-
- );
-};
-
-ChIPSeqMatrix.propTypes = {
- context: PropTypes.object.isRequired,
-};
-
-ChIPSeqMatrix.contextTypes = {
- location_href: PropTypes.string,
- navigate: PropTypes.func,
- biosampleTypeColors: PropTypes.object, // DataColor instance for experiment project
-};
-
-/**
- * Render the vertical facets.
- */
-const ChIPSeqMatrixFacets = ({ context }) => {
- const [facetOpen, setFacetOpen] = React.useState(false);
-
- useMount(() => {
- const facetOpenSession = window.sessionStorage.getItem(`${FACET_SESSION_SUFFIX}_facetOpen`);
-
- if (facetOpenSession) {
- setFacetOpen(facetOpenSession === 'true');
- }
- });
+ const i = 0;
+ console.log(i);
+ const clear = React.useRef(null);
+ const form = React.useRef(null);
+
+ const resetSearch = () => {
+ form.current.reset();
+ clear.current.style.display = 'none';
+ };
- const facetClicked = () => {
- const isFacetOpen = !facetOpen;
+ const searchBoxKeyUp = (e) => {
+ const { target } = e;
- setFacetOpen(isFacetOpen);
- window.sessionStorage.setItem(`${FACET_SESSION_SUFFIX}_facetOpen`, isFacetOpen.toString());
+ clear.current.style.display = target.value.trim() === '' ? 'none' : 'inline';
+ console.error(target.value);
};
return (
-
+
+
+
-
-
- {showOrganismRequest ?
-
-
- {chIPSeqData && chIPSeqData.headerRow && chIPSeqData.headerRow.length !== 0 && chIPSeqData.dataRow && chIPSeqData.dataRow.length !== 0 ?
-
-
-
+
);
- }
-}
-
-ChIPSeqMatrixPresentation.propTypes = {
- context: PropTypes.object.isRequired,
-};
-
-ChIPSeqMatrixPresentation.contextTypes = {
- navigate: PropTypes.func,
- location_href: PropTypes.string,
- session: PropTypes.object,
- session_properties: PropTypes.object,
+ {svgIcon('largeArrow')}{context.matrix.y.label}
{ this.scrollElement = element; }}>
-
- :
-
- { chIPSeqData && Object.keys(chIPSeqData).length === 0 ? 'Select an organism to view data.' : 'No data to display.' }
-
- }
-
+
-
+ {
+ cards.map((item) =>
+
+
+ );
};
-
/**
* Container for ChIP-Seq Matrix page.
*
@@ -922,80 +294,71 @@ ChIPSeqMatrixPresentation.contextTypes = {
* @returns
*/
const ChIPSeqMatrix = ({ context }) => {
- const itemClass = globals.itemClass(context, 'view-item');
-
- return (
- shift(1)} role="button" tabIndex={-1} onKeyPress={() => {}}>
+
+
+
+
+
+ { closedCards1 }
+ { openedCards }
+ { closedCards2 }
+
+ shift(-1)} role="button" tabIndex={-1} onKeyPress={() => {}}>
+
+
+
-
-
-
-
-
-
+
+ 
+
+
+
+
-
+
- { facetOpen ?
- displayedFacets.includes(facet.field))}
- filters={context.filters}
- addClasses="matrix-facets"
- supressTitle
- />
- : null
- }
+
);
};
-ChIPSeqMatrixFacets.propTypes = {
- /** Matrix search result object */
+ChIPSeqMatrix.propTypes = {
context: PropTypes.object.isRequired,
};
+ChIPSeqMatrix.contextTypes = {
+ location_href: PropTypes.string,
+ navigate: PropTypes.func,
+ biosampleTypeColors: PropTypes.object, // DataColor instance for experiment project
+};
+
globals.contentViews.register(ChIPSeqMatrix, 'ChipSeqMatrix');
diff --git a/src/encoded/static/components/new_home_page.js b/src/encoded/static/components/new_home_page.js
new file mode 100644
index 00000000000..0f70b4f1f3d
--- /dev/null
+++ b/src/encoded/static/components/new_home_page.js
@@ -0,0 +1,12 @@
+import * as globals from './globals';
+
+
+const NewHomePage = () => {
+ const i = 'test';
+
+ return (
+
+
+
{i}
+ );
+};
+
+globals.contentViews.register(NewHomePage, 'new-home-page');
diff --git a/src/encoded/static/scss/encoded/modules/_new_home_page.scss b/src/encoded/static/scss/encoded/modules/_new_home_page.scss
new file mode 100644
index 00000000000..ac5f29ce95a
--- /dev/null
+++ b/src/encoded/static/scss/encoded/modules/_new_home_page.scss
@@ -0,0 +1,267 @@
+$box-color: #0a253d;
+$search-radius: 10px;
+
+.home-page-layout {
+ display: flex;
+ flex-direction: column;
+
+ &__brand {
+ flex: 0 1 20%;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 20px;
+
+ &--brand-img {
+ height: 65%;
+ width: 70%;
+ }
+ }
+
+ &__search {
+ flex: 0 1 10%;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 100px;
+
+ &__search-region {
+ height: 20px;
+ width: 100%;
+
+ ul {
+ list-style: none;
+
+ input[type="text"] {
+ border-radius: 25px;
+ width: 100%;
+ border: 1px solid #ccc;
+ }
+ }
+
+ p {
+ margin: 0;
+ text-align: center;
+ }
+
+ @media screen and (min-width: $screen-md-min) {
+ width: 60%;
+ }
+
+ &__text-region {
+ display: flex;
+ justify-content: center;
+ }
+
+ .tooltip-home-info {
+ margin-top: 7px;
+ }
+
+ &__search {
+ display: flex;
+ border: 1px solid gray;
+ border-radius: $search-radius;
+
+ input[type="search"] {
+ width: 100%;
+ border: 0 solid white;
+ border-radius: $search-radius;
+ }
+
+ button {
+ background-color: white;
+ border: 0 solid white;
+ border-radius: 10px;
+ }
+ }
+
+ &__clear {
+ display: none;
+ float: right;
+ margin-top: 10px;
+ background-color: #bc0000;
+ border-radius: $search-radius;
+ font-size: 0.9rem;
+ }
+ }
+ }
+
+ &__caroursel {
+ flex: 0 1 70%;
+ }
+}
+
+.home-page-layout-control {
+ &__expanded {
+ display: flex;
+ justify-content: space-between;
+ width: 60px;
+ float: right;
+ margin-right: 10px;
+ cursor: pointer;
+
+ &__first-item {
+ background-color: $box-color;
+ width: 10px;
+ height: 15px;
+ }
+
+ &__second-item {
+ background-color: $box-color;
+ width: 30px;
+ height: 15px;
+ }
+
+ &__third-item {
+ background-color: $box-color;
+ width: 10px;
+ height: 15px;
+ }
+ }
+
+ &__collapsed {
+ display: flex;
+ justify-content: space-between;
+ width: 10px;
+ float: right;
+ margin-right: 10px;
+ cursor: pointer;
+
+ &__item {
+ background-color: $box-color;
+ height: 5px;
+ margin: 2px;
+ width: 5px;
+ }
+ }
+}
+
+.home-page-full-view {
+ display: none;
+ justify-content: space-between;
+
+ &__arrow {
+ flex: 0 1 2%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ max-width: 50%;
+ cursor: pointer;
+
+ i {
+ font-size: 30px;
+ }
+ }
+
+ &__region {
+ flex: 0 1 96%;
+ overflow: hidden;
+
+ &__carousel {
+ display: flex;
+ }
+ }
+}
+
+.home-page-mobile-view {
+ display: flex;
+ flex-direction: column;
+}
+
+.home-page-mobile-card-view {
+ // clear: both;
+}
+
+.home-page-cards-mobile-expanded {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.home-page-cards-mobile-collapsed {
+ display: flex;
+ overflow: scroll;
+}
+
+$card-height: 330px;
+$card-width: 180px;
+$card-margin: 5px;
+
+@mixin ellipsis {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.home-page-card {
+ display: flex;
+ border: 1px solid black;
+ flex-direction: column;
+ margin: $card-margin;
+ height: $card-height;
+ width: $card-width;
+
+ &__header {
+ color: white;
+ background-color: $box-color;
+ flex: 0 1 10%;
+ text-align: center;
+ padding: 5px;
+ height: $card-height / (0.1);
+ width: $card-width;
+
+ @include ellipsis();
+ }
+
+ &__content {
+ color: gray;
+ background-color: white;
+ flex: 0 1 50%;
+ text-align: center;
+ height: $card-height / (0.5);
+ padding: 5px;
+
+ @include ellipsis();
+ }
+
+ &__footer {
+ color: white;
+ background-color: $box-color;
+ flex: 0 1 40%;
+ padding: 5px;
+
+ @include ellipsis();
+ }
+}
+
+.home-page-closed-card {
+ display: flex;
+ border: 1px solid black;
+ flex-direction: column;
+ margin: $card-margin;
+ height: $card-height;
+ width: 40px;
+
+ &__content {
+ flex: 0 1 100%;
+ color: white;
+ background-color: $box-color;
+
+ @include ellipsis();
+
+ &--text {
+ text-align: center;
+ transform: rotate(-90deg);
+ position: relative;
+ top: 50%;
+ }
+ }
+}
+
+@media screen and (min-width: $screen-md-min) {
+ .home-page-mobile-view {
+ display: none;
+ }
+
+ .home-page-full-view {
+ display: flex;
+ }
+}
diff --git a/src/encoded/static/scss/style.scss b/src/encoded/static/scss/style.scss
index d6ce4d60082..57711d1ab6c 100644
--- a/src/encoded/static/scss/style.scss
+++ b/src/encoded/static/scss/style.scss
@@ -227,6 +227,7 @@ $link-hover-color: darken($link-color, 15%);
"encoded/modules/lightbox",
"encoded/modules/facet",
"encoded/modules/matrix",
+ "encoded/modules/new_home_page",
"encoded/modules/auditmatrix",
"encoded/modules/collection",
"encoded/modules/lists",