Skip to content

Commit

Permalink
Make sure pages still display
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaybeJustJames
MaybeJustJames committed May 21, 2021
1 parent 23dac68 commit 3c83036
Show file tree
Hide file tree
Showing 6 changed files with 156 additions and 126 deletions.
6 changes: 5 additions & 1 deletion src/components/common/ViewerDropContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,11 @@ class ViewerDropContainer extends Component {
};

return connectDropTarget(
<div className='flexDisplay stretched'>{container()}</div>
<div
className='flexDisplay stretched'
style={{ height: '90%', backgroundColor: '#eee' }}>
{container()}
</div>
);
}

Expand Down
147 changes: 80 additions & 67 deletions src/components/pages/Compare.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import React, { Component } from 'react';
import { DragDropContext } from 'react-dnd';
import { withRouter } from 'react-router-dom';
import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
import { Accordion, Grid, Menu, Icon, Dropdown } from 'semantic-ui-react';

import * as R from 'ramda';
import * as d3 from 'd3';

import './pages.css';

import box2 from '../../js/box2.js';
import { BackendAPI } from '../common/API';
import Annotation from '../common/Annotation';
Expand All @@ -15,8 +18,6 @@ import ViewerToolbar from '../common/ViewerToolbar';
import AnnotationDropContainer from '../common/AnnotationDropContainer';
import ViewerDropContainer from '../common/ViewerDropContainer';

import './compare.css';

class Compare extends Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -281,22 +282,21 @@ class Compare extends Component {
);
}
if (configuration === 'multi' && i === 0) {
let coordOptions = [],
coordinatesSelector;
let coordinatesSelector;
if (
multiMetadata[j] &&
multiMetadata[j].cellMetaData &&
multiMetadata[j].cellMetaData.embeddings
.length
) {
multiMetadata[
const coordOptions = multiMetadata[
j
].cellMetaData.embeddings.map(
(coords) => {
coordOptions.push({
return {
text: coords.name,
value: coords.id,
});
};
}
);
coordinatesSelector = (
Expand Down Expand Up @@ -419,6 +419,7 @@ class Compare extends Component {
activeLegend: legend,
});
}}
location={this.props.location}
/>
</Grid.Column>
);
Expand All @@ -434,70 +435,82 @@ class Compare extends Component {
}

return (
<Grid>
<div className='appPage'>
<Search.FeatureSearchGroup
filter='all'
identifier='compare-page'
/>
<Grid.Row columns={3} stretched className='viewerRow'>
<Grid.Column width={2}>
<div className='compare-menu'>
Number of displays: &nbsp;
<Dropdown
inline
options={this.displayConf}
disabled={configuration === 'one'}
value={displays}
onChange={this.displayNumberChanged.bind(this)}
/>
<br />
Superposition: &nbsp;
<Dropdown
inline
disabled={
configuration === 'one' &&
isSuperpositionLocked
}
options={this.superpositionConf}
value={superposition}
onChange={this.superpositionChanged.bind(this)}
/>
<br />
Configuration: &nbsp;
<Dropdown
inline
options={this.configurationConf}
disabled={isConfigurationLocked}
defaultValue={configuration}
onChange={this.configurationChanged.bind(this)}

<Grid
style={{
height: '100%',
marginTop: '0',
marginBottom: '2rem',
}}>
<Grid.Row columns={3} stretched className='viewerRow'>
<Grid.Column width={2}>
<div className='compare-menu'>
Number of displays: &nbsp;
<Dropdown
inline
options={this.displayConf}
disabled={configuration === 'one'}
value={displays}
onChange={this.displayNumberChanged.bind(
this
)}
/>
<br />
Superposition: &nbsp;
<Dropdown
inline
disabled={
configuration === 'one' &&
isSuperpositionLocked
}
options={this.superpositionConf}
value={superposition}
onChange={this.superpositionChanged.bind(
this
)}
/>
<br />
Configuration: &nbsp;
<Dropdown
inline
options={this.configurationConf}
disabled={isConfigurationLocked}
defaultValue={configuration}
onChange={this.configurationChanged.bind(
this
)}
/>
<Accordion styled>{annotationTabs()}</Accordion>
</div>
</Grid.Column>
<Grid.Column stretched width={11}>
{viewers()}
</Grid.Column>
<Grid.Column width={3}>
<div
className='chart-wrapper noStretch'
id='chart-distro1'
style={{ width: '100%' }}
height='200px'></div>
<ViewerSidebar
getSelectedAnnotations={this.getSelectedAnnotations.bind(
this
)}
onActiveFeaturesChange={(features, id) => {
this.setState({ activeFeatures: features });
}}
activeLegend={activeLegend}
identifier='regulon-page'
/>
<Accordion styled>{annotationTabs()}</Accordion>
<br />
{/* <ViewerToolbar location={this.props.location} /> */}
</div>
</Grid.Column>
<Grid.Column stretched width={11} className='viewerCell'>
{viewers()}
</Grid.Column>
<Grid.Column width={3}>
<div
className='chart-wrapper noStretch'
id='chart-distro1'
style={{ width: '100%' }}
height='200px'></div>
<ViewerSidebar
getSelectedAnnotations={this.getSelectedAnnotations.bind(
this
)}
onActiveFeaturesChange={(features, id) => {
this.setState({ activeFeatures: features });
}}
activeLegend={activeLegend}
identifier='regulon-page'
/>
</Grid.Column>
</Grid.Row>
</Grid>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
);
}

