model-navigator-standalone
Version:
Standalone MDF graph model visualizer
414 lines (411 loc) • 9.07 kB
JavaScript
/**
* table icon import
*/
import studyIconTable from './assets/icons/Table/study.svg';
import caseIconTable from './assets/icons/Table/case.svg';
import clinicalTrialIconTable from './assets/icons/Table/clinical_trial.svg';
import adminIconTable from './assets/icons/Table/administrative.svg';
import biospecimenIconTable from './assets/icons/Table/biospecimen.svg';
import analysisIconTable from './assets/icons/Table/analysis.svg';
import dataFileIconTable from './assets/icons/Table/data_file.svg';
import clinicalIconTable from './assets/icons/Table/clinical.svg';
/**
* legend icon import
*/
import studyIconLegend from './assets/icons/Legend/lg_study.svg';
import caseIconLegend from './assets/icons/Legend/lg_case.svg';
import clinicalTrialIconLegend from './assets/icons/Legend/lg_clinical_trial.svg';
import adminIconLegend from './assets/icons/Legend/lg_administrative.svg';
import biospecimenIconLegend from './assets/icons/Legend/lg_biospecimen.svg';
import analysisIconLegend from './assets/icons/Legend/lg_analysis.svg';
import dataFileIconLegend from './assets/icons/Legend/lg_data_file.svg';
import clinicalIconLegend from './assets/icons/Legend/lg_clinical.svg';
/***
* graph icon import
*/
import studyIconGraph from "./assets/icons/Graph/study.svg";
import caseIconGraph from "./assets/icons/Graph/case.svg";
import clinicalTrialIconGraph from "./assets/icons/Graph/clinical_trial.svg";
import adminIconGraph from "./assets/icons/Graph/administrative.svg";
import biospecimenIconGraph from "./assets/icons/Graph/biospecimen.svg";
import analysisIconGraph from "./assets/icons/Graph/analysis.svg";
import dataFileIconGraph from "./assets/icons/Graph/data_file.svg";
import clinicalIconGraph from "./assets/icons/Graph/clinical.svg";
import IconDefault from './assets/icons/icon_default.svg';
export const pageTitle = 'Data Model Navigator';
export const brandIconSrc = 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/4a3fb8e201e6ba2a858d7ec1226d2fd6ea2b5298/icdc/images/svgs/Icon-DMNav.85x85.svg';
export const mdfParseHooks = [
// add inclusion and uiDisplay tags to properties:
function () {
const translate = {
"Yes": "required",
"No": "optional",
"Preferred": "preferred"
};
this.props().forEach(prop => {
let val = translate[prop.is_required] || "optional";
this.updateTags("Inclusion", val, prop);
val = prop.tags().filter(t => t[0] == 'Labeled').length > 0 ? "yes" : "no";
this.updateTags("UI Display", val, prop);
});
return this;
}];
export const facetSections = [
//facetSectionProps
{
section: 'Filter By Nodes',
color: '#0D71A3',
checkBoxColorsOne: '#E3F4FD',
checkBoxColorsTwo: '#0d71a3',
checkBoxBorderColor: '#0D71A3',
height: '7px',
isExpanded: true
}, {
section: 'Filter By Relationship',
color: '#FF9742',
checkBoxColorsOne: '#FF9742',
checkBoxColorsTwo: '#FF9742',
height: '7px',
isExpanded: true
}, {
section: 'Filter By Property',
color: '#94C0EC',
checkBoxColorsOne: '#E3F4FD',
checkBoxColorsTwo: '#0d71a3',
checkBoxBorderColor: '#0D71A3',
height: '7px',
isExpanded: true
}];
export const facetFilters = [{
tag: 'Category',
groupName: 'Category',
datafield: 'category',
section: 'Filter By Nodes',
tooltip: 'category',
type: {
entity: 'node',
tag: 'Category'
},
show: true,
checkboxItems: [{
name: 'Administrative',
tag: 'Category',
value: 'administrative',
isChecked: false,
group: 'category'
}, {
name: 'Analysis',
tag: 'Category',
value: 'analysis',
isChecked: false,
group: 'category'
}, {
name: 'Biospecimen',
tag: 'Category',
value: 'biospecimen',
isChecked: false,
group: 'category'
}, {
name: 'Case',
tag: 'Category',
value: 'case',
isChecked: false,
group: 'category'
}, {
name: 'Clinical',
tag: 'Category',
value: 'clinical',
isChecked: false,
group: 'category'
}, {
name: 'Clinical_Trial',
tag: 'Category',
value: 'clinical_trial',
isChecked: false,
group: 'category'
}, {
name: 'Data_File',
tag: 'Category',
value: 'data_file',
isChecked: false,
group: 'category'
}, {
name: 'Study',
tag: 'Category',
value: 'study',
isChecked: false,
group: 'category'
}]
}, {
tag: 'Assignment',
groupName: 'Assignment',
datafield: 'assignment',
section: 'Filter By Nodes',
tooltip: 'assignment',
type: {
entity: 'node',
tag: 'Assignment'
},
show: true,
checkboxItems: [{
name: 'Core',
tag: 'Assignment',
value: 'core',
isChecked: false,
group: 'assignment'
}, {
name: 'Extended',
tag: 'Assignment',
value: 'extended',
isChecked: false,
group: 'assignment'
}]
}, {
tag: 'Class',
groupName: 'Class',
datafield: 'class',
section: 'Filter By Nodes',
tooltip: 'class',
type: {
entity: 'node',
tag: 'Class'
},
show: true,
checkboxItems: [{
name: 'Primary',
tag: 'Class',
value: 'primary',
isChecked: false,
group: 'class'
}, {
name: 'Secondary',
tag: 'Class',
value: 'secondary',
isChecked: false,
group: 'class'
}]
}, {
tag: 'Inclusion',
groupName: 'Inclusion',
datafield: 'inclusion',
section: 'Filter By Property',
tooltip: 'inclusion',
type: {
entity: 'prop',
tag: 'Inclusion'
},
show: true,
checkboxItems: [{
name: 'Optional',
tag: 'Inclusion',
value: 'optional',
isChecked: false,
group: 'optional'
}, {
name: 'Preferred',
tag: 'Inclusion',
value: 'preferred',
isChecked: false,
group: 'preferred'
}, {
name: 'Required',
tag: 'Inclusion',
value: 'required',
isChecked: false,
group: 'required'
}]
}, {
tag: 'UI Display',
groupName: 'UI Display',
datafield: 'uiDisplay',
section: 'Filter By Property',
tooltip: 'inclusion',
type: {
entity: 'prop',
tag: 'UI Display'
},
show: true,
checkboxItems: [{
name: 'no',
tag: 'UI Display',
value: 'no',
isChecked: false,
group: 'no'
}, {
name: 'yes',
tag: 'UI Display',
value: 'yes',
isChecked: false,
group: 'yes'
}]
}];
export const legendTag = 'Category';
export const annotationTags = ['Assignment', 'Class'];
export const tagAttributes = [
// nodeCategoriesList, graphNodeCategoryList, tableNodeCategoryList, legendNodeCategoryList
{
tag: 'Category',
value: 'administrative',
node: {
color: '#9C2E1F',
background: '#691706'
},
graph: {
icon: adminIconGraph,
color: '#9B2C1F'
},
legend: {
icon: adminIconLegend,
color: '#9B2C1F'
},
table: {
color: '#9B2C1F',
icon: adminIconTable
}
}, {
tag: 'Category',
value: 'study',
node: {
color: '#9775FF',
background: '#4D31A2'
},
graph: {
icon: studyIconGraph,
color: '#AD91FF'
},
legend: {
icon: studyIconLegend,
color: '#AD91FF'
},
table: {
icon: studyIconTable,
color: '#AD91FF'
}
}, {
tag: 'Category',
value: 'clinical_trial',
node: {
color: '#00A0BA',
background: '#043F55'
},
graph: {
icon: clinicalTrialIconGraph,
color: '#1C75BC'
},
legend: {
icon: clinicalTrialIconLegend,
color: '#1C75BC'
},
table: {
icon: clinicalTrialIconTable,
color: '#1C75BC'
}
}, {
tag: 'Category',
value: 'case',
node: {
color: '#FF7E14',
background: '#672900'
},
graph: {
icon: caseIconGraph,
color: '#FF7F15'
},
legend: {
icon: caseIconLegend,
color: '#FF7F15'
},
table: {
icon: caseIconTable,
color: '#FF7F15'
}
}, {
tag: 'Category',
value: 'biospecimen',
node: {
color: '#00785A',
background: '#063126'
},
graph: {
icon: biospecimenIconGraph,
color: '#28AE60'
},
legend: {
icon: biospecimenIconLegend,
color: '#28AE60'
},
table: {
icon: biospecimenIconTable,
color: '#28AE60'
}
}, {
tag: 'Category',
value: 'clinical',
node: {
color: '#1C75BB',
background: '#073A61'
},
graph: {
icon: clinicalIconGraph,
color: '#05B8EE'
},
legend: {
icon: clinicalIconLegend,
color: '#05B8EE'
},
table: {
icon: clinicalIconTable,
color: '#05B8EE'
}
}, {
tag: 'Category',
value: 'data_file',
node: {
color: '#00AC0E',
background: '#023806'
},
graph: {
icon: dataFileIconGraph,
color: '#7EC500'
},
legend: {
icon: dataFileIconLegend,
color: '#7EC500'
},
table: {
icon: dataFileIconTable,
color: '#7EC500'
}
}, {
tag: 'Category',
value: 'metadata_file',
node: {
color: '#F4B940'
},
graph: {
color: '#F4B940'
}
}, {
tag: 'Category',
value: 'analysis',
node: {
color: '#B533A9',
background: '#6F0065'
},
graph: {
icon: analysisIconGraph,
color: '#FF7ABC'
},
legend: {
icon: analysisIconLegend,
color: '#FF7ABC'
},
table: {
icon: analysisIconTable,
color: '#FF7ABC'
}
}];
export const defaultCategory = {
icon: IconDefault,
color: '#9B9B9B'
};