Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/sennetconsortium/portal-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxsibilla
maxsibilla committed Jan 3, 2023
2 parents ebe458d + 52bad16 commit 2b00909
Show file tree
Hide file tree
Showing 13 changed files with 225 additions and 116 deletions.
8 changes: 4 additions & 4 deletions src/components/custom/TableResults.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const DefaultTableResults = ({isLoggedIn, hasMultipleEntityTypes = true}) => {

const DefaultTableRowDetails = ({isLoggedIn, result, urlField, hotlink, hasMultipleEntityTypes = true}) => {
return (
<tr key="results_detail"
<tr tabIndex={0} className={`js-tr--${result.entity_type.raw}`} aria-label={`Open detail view of ${result.sennet_id.raw}`} key="results_detail"
onClick={urlField != null ? () => urlField(this, result.uuid.raw) : () => window.location.href = hotlink}>
<td>
{result.created_by_user_displayname.raw}
Expand Down Expand Up @@ -156,7 +156,7 @@ const TableRowDetail = ({result, urlField, titleField}) => {
if (filter.field === 'entity_type') {
if (filter.values.length === 1 && filter.values[0] === 'Sample') {
return (
<tr key={index}
<tr key={index} tabIndex={0} aria-label={`Open detail view of ${result.sennet_id.raw}`}
onClick={urlField != null ? () => urlField(this, result.uuid.raw) : () => window.location.href = hotlink}>
<td>
{result.created_by_user_displayname.raw}
Expand Down Expand Up @@ -192,7 +192,7 @@ const TableRowDetail = ({result, urlField, titleField}) => {
}
if (filter.values.length === 1 && filter.values[0] === 'Source') {
return (
<tr key={index}
<tr key={index} tabIndex={0} aria-label={`Open detail view of ${result.sennet_id.raw}`}
onClick={urlField != null ? () => urlField(this, result.uuid.raw) : () => window.location.href = hotlink}>
<td>
{result.created_by_user_displayname.raw}
Expand Down Expand Up @@ -229,7 +229,7 @@ const TableRowDetail = ({result, urlField, titleField}) => {
} else if (filter.values.length === 1 && filter.values[0] === 'Dataset') {
// Table results for Dataset
return (
<tr key={index}
<tr key={index} tabIndex={0} aria-label={`Open detail view of ${result.sennet_id.raw}`}
onClick={urlField != null ? () => urlField(this, result.uuid.raw) : () => window.location.href = hotlink}>
<td>
{result.created_by_user_displayname.raw}
Expand Down
2 changes: 1 addition & 1 deletion src/components/custom/edit/dataset/AncestorIds.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export default class AncestorIds extends React.Component {

}
bodyContent={
<div className="js-gtm--results">
<div className="js-gtm--results" data-js-ada='tr'>
<Results view={TableResults} filters={filters}
titleField={filters}
resultView={TableRowDetail}
Expand Down
2 changes: 1 addition & 1 deletion src/components/custom/edit/sample/AncestorId.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export default class AncestorId extends React.Component {

}
bodyContent={
<div className="js-gtm--results">
<div className="js-gtm--results" data-js-ada='tr'>
<Results view={TableResults} filters={filters}
titleField={filters}
resultView={TableRowDetail}
Expand Down
8 changes: 5 additions & 3 deletions src/components/custom/edit/sample/AncestorInformationBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,13 @@ export default class AncestorInformationBox extends React.Component {


<div className="card-body">
<a href={'/' + this.props.ancestor.entity_type.toLowerCase() + '?uuid=' + this.props.ancestor.uuid}
className="link_with_icon">{this.props.ancestor.sennet_id}</a>

<Table borderless>
<thead>
<tr>
<th><a
href={'/' + this.props.ancestor.entity_type.toLowerCase() + '?uuid=' + this.props.ancestor.uuid}
className="link_with_icon">{this.props.ancestor.sennet_id}</a></th>
</tr>
<tr>
<th>Ancestor Type</th>
{this.props.ancestor.lab_source_id &&
Expand Down
177 changes: 87 additions & 90 deletions src/components/custom/edit/sample/SampleCategory.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,135 +5,132 @@ import {QuestionCircleFill} from "react-bootstrap-icons";
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';

export default class SampleCategory extends React.Component {
constructor(props) {
super(props);
this.state = {
organ_group_hide: 'none',
organ_other_hide: 'none',
};
function SampleCategory({
organ_group_hide,
set_organ_group_hide,
organ_other_hide,
set_organ_other_hide,
data,
onChange,
sample_categories
}) {

// Show organ input group if sample category is 'organ'
if (props.data.sample_category === 'organ') {
this.state.organ_group_hide = '';
}
}

handleSampleCategoryChange = (e, onChange) => {
const handleSampleCategoryChange = (e, onChange) => {
// If sample category is 'Organ' then display the organ type input group
if (e.target.value === 'organ') {
//Organ Type set display and require
this.setState({organ_group_hide: ''})
set_organ_group_hide('')
document.getElementById("organ").setAttribute("required", "")

} else {
this.resetOrganType(e, onChange);
resetOrganType(e, onChange);
}
};

handleOrganChange = (e, onChange) => {
const handleOrganChange = (e, onChange) => {
// If organ type is 'Other' then display organ_other group
if (e.target.value === 'other') {
this.setState({organ_other_hide: ''})
set_organ_other_hide('')
document.getElementById("organ_other").setAttribute("required", "")

} else {
this.resetOrganTypeOther(e, onChange);
resetOrganTypeOther(e, onChange);
}
}

resetOrganType = (e, onChange) => {
this.setState({organ_group_hide: 'none'})
const resetOrganType = (e, onChange) => {
set_organ_group_hide('none')
document.getElementById("organ").removeAttribute("required")
// Empty the value of the fields and trigger onChange
document.getElementById("organ").value = "";
onChange(e, "organ", "")

// Need to also reset organ_other
this.resetOrganTypeOther(e, onChange);
resetOrganTypeOther(e, onChange);
}

resetOrganTypeOther = (e, onChange) => {
this.setState({organ_other_hide: 'none'})
const resetOrganTypeOther = (e, onChange) => {
set_organ_other_hide('none')
document.getElementById("organ_other").removeAttribute("required")
// Empty the value of the fields and trigger onChange
document.getElementById("organ_other").value = "";
onChange(e, "organ_other", "")
}

render() {
return (
//Sample Category
<>
<Form.Group className="mb-3" controlId="sample_category">
<Form.Label>Sample Category <span
className="required">* </span>
<OverlayTrigger
placement="top"
overlay={
<Popover>
<Popover.Body>
The category this sample belongs to.
</Popover.Body>
</Popover>
}
>
<QuestionCircleFill/>
</OverlayTrigger>
</Form.Label>
return (
//Sample Category
<>
<Form.Group className="mb-3" controlId="sample_category">
<Form.Label>Sample Category <span
className="required">* </span>
<OverlayTrigger
placement="top"
overlay={
<Popover>
<Popover.Body>
The category this sample belongs to.
</Popover.Body>
</Popover>
}
>
<QuestionCircleFill/>
</OverlayTrigger>
</Form.Label>

<Form.Select required aria-label="Sample Category"
onChange={e => {
this.handleSampleCategoryChange(e, this.props.onChange);
this.props.onChange(e, e.target.id, e.target.value)
}}
defaultValue={this.props.data.sample_category}>
<Form.Select required aria-label="Sample Category"
onChange={e => {
handleSampleCategoryChange(e, onChange);
onChange(e, e.target.id, e.target.value)
}}
defaultValue={data.sample_category}>
<option value="">----</option>
{Object.entries(sample_categories).map(sample_category => {
return (
<option key={sample_category[0]} value={sample_category[0]}>
{sample_category[1]}
</option>
);

})}
</Form.Select>
</Form.Group>

{/*Organ Type*/}
<Form.Group as={Row} className="mb-3" id="organ_group"
style={{display: organ_group_hide}}>
<Form.Label column sm="2">Organ Type <span
className="required">*</span></Form.Label>
<Col sm="6">
<Form.Select aria-label="Organ Type" id="organ" onChange={e => {
handleOrganChange(e, onChange);
onChange(e, e.target.id, e.target.value)
}}
defaultValue={data.organ}>
<option value="">----</option>
{Object.entries(this.props.sample_categories).map(sample_category => {
{Object.entries(ORGAN_TYPES).map(op => {
return (
<option key={sample_category[0]} value={sample_category[0]}>
{sample_category[1]}
<option key={op[0]} value={op[0]}>
{op[1]}
</option>
);

})}
</Form.Select>
</Form.Group>
</Col>
{/*Organ Type Other*/}
<Col sm="4">
<Form.Control style={{display: organ_other_hide}} type="text"
id="organ_other"
defaultValue={data.organ_other}
onChange={e => {
onChange(e, e.target.id, e.target.value)
}}
placeholder="Please specify"/>
</Col>
</Form.Group>
</>
)

{/*Organ Type*/}
<Form.Group as={Row} className="mb-3" id="organ_group"
style={{display: this.state.organ_group_hide}}>
<Form.Label column sm="2">Organ Type <span
className="required">*</span></Form.Label>
<Col sm="6">
<Form.Select aria-label="Organ Type" id="organ" onChange={e => {
this.handleOrganChange(e, this.props.onChange);
this.props.onChange(e, e.target.id, e.target.value)
}}
defaultValue={this.props.data.organ}>
<option value="">----</option>
{Object.entries(ORGAN_TYPES).map(op => {
return (
<option key={op[0]} value={op[0]}>
{op[1]}
</option>
);
}

})}
</Form.Select>
</Col>
{/*Organ Type Other*/}
<Col sm="4">
<Form.Control style={{display: this.state.organ_other_hide}} type="text"
id="organ_other"
defaultValue={this.props.data.organ_other}
onChange={e => {
this.props.onChange(e, e.target.id, e.target.value)
}}
placeholder="Please specify"/>
</Col>
</Form.Group>
</>
)
}
}
export default SampleCategory
34 changes: 31 additions & 3 deletions src/components/custom/entities/sample/Protocols.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,40 @@ export default class Protocols extends React.Component {
</tr>
</thead>
}

<tbody>
<tr>
<td><a href={getClickableLink(this.props.protocol_url)}
className="link_with_icon"><span
className="me-1">{this.props.protocol_url}</span> <BoxArrowUpRight/></a></td>
<td>
<span className={"title"}>DOI</span><br></br>
<a href={getClickableLink(this.props.protocol_url)}
className="link_with_icon" target="_blank"><span
className="me-1">{this.props.protocol_url}</span> <BoxArrowUpRight/></a>
</td>
</tr>

{this.state.protocol_data != null &&
<>
<tr>
<span className={"title"}>Authors</span><br></br>
<span>
{this.state.protocol_data.authors.map((author, index, array) => {
return (
<>
{author.name}
{index !== array.length - 1 ? <>, </> : <></>}
</>
);
})}
</span>
</tr>
<tr>
<td>
<span className={"title"}>Abstract</span><br></br>
<span>{JSON.parse(this.state.protocol_data.description).blocks[0].text}</span>
</td>
</tr>
</>
}
</tbody>
</Table>
</div>
Expand Down
25 changes: 25 additions & 0 deletions src/components/custom/js/addons/Ada.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Addon from './Addon'
import $ from 'jquery'

/**
* This adds web accessibility functionality to
* elements.
*/
class Ada extends Addon {
constructor(el, args) {
super(el, args)
this._el = this.el.data(`js-${this.app}`)
this.events()
}

events() {

this.el.on('keydown', `${this._el}`, ((e) => {
if (this.isEnter(e)) {
this.currentTarget(e).click()
}
}).bind(this));
}
}

export default Ada
4 changes: 3 additions & 1 deletion src/components/custom/js/addons/addons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Addon from './Addon'
import GoogleTagManager from './GoogleTagManager'
import AppModal from './AppModal'
import Facets from './Facets'
import Ada from './Ada'

/**
* JS functionality which enhance site functionality, not necessarily part of the core.
Expand All @@ -20,7 +21,8 @@ function addons(source, args= null) {
let apps = {
gtm: GoogleTagManager,
modal: AppModal,
facets: Facets
facets: Facets,
ada: Ada
}

setTimeout(() => {
Expand Down
Loading

0 comments on commit 2b00909

Please sign in to comment.