Skip to content

Commit

Permalink
Merge pull request #541 from cedardevs/445-granule-list-view
Browse files Browse the repository at this point in the history
445 granule list view
  • Loading branch information
zebdelk authored Apr 4, 2018
2 parents 916ae8b + 0e11df9 commit fd993ae
Show file tree
Hide file tree
Showing 75 changed files with 6,432 additions and 3,109 deletions.
3,872 changes: 3,868 additions & 4 deletions client/package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@
"leaflet-draw": "^0.4.13",
"lodash": "^4.17.5",
"moment": "^2.21.0",
"npm": "^5.8.0",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-browser-detection": "^1.1.1",
"react-dom": "^16.2.0",
"react-grid-system": "^3.1.2",
"react-redux": "^5.0.7",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.8",
Expand Down
53 changes: 26 additions & 27 deletions client/src/actions/FlowActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ import {
} from './SearchParamActions'
import {fetchConfig} from './ConfigActions'
import {fetchInfo, fetchCounts} from './InfoActions'
import {isDetailPage, getCollectionIdFromDetailPath} from '../utils/urlUtils'
import {
isDetailPage,
isGranuleListPage,
getCollectionIdFromDetailPath,
getCollectionIdFromGranuleListPath,
} from '../utils/urlUtils'
import store from '../store'

export const showCollections = (prefix = '') => {
Expand All @@ -37,17 +42,17 @@ export const showCollections = (prefix = '') => {
}
}

