class ResultDetails extends React.Component {
buildEthiopiaHmisIndicatorResult() {
let result = '';
let dhis2Content = '';
if (this.props.matchingDhis2Results) {
let dhis2Indicators = this.props.matchingDhis2Results.map((currentDhis2Result) => {
return (<li className="dhis2result" key={this.props.result.id + currentDhis2Result.id}>{currentDhis2Result.code &&
<span className="code">{currentDhis2Result.code}</span>
} <span className="name">{currentDhis2Result.name}</span> <span className="description">{currentDhis2Result.description}</span><ul><li><span className="label">Numerator:</span> <span className="formula">{currentDhis2Result.numerator}</span> {currentDhis2Result.numeratorDescription &&
<span className="formula-description">({currentDhis2Result.numeratorDescription})</span>
}</li><li><span className="label">Denominator:</span> <span className="formula">{currentDhis2Result.denominator}</span> {currentDhis2Result.denominatorDescription &&
<span className="formula-description">({currentDhis2Result.denominatorDescription})</span>
}</li></ul></li>);
});
dhis2Content = (
<tbody>
<tr><td colSpan="2" className="table-separator">DHIS2 Metadata</td></tr>
<tr><th>DHIS2 Indicators</th><td><ul>{dhis2Indicators}</ul></td></tr>
</tbody>
);
} else {
dhis2Content = (
<tbody>
<tr><td colSpan="2" className="table-separator">DHIS2 Metadata</td></tr>
<tr><td colSpan="2"><em>No matching indicator found in DHIS2</em></td></tr>
</tbody>
);
}
result = (
<div>
<h4><span className="concept-id">{this.props.result.id}</span> <span className="concept-title">{this.props.result.display_name}</span></h4>
<table className="table table-striped refguide">
<tbody>
<tr><th>Definition</th><td>{this.getDescription('Definition')}</td></tr>
<tr><th>Numerator</th><td>{this.getAttribute('Numerator')}</td></tr>
<tr><th>Denominator</th><td>{this.getAttribute('Denominator')}</td></tr>
<tr><th>Multiplier</th><td>{this.getAttribute('Multiplier')}</td></tr>
<tr><th>Interpretation</th><td>{this.getDescription('Interpretation')}</td></tr>
<tr><th>Disaggregation</th><td>{this.getAttribute('Disaggregation')}</td></tr>
<tr><th>Primary Sources</th><td>{this.getAttribute('Primary Sources')}</td></tr>
<tr><th>Applicable Reporting Units</th><td>{this.getAttribute('Applicable Reporting Units')}</td></tr>
<tr><th>Reporting Frequency</th><td>{this.getAttribute('Reporting Frequency')}</td></tr>
</tbody>
{dhis2Content}
</table>
</div>
);
return result;
}
buildPepfarDataCatalogResult() {
let tableName = '';
let sourceDetails = getSourceDetails(this.props.selectedSource);
if (sourceDetails) {
tableName = (
<span className="concept-id">{sourceDetails.id} </span>
);
}
return (
<div>
<h4>{tableName} <span className="concept-title">{this.props.result.display_name}</span></h4>
<table className="table table-striped refguide">
<tbody>
<tr><th>Datatype</th><td>{this.props.result.datatype}</td></tr>
<tr><th>Description</th><td>{this.getDescription('Fully Specified')}</td></tr>
<tr><th>Field Order</th><td>{this.getAttribute('field_order')}</td></tr>
<tr><th>Field Required</th><td>{this.getAttribute('required')}</td></tr>
</tbody>
</table>
</div>
);
}
buildEthiopiaNcodResult() {
let mappings = '';
if (this.props.result.mappings) {
mappings = (
<ul>
{this.props.result.mappings.map((mapping) =>
<li key={mapping.url}>{mapping.from_source_owner}/{mapping.from_source_name}/{mapping.from_concept_code}: {mapping.from_concept_name} [{mapping.map_type}] {mapping.to_source_owner}/{mapping.to_source_name}/{mapping.to_concept_code}: {mapping.to_concept_name}</li>
)}
</ul>
);
} else {
mappings = <span>None</span>;
}
return (
<div>
<h4><span className="concept-id">{this.props.result.id}</span> <span className="concept-title">{this.props.result.display_name}</span></h4>
<table className="table table-striped refguide">
<tbody>
<tr><th className="field-name">Description</th><td>{this.getDescription('Description')}</td></tr>
<tr><th>Mappings</th><td>{mappings}</td></tr>
<tr><th>ICD-10 Block / Chapter</th><td>{this.getAttribute('ICD10Block')}: {this.getAttribute('ICD10Chapter')}</td></tr>
</tbody>
</table>
</div>
);
}
buildDefaultResult() {
let sourceDetails = getSourceDetails(this.props.selectedSource);
// TITLE
let title_links = '';
if (sourceDetails) {
let url_web = sourceDetails.base_web_url + this.props.result.url;
let url_api = sourceDetails.base_api_url + this.props.result.url;
title_links = (
<span className="float-right external-concept-links">View in: <a href={url_web} target="_blank">OCL</a> <a href={url_api} target="_blank">JSON</a></span>
)
}
title = (
<h4><span className="concept-id">{this.props.result.id}</span> <span className="concept-title">{this.props.result.display_name}</span>{this.props.result.external_id &&
<span className="external-id">[External ID: {this.props.result.external_id}]</span>
}
{title_links}
</h4>
)
// CORE ATTRIBUTES
let core = (
<tbody>
<tr><th className="field-name">Class</th><td>{this.props.result.concept_class}</td></tr>
<tr><th className="field-name">Datatype</th><td>{this.props.result.datatype}</td></tr>
</tbody>
);
// NAMES
let names = (
<ul>
{this.props.result.names.map((name) =>
<li key={name.uuid}><em>[{name.locale}]</em> {name.name} [{name.name_type}]</li>
)}
</ul>
);
// DESCRIPTIONS
let descriptions = '';
if (this.props.result.descriptions) {
descriptions = (
<ul>
{this.props.result.descriptions.map((description) =>
<li key={description.uuid}><em>[{description.locale}]</em> {description.description} [{description.description_type}]</li>
)}
</ul>
);
}
// MAPPINGS
let mappings = '';
if (this.props.result.mappings) {
mappings = (
<ul>
{this.props.result.mappings.map((mapping) =>
<li key={mapping.url}>{mapping.from_source_owner}/{mapping.from_source_name}/{mapping.from_concept_code}: {mapping.from_concept_name} [{mapping.map_type}] {mapping.to_source_owner}/{mapping.to_source_name}/{mapping.to_concept_code}: {mapping.to_concept_name}</li>
)}
</ul>
);
} else {
mappings = <span>None</span>;
}
// ATTRIBUTES
let attributes = '';
let attribute_list = '';
if (this.props.result.extras) {
attribute_list = Object.keys(this.props.result.extras).map((key) =>
<tr key={key}><th>{key}</th><td>{(typeof(this.props.result.extras[key]) == 'object') ? JSON.stringify(this.props.result.extras[key]) : this.props.result.extras[key]}</td></tr>
);
attributes = (<tbody><tr><td colSpan="2" className="table-separator">Attributes</td></tr>{attribute_list}</tbody>);
}
// AUDIT
let audit = (<div className="audit muted">Created on {this.props.result.created_on}, Updated on {this.props.result.updated_on} by {this.props.result.version_created_by}</div>
);
return (
<div>
{title}
{audit}
<table className="table table-striped refguide">
{core}
<tbody>
<tr><th className="field-name">Names/Synonyms</th><td>{names}</td></tr>
<tr><th className="field-name">Descriptions</th><td>{descriptions}</td></tr>
<tr><th className="field-name">Mappings</th><td>{mappings}</td></tr>
</tbody>
{attributes}
</table>
</div>
);
}
render() {
if (this.props.result) {
let resultOutput = '';
let sourceDetails = getSourceDetails(this.props.selectedSource);
if (sourceDetails && sourceDetails.renderer && this[sourceDetails.renderer]) {
resultOutput = this[sourceDetails.renderer]();
} else {
resultOutput = this.buildDefaultResult();
}
return (<div>{resultOutput}</div>);
} else {
return (<div className="no-results">Select a search result...</div>);
}
}
getDescription(tag) {
let returnVal = '';
if (tag && this.props.result && this.props.result.descriptions) {
this.props.result.descriptions.forEach((description) => {
if (description.description_type == tag) {
returnVal = description.description;
}
});
}
return returnVal;
}
getAttribute(key) {
if (key && this.props.result && this.props.result.extras && this.props.result.extras[key]) {
return this.props.result.extras[key];
}
return ''
}
}
class ResultCategoryRow extends React.Component {
render() {
const category = this.props.category;
return (
<li>{category}</li>
);
}
}
class ResultRow extends React.Component {
constructor(props) {
super(props);
this.handleLinkClick = this.handleLinkClick.bind(this);
}
handleLinkClick(e) {
this.props.onLinkClick(this.props.result);
}
render() {
return (
<a href="#" className="list-group-item list-group-item-action" onClick={this.handleLinkClick}><small className="muted">{this.props.result.id}</small> <span>{this.props.result.display_name}</span></a>
);
}
}
class ResultsTable extends React.Component {
constructor(props) {
super(props);
this.handleLinkClick = this.handleLinkClick.bind(this);
}
handleLinkClick(result) {
this.props.onLinkClick(result);
}
render() {
const filterText = this.props.filterText
const rows = [];
//let lastCategory = null;
this.props.results.forEach((result) => {
/*
if (result.category !== lastCategory) {
rows.push(
<ResultCategoryRow
category={result.extras.HmisCategory1}
key={'category:'+result.id+result.extras.HmisCategory1} />
);
}
*/
rows.push(
<ResultRow
result={result}
key={result.url}
onLinkClick={this.handleLinkClick}
/>
);
//lastCategory = result.category;
});
return <div className="list-group list-group-flush results">{rows}</div>;
}
}
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
}
handleFilterTextChange(e) {
this.props.onFilterTextChange(e.target.value);
}
render() {
return (
<input
type="search"
className="form-control"
autoComplete="off"
placeholder="Search..."
value={this.props.filterText}
onChange={this.handleFilterTextChange}
/>
);
}
}
class DictionarySelector extends React.Component {
constructor(props) {
super(props);
this.handleSourceChange = this.handleSourceChange.bind(this);
}
handleSourceChange(e) {
this.props.onSourceChange(e.target.value);
}
render() {
let sourceOptions = this.props.sources.map((source) =>
<option key={source.id} value={source.id}>{source.name}</option>
);
return (
<div className="form-group">
<label htmlFor="dictionary"><strong>Source:</strong></label>
<select className="form-control" id="dictionary" value={this.props.selectedSource} onChange={this.handleSourceChange}>{sourceOptions}</select>
</div>
);
}
}
class FilterableResultsTable extends React.Component {
constructor(props) {
super(props);
this.state = {
filterText: '',
results: [],
selectedSource: appConfig.defaultSource,
selectedResult: null,
dhis2Result: null,
matchingDhis2Results: null,
};
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
this.handleLinkClick = this.handleLinkClick.bind(this);
this.handleSourceChange = this.handleSourceChange.bind(this);
}
handleSourceChange(selectedSource) {
source = getSourceDetails(selectedSource);
this.setState({
selectedSource: selectedSource,
selectedResult: null,
dhis2Result: null,
matchingDhis2Results: null,
filterText: '',
results: [],
}, () => {this.handleSearch('')});
}
handleLinkClick(result) {
let selectedSourceDetails = getSourceDetails(this.state.selectedSource);
let dhis2Result = null;
let matchingDhis2Results = null;
if (selectedSourceDetails && selectedSourceDetails.fetch_dhis2_results) {
matchingDhis2Results = this.getMatchingDhis2Results(result.id);
dhis2Result = this.getDhis2Result(result.id);
console.log(dhis2Result);
console.log(matchingDhis2Results);
}
this.setState({
selectedResult: result,
});
this.setState({
dhis2Result: dhis2Result,
matchingDhis2Results: matchingDhis2Results,
});
}
handleFilterTextChange(filterText) {
this.setState({
filterText: filterText,
});
this.handleSearch(filterText);
}
componentDidMount() {
this.handleSearch('');
}
getMatchingDhis2Results(hmis_code) {
let filteredResults = this.props.dhis2Results.filter((currentDhis2Result) => {
return (currentDhis2Result.hmis_code && currentDhis2Result.hmis_code == hmis_code);
});
console.log(filteredResults);
return filteredResults;
}
getDhis2Result(hmis_code) {
let dhis2Result = null;
this.props.dhis2Results.forEach((currentDhis2Result) => {
if (currentDhis2Result.hmis_code && currentDhis2Result.hmis_code == hmis_code) {
dhis2Result = currentDhis2Result;
}
});
return dhis2Result;
}
handleSearch = (criteria) => {
let sourceDetails = getSourceDetails(this.state.selectedSource);
let url = sourceDetails.url + 'concepts/?q=' + criteria + '*&verbose=true&limit=50&includeMappings=true&includeInverseMappings=true';
fetch(url).
then(response => response.json()).then((results) => {
console.log(url)
console.log(results);
this.setState({
results: results
});
});
};
render() {
return (
<div className="container-fluid refguide">
<div className="row flex-xl-nowrap">
<div className="col-12 col-md-3 col-xl-3 sidebar">
<div className="logo"><img src={appConfig.logoUrl} height="60"/>
<h1>{appConfig.title}</h1>
</div>
<form className="search">
<DictionarySelector
sources={this.props.sources}
selectedSource={this.state.selectedSource}
onSourceChange={this.handleSourceChange}
/>
<SearchBar
selectedSource={this.state.selectedSource}
filterText={this.state.filterText}
onFilterTextChange={this.handleFilterTextChange}
/>
</form>
<ResultsTable
results={this.state.results}
selectedSource={this.state.selectedSource}
filterText={this.state.filterText}
onLinkClick={this.handleLinkClick}
/>
</div>
<div className="col-12 col-md-9 col-xl-9 content">
<ResultDetails
selectedSource={this.state.selectedSource}
result={this.state.selectedResult}
dhis2Result={this.state.dhis2Result}
matchingDhis2Results={this.state.matchingDhis2Results}
/>
</div>
</div>
</div>
);
}
}
let appConfig = {
logoUrl: 'https://openconceptlab.org/static/images/ocl-logo.png',
title: (<span>Metadata Browser</span>),
defaultSource: 'HMIS-Indicators-2017',
sources: [
{'id': 'HMIS-Indicators-2017', 'name': 'Ethiopia HMIS Indicators, 2017 Edition', 'url': 'https://api.openconceptlab.org/orgs/EthiopiaNHDD/sources/HMIS-Indicators-2017/', 'fetch_dhis2_results': true, 'renderer': 'buildEthiopiaHmisIndicatorResult', 'base_api_url': 'https://api.openconceptlab.org', 'base_web_url': 'https://openconceptlab.org'},
{'id': 'NCoD', 'name': 'Ethiopia National Classification of Diseases (NCoD)', 'url': 'https://api.openconceptlab.org/orgs/EthiopiaNHDD/sources/NCoD/', 'renderer': 'buildEthiopiaNcodResult', 'base_api_url': 'https://api.openconceptlab.org', 'base_web_url': 'https://openconceptlab.org'},
{'id': 'CIEL', 'name': 'Columbia International eHealth Laboratory (CIEL)', 'url': 'https://api.openconceptlab.org/orgs/CIEL/sources/CIEL/', 'base_api_url': 'https://api.openconceptlab.org', 'base_web_url': 'https://openconceptlab.org'},
{'id': 'MER', 'name': 'DATIM MER Indicators', 'url': 'https://api.staging.openconceptlab.org/orgs/PEPFAR/sources/MER/', 'base_api_url': 'https://api.staging.openconceptlab.org', 'base_web_url': 'https://staging.openconceptlab.org'},
{'id': 'SIMS', 'name': 'DATIM SIMS', 'url': 'https://api.staging.openconceptlab.org/orgs/PEPFAR/sources/SIMS/', 'base_api_url': 'https://api.staging.openconceptlab.org', 'base_web_url': 'https://staging.openconceptlab.org'},
{'id': 'pepfar.data.budget-expenditure-processing', 'name': 'PDC: Budget Expenditure - Processing', 'url': 'https://api.staging.openconceptlab.org/orgs/PEPFAR-Data-Catalog/sources/budget-expenditure-processing/', 'renderer': 'buildPepfarDataCatalogResult', 'base_api_url': 'https://api.staging.openconceptlab.org', 'base_web_url': 'https://staging.openconceptlab.org'},
{'id': 'pepfar.data.budget-expenditure-logs', 'name': 'PDC: Budget Expenditure - Logs', 'url': 'https://api.staging.openconceptlab.org/orgs/PEPFAR-Data-Catalog/sources/budget-expenditure-logs/', 'renderer': 'buildPepfarDataCatalogResult', 'base_api_url': 'https://api.staging.openconceptlab.org', 'base_web_url': 'https://staging.openconceptlab.org'},
{'id': 'VMMC-Demo', 'name': 'PEPFAR VMMC-CIRC Demo', 'url':'https://api.staging.openconceptlab.org/users/paynejd/sources/MER-Indicator-Demo/', 'base_api_url': 'https://api.staging.openconceptlab.org', 'base_web_url': 'https://staging.openconceptlab.org'}
]
}
function getSourceDetails(sourceId) {
return appConfig.sources.find((source) => {
return (source.id == sourceId);
});
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
dhis2Results: null,
}
}
componentDidMount() {
let url = 'https://gist.githubusercontent.com/paynejd/3fdeb66d6caa58372c24dbccef6dc82b/raw/c6992e1048b0d8b1ab8b2465b54a8de4cb0e1b9a/et_hmis_indicators_20180531_hmis_code.json';
fetch(url).
then(response => response.json()).then((allDhis2Results) => {
//console.log(allDhis2Results.indicators);
//console.log(allDhis2Results.indicators.length);
this.setState({
dhis2Results: allDhis2Results.indicators
});
});
}
render() {
return <FilterableResultsTable dhis2Results={this.state.dhis2Results} sources={appConfig.sources} />;
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
!