Expand Down Expand Up @@ -980,4 +993,4 @@ class Compare extends Component {
}
}

export default DragDropContext(HTML5Backend)(Compare);
export default DragDropContext(HTML5Backend)(withRouter(Compare));
4 changes: 2 additions & 2 deletions src/components/pages/Gene.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ export default class Gene extends Component {
if (!activeLoom || activeLoom === '*') {
return <div>Select the dataset to be analyzed</div>;
}
// <!--<div className='genePage'>-->

return (
<div className='genePage'>
<div className='appPage'>
<Search.FeatureSearchGroup
filter='all'
identifier='gene-page'
Expand Down
112 changes: 60 additions & 52 deletions src/components/pages/Regulon.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { Component } from 'react';
import { Segment, Grid } from 'semantic-ui-react';

import './pages.css';

import { FEATURE_COLOURS } from '../constants';

import Search from '../Search';
Expand Down Expand Up @@ -50,69 +52,75 @@ export default class Regulon extends Component {
}

return (
<Grid className='flexDisplay'>
<div className='appPage'>
<Search.FeatureSearchGroup
filter='regulon'
identifier='regulon-page'
/>
<Grid.Row columns='3' centered>
{featureThreshold}
<Grid.Column>&nbsp;</Grid.Column>
</Grid.Row>
<Grid.Row columns='4' stretched className='viewerFlex flexRow'>
<Grid.Column width={1}>
<ViewerToolbar location={this.props.location} />
</Grid.Column>
<Grid.Column stretched className='flexDouble'>
<b className='noStretch'>Regulon AUC values</b>
<Viewer
name='reg'
loomFile={activeLoom}
activeFeatures={activeFeatures}
activeCoordinates={activeCoordinates}
scale={true}
location={this.props.location}
/>
</Grid.Column>
<Grid.Column stretched>
<Segment vertical stretched className='flexDisplay'>
<b className='noStretch'>
Cells passing thresholds
</b>
<Viewer
name='auc'
loomFile={activeLoom}
activeFeatures={activeFeatures}
activeCoordinates={activeCoordinates}
thresholds={true}
location={this.props.location}
/>
</Segment>
<Segment vertical stretched className='flexDisplay'>
<b className='noStretch'>Expression levels</b>

<Grid className='flexDisplay'>
<Grid.Row columns='3' centered>
{featureThreshold}
<Grid.Column>&nbsp;</Grid.Column>
</Grid.Row>
<Grid.Row
columns='4'
stretched
className='viewerFlex flexRow'>
<Grid.Column width={1}>
<ViewerToolbar location={this.props.location} />
</Grid.Column>
<Grid.Column stretched className='flexDouble'>
<b className='noStretch'>Regulon AUC values</b>
<Viewer
name='expr'
name='reg'
loomFile={activeLoom}
activeFeatures={activeFeatures}
activeCoordinates={activeCoordinates}
scale={true}
genes={true}
settings={true}
customScale={true}
location={this.props.location}
/>
</Segment>
</Grid.Column>
<Grid.Column width={4}>
<ViewerSidebar
onActiveFeaturesChange={(features, id) => {
this.setState({ activeFeatures: features });
}}
identifier='regulon-page'
/>
</Grid.Column>
</Grid.Row>
</Grid>
</Grid.Column>
<Grid.Column stretched>
<Segment vertical stretched className='flexDisplay'>
<b className='noStretch'>
Cells passing thresholds
</b>
<Viewer
name='auc'
loomFile={activeLoom}
activeFeatures={activeFeatures}
activeCoordinates={activeCoordinates}
thresholds={true}
location={this.props.location}
/>
</Segment>
<Segment vertical stretched className='flexDisplay'>
<b className='noStretch'>Expression levels</b>
<Viewer
name='expr'
loomFile={activeLoom}
activeFeatures={activeFeatures}
activeCoordinates={activeCoordinates}
scale={true}
genes={true}
settings={true}
customScale={true}
location={this.props.location}
/>
</Segment>
</Grid.Column>
<Grid.Column width={4}>
<ViewerSidebar
onActiveFeaturesChange={(features, id) => {
this.setState({ activeFeatures: features });
}}
identifier='regulon-page'
/>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
);
}

Expand Down
3 changes: 0 additions & 3 deletions src/components/pages/compare.css
View file

This file was deleted.

10 changes: 9 additions & 1 deletion src/components/pages/pages.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
div.genePage {
div.appPage {
display: flex;
flex-direction: column;
justify-content: flex-start;
Expand All @@ -9,3 +9,11 @@ div.genePage {
flex-grow: 1;
margin-bottom: 2rem !important;
}

div.compare-menu {
position: fixed;
overflow-y: scroll;
height: 85vh;
bottom: 0;
width: 150px;
}

0 comments on commit 3c83036

Please sign in to comment.