export const showGranules = (prefix = '') => {
// this is only needed for the 508 site now
export const showGranulesList = id => {
if (!id) {
return
}
return (dispatch, getState) => {
const query = encodeQueryString(getState())
if (!_.isEmpty(query)) {
const locationDescriptor = {
pathname: `${prefix}/collections/files`,
search: `?${query}`,
}
dispatch(push(locationDescriptor))
const locationDescriptor = {
pathname: `collections/granules/${id}`,
search: `?${query}`,
}
dispatch(push(locationDescriptor))
}
}

Expand Down Expand Up @@ -123,16 +128,19 @@ export const initialize = () => {

const loadFromUrl = (path, newQueryString) => {
// Note, collection queries are automatically updated by the URL because the query is parsed into search, which triggers loadData via a watch

if (isDetailPage(path)) {
if (
isDetailPage(path) &&
!store.getState().behavior.request.getCollectionInFlight
) {
const detailId = getCollectionIdFromDetailPath(path)
if (detailId != store.getState().behavior.request.getCollectionInFlight) {
store.dispatch(getCollection(detailId))
store.dispatch(clearSelections())
store.dispatch(toggleSelection(detailId))
store.dispatch(clearGranules())
store.dispatch(fetchGranules())
}
store.dispatch(getCollection(detailId))
}
else if (isGranuleListPage(path)) {
const detailId = getCollectionIdFromGranuleListPath(path)
store.dispatch(clearSelections())
store.dispatch(toggleSelection(detailId))
store.dispatch(clearGranules())
store.dispatch(fetchGranules())
}
else {
if (newQueryString.indexOf('?') === 0) {
Expand Down Expand Up @@ -164,20 +172,11 @@ export const loadData = () => {
}
}

// Update background
const updateBackground = path => {
const is508ButNotLanding =
(_.startsWith(path, '/508/') && path !== '/508/') ||
(_.startsWith(path, '508/') && path !== '508/')
store.dispatch(toggleBackgroundImage(!is508ButNotLanding)) //Cover strange routing case. TODO: Regex test?
}

const routingWatch = watch(
store.getState,
'behavior.routing.locationBeforeTransitions'
)
const routingUpdates = locationBeforeTransitions => {
updateBackground(locationBeforeTransitions.pathname)
loadFromUrl(
locationBeforeTransitions.pathname,
locationBeforeTransitions.search
Expand Down
34 changes: 22 additions & 12 deletions client/src/common/Expandable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,19 @@ const styleHideFocus = {
outline: 'none',
}

const styleHeading = {
display: 'flex',
textAlign: 'left',
alignItems: 'center',
color: '#FFFFFF',
cursor: 'pointer',
const styleHeading = (open, borderRadius) => {
const borderRadiusEffective = open
? `${borderRadius} ${borderRadius} 0 0`
: `${borderRadius}`

return {
display: 'flex',
textAlign: 'left',
alignItems: 'center',
color: '#FFFFFF',
cursor: 'pointer',
borderRadius: borderRadius ? borderRadiusEffective : 'none',
}
}

const styleHeadingShown = {}
Expand All @@ -23,9 +30,12 @@ const styleArrow = {
userSelect: 'none',
}

const styleContent = {
textAlign: 'left',
overflow: 'hidden',
const styleContent = borderRadius => {
return {
textAlign: 'left',
overflow: 'hidden',
borderRadius: borderRadius ? `0 0 ${borderRadius} ${borderRadius}` : 'none',
}
}

const styleContentShown = {
Expand All @@ -45,7 +55,7 @@ export default class Expandable extends React.Component {
constructor(props) {
super(props)
this.state = {
open: props.open,
open: props.open || false,
showArrow: props.showArrow,
maxHeight: props.open ? '10000px' : 0,
display: props.open ? 'block' : 'none',
Expand Down Expand Up @@ -150,7 +160,7 @@ export default class Expandable extends React.Component {
const {styleFocus, styleWrapper} = this.props

const stylesMerged = {
...styleHeading,
...styleHeading(this.state.open, this.props.borderRadius),
...this.props.styleHeading,
...styleHeadingHide,
...styleHideFocus, // focus is shown on an interior element instead
Expand All @@ -161,7 +171,7 @@ export default class Expandable extends React.Component {
}

const styleContentMerged = {
...styleContent,
...styleContent(this.props.borderRadius),
...this.props.styleContent,
...styleContentVisibilityTransition,
...styleContentVisibility,
Expand Down
6 changes: 5 additions & 1 deletion client/src/common/SvgIcon.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,11 @@ const styleSvg = size => {
}
}
const styleWrapper = size => {
return {display: 'inline-block', width: size ? size : '1em'}
return {
display: 'inline-block',
width: size ? size : '1em',
height: size ? size : '1em',
}
}

export class SvgIcon extends React.Component {
Expand Down
51 changes: 51 additions & 0 deletions client/src/common/Video.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react'

export default class Video extends React.Component {
componentDidMount() {
// need to set dimensions intially before resize events
this.debounceResize()
// subsequent resize event will retrigger our calculation
window.addEventListener('resize', this.debounceResize)
}

componentWillUnmount() {
// remember to remove custom listeners before unmounting
window.removeEventListener('resize', this.debounceResize)
}

debounceResize = () => {
// prevent resize work unless threshold is reached
// this helps ensure the new width doesn't stick on a transient value
const resizeThreshold = 250 // ms
clearTimeout(this.resizeId)
this.resizeId = setTimeout(this.resize, resizeThreshold)
}

resize = () => {
// do work only if iframe exists
if (this.iframeRef) {
// recall our aspect ratio from props
const {aspectRatio} = this.props
// get new width dynamically
const iframeRect = this.iframeRef.getBoundingClientRect()
const newWidth = iframeRect.width
// maintain aspect ratio when setting height
this.iframeRef.style.height = newWidth * aspectRatio + 'px'
}
}

render() {
const {link} = this.props
return (
<iframe
ref={iframeRef => {
this.iframeRef = iframeRef
}}
src={link}
frameBorder={0}
allowFullScreen={true}
style={{width: '100%'}}
/>
)
}
}
29 changes: 29 additions & 0 deletions client/src/common/info/About.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@ const styleH2 = {
margin: '0 0 0.618em 0',
}

const styleAccessibilityStatement = {
marginTop: '1.618em',
border: 'gray solid',
padding: '1em',
background: '#F9F9F9',
}

export default class Help extends React.Component {
render() {
return (
Expand All @@ -38,6 +45,28 @@ export default class Help extends React.Component {
and vast scale of NOAA's data.
</p>
<h2 style={styleH2}>{this.buildCountString()}</h2>
<div style={styleAccessibilityStatement}>
<h2 style={styleH2}>Accessibility Statement</h2>
<p>
NOAA OneStop is committed to providing access to all individuals
who are seeking information from our website. We strive to meet or
exceed requirements of Section 508 of the Rehabilitation Act, as
amended in 1998.
</p>
<p>
We recognize not all pages on our site are fully accessible at
this time, however, we aim to meet Level AA accessibility for all
of our features. We will continue to make improvements across our
entire site until all pages are fully compliant.
</p>
<p>
If you experience any challenges while accessing parts of our
site, please contact{' '}
<a href={'mailto:[email protected]'} style={{color: '#55ace4'}}>
[email protected]
</a>
</p>
</div>
</section>
</div>
)
Expand Down
54 changes: 19 additions & 35 deletions client/src/common/info/Help.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,42 +57,18 @@ const styleNote = {

export default class Help extends React.Component {
render() {
const accessibleVersion = window.location.hash.includes('508')

const mainSiteSnippet = (
<li>
Use the filters menu (available on the search results page) to limit
results to only those that <u>intersect</u> the given constraints.
<br />
Once a filter has been applied, a tag will be placed above the search
results.
</li>
)

const accessibleSiteSnippet = (
<li>
Use the Start Date, End Date, and Bounding Box text boxes to limit
results to only those that <u>intersect</u> the given constraints.
</li>
)

return (
<div style={styleWrapper}>
<section style={styleHelp}>
<h1 style={styleHelpH1}>How to use this interface:</h1>
<p>
<b>
To get started, just type a term into the Search{' '}
{accessibleVersion ? 'Text ' : ''}Box on the home page and click
the Search Button
To get started, just type a term into the Search Box on the home
page and submit or click the Search Button
</b>
{accessibleVersion ? (
''
) : (
<i style={styleIcon} aria-hidden="true">
<img alt="search icon" src={search} style={styleIconImg} />
</i>
)}
<i style={styleIcon} aria-hidden="true">
<img alt="search icon" src={search} style={styleIconImg} />
</i>
</p>

<p>
Expand All @@ -103,7 +79,14 @@ export default class Help extends React.Component {
</p>

<ul>
{accessibleVersion ? accessibleSiteSnippet : mainSiteSnippet}
<li>
Use the filters menu (available on the search results page) to
limit results to only those that <u>intersect</u> the given
constraints.
<br />
Once a filter has been applied, a tag will be placed above the
search results.
</li>

<li style={styleTipsListItem}>
Wrap a search phrase in double quotes for an exact match:
Expand All @@ -122,7 +105,9 @@ export default class Help extends React.Component {
<em>must not</em>. Terms without a <em>+</em> or <em>-</em> are
considered optional.
<ul className={styleExamples}>
<li>temperature pressure +air -sea</li>
<li style={styleExamplesListItem}>
temperature pressure +air -sea
</li>
</ul>
<p>
<span className={styleNote}>Note:</span> This means hyphens
Expand Down Expand Up @@ -173,15 +158,14 @@ export default class Help extends React.Component {

<p>
<b>
If you'd prefer to interact directly with the OneStop API, you can
find more information about it{' '}
Find more information about interacting directly with the{' '}
<A
target="_blank"
href="https://github.com/cedardevs/onestop/wiki/OneStop-Search-API-Requests"
style={{color: '#277cb2'}}
>
here
</A>
OneStop API
</A>.
</b>
</p>
</section>
Expand Down
2 changes: 1 addition & 1 deletion client/src/common/input/Checkbox.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const styleInput = {
}

const styleCheckmark = {
opacity: '0.2',
opacity: '0',
position: 'absolute',
width: '0.5em',
height: '0.25em',
Expand Down
Loading

0 comments on commit fd993ae

Please sign in to comment.