Bento UI Building Blocks is a NPM library in an attempt to reuse the shared UI components across NCI data commons frameworks.
npm install model-explorerBento UI Building Blocks is a NPM library in an attempt to reuse the shared UI components across NCI data commons frameworks.
Use the package manager npm to install Bento UI Building Blocks.
``bash`
npm install model-explorer
store
import { createStore, applyMiddleware, combineReducers } from 'redux';
import ReduxThunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { ddgraph, moduleReducers as submission, versionInfo } from 'model-explorer';
import layout from '../components/Layout/LayoutState';
import stats from '../components/Stats/StatsState';const reducers = {
ddgraph,
versionInfo,
submission,
layout,
stats,
};
const loggerMiddleware = createLogger();
const store = createStore(
combineReducers(reducers),
applyMiddleware(ReduxThunk, loggerMiddleware),
);
store.injectReducer = (key, reducer) => {
reducers[key] = reducer;
store.replaceReducer(combineReducers(reducers));
};
export default store;
`
$3
react
import React from 'react';
import { ReduxDataDictionary, getModelExploreData } from 'model-explorer';
import store from '../../store';async function getData() {
const response = await getModelExploreData();
Promise.all(
[
store.dispatch({
type: 'RECEIVE_DICTIONARY',
payload: { data: response.data },
}),
store.dispatch({
type: 'RECEIVE_VERSION_INFO',
data: response.version,
}),
],
);
}
const ModelExplorer = () => {
getData();
return (
);
};
export default ModelExplorer;
`Scripts Available
$3
Runs the app in the development mode.
Open http://localhost:9001 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
$3
Builds the app for production to the
and es folder.
It correctly bundles React in production mode and optimizes the build for the best performance.Your app is ready to be deployed!
``