model-navigator-standalone/es/example.js

Standalone MDF graph model visualizer

import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.for-each.js";
import "core-js/modules/web.dom-collections.iterator.js";
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MDFReader } from 'mdf-reader';
import ModelNavigator, { loadMDF } from './components/ModelNavigator';
import { brandIconSrc, facetSections, facetFilters, tagAttributes, legendTag, annotationTags, mdfParseHooks } from './ICDCconfig.js';
const config = {
  brandIconSrc,
  facetSections,
  facetFilters,
  tagAttributes,
  legendTag,
  annotationTags,
  mdfParseHooks
};

// const mdf_urls = ['https://raw.githubusercontent.com/CBIIT/ccdi-model/main/model-desc/ccdi-model.yml',
//                   'https://raw.githubusercontent.com/CBIIT/ccdi-model/main/model-desc/ccdi-model-props.yml'];

// const mdf_urls = ['https://raw.githubusercontent.com/CBIIT/gdc-model/main/model-desc/gdc-model.yaml',
//                   'https://raw.githubusercontent.com/CBIIT/gdc-model/main/model-desc/gdc-model-props.yaml',
//                  'https://raw.githubusercontent.com/CBIIT/gdc-model/main/model-desc/gdc-model-terms.yaml']

const mdf_urls = ['https://raw.githubusercontent.com/CBIIT/icdc-model-tool/develop/model-desc/icdc-model.yml', 'https://raw.githubusercontent.com/CBIIT/icdc-model-tool/develop/model-desc/icdc-model-props.yml'];
function getModel() {
  return loadMDF(...mdf_urls).then(model => model);
}
mdfParseHooks.forEach(func => {
  MDFReader.add_parse_hook(func);
});
const model = await getModel(); // eslint-disable-line no-undef

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(/*#__PURE__*/React.createElement(React.StrictMode, null, /*#__PURE__*/React.createElement(ModelNavigator, {
  model: model,
  customConfig: config
})));