Semantics FE catalog integration

package.json

@@ -26,6 +26,7 @@
     "react-autosize-textarea": "^0.4.8",
     "react-autosuggest": "^9.3.1",
     "react-chartjs": "^0.8.0",
+    "react-collapsible": "^2.2.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datepicker": "^1.2.2",
     "react-dates": "^16.3.6",
@@ -59,7 +60,7 @@
     "react-through": "^1.1.0",
     "react-timestamp": "^4.3.1",
     "react-transition-group": "^2.2.1",
-    "reactstrap": "^4.8.0",
+    "reactstrap": "^5.0.0-beta",
     "recharts": "^1.0.0-alpha.4",
     "redux": "^3.7.0",
     "redux-file-upload": "0.0.18",

src/actions.js

@@ -4,8 +4,6 @@ import { serviceurl } from './config/serviceurl.js'
 // MOCK
 //import page from './data/dataset'
 //import det from './data/datasetdetail'
-import ont from './data/ontologies'
-import voc from './data/vocabulary'
 import settings from './data/settings'
 
 export const REQUEST_DATASETS = 'REQUEST_DATASETS'
@@ -29,8 +27,6 @@ export const RECEIVE_RESET_ERROR = 'RECEIVE_RESET_ERROR'
 export const RECEIVE_ACTIVATION = 'RECEIVE_ACTIVATION'
 export const RECEIVE_ACTIVATION_ERROR = 'RECEIVE_ACTIVATION_ERROR'
 export const RECEIVE_ADD_DATASET = 'RECEIVE_ADD_DATASET'
-export const RECEIVE_ONTOLOGIES = 'RECEIVE_ONTOLOGIES'
-export const RECEIVE_VOCABULARY = 'RECEIVE_VOCABULARY'
 export const RECEIVE_PROPERTIES = 'RECEIVE_PROPERTIES'
 export const REQUEST_PROPERTIES = 'REQUEST_PROPERTIES'
 export const REQUEST_REGISTRATION = 'REQUEST_REGISTRATION'
@@ -195,29 +191,6 @@ export function receiveLogin(response) {
   }
 }
 
-function receiveOntologies(response) {
-  return {
-      type: RECEIVE_ONTOLOGIES,
-      //ontologies: response,
-      ontologies: ont,
-      error: '',
-      receivedAt: Date.now(),
-      ope: 'RECEIVE_ONTOLOGIES'
-  }
-}
-
-function receiveVocabulary(response) {
-  return {
-      type: RECEIVE_VOCABULARY,
-      //vocabulary: response,
-      vocabulary: voc,
-      ontologies: ont,
-      error: '',
-      receivedAt: Date.now(),
-      ope: 'RECEIVE_VOCABULARY'
-  }
-}
-
 function receiveOrganization(response) {  
   return {
       type: RECEIVE_ORGANIZATION,
@@ -1061,44 +1034,6 @@ function fetchDatasetDetail(datasetname, query, isPublic) {
 
 /******************************************************************************* */
 
-export function loadOntologies() {
-  console.log('Load Ontologies');
-  /*var url = 'http://localhost:3001/catalog-manager/v1/ontologies';  
-  return dispatch => {
-      return fetch(url, {
-        method: 'GET',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        }
-      })
-        .then(response => response.json())
-        .then(json => dispatch(receiveOntologies(json)))
-    }*/
-    return dispatch => {
-      dispatch(receiveOntologies(undefined));
-    }
-  }
-
-  export function loadVocabulary() {
-    console.log('Load Vocabulary');
-    /*var url = 'http://localhost:3001/catalog-manager/v1/ontologies';  
-    return dispatch => {
-        return fetch(url, {
-          method: 'GET',
-          headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json'
-          }
-        })
-          .then(response => response.json())
-          .then(json => dispatch(receiveOntologies(json)))
-      }*/
-      return dispatch => {
-        dispatch(receiveVocabulary(undefined));
-      }
-    }
-
     export function getSchema(filesToUpload, typeFile) {
       console.log('getSchema'); 
       var url = serviceurl.apiURLDatiGov + "/infer/kylo/" + typeFile

src/components/Sidebar/Sidebar.js

@@ -217,11 +217,22 @@ class Sidebar extends Component {
               <li className="nav-title text-secondary">
                 INFO
               </li>
-              <li className="nav-item" onClick={(e) => {
-                e.preventDefault();
-                document.body.classList.toggle('sidebar-mobile-show');
-              }}>
-                <NavLink to={'/private/vocabulary/list'} className="nav-link" activeClassName="nav-link-primary"><i className="fa fa-book text-secondary"></i> Dizionari e standard</NavLink>
+              <li className="nav-item nav-dropdown b-r-1">
+                <a className="nav-link nav-link-light nav-dropdown-toggle" onClick={this.handleClick.bind(this)}><i className="fa fa-sitemap fa-lg text-secondary"></i> Semantica</a>
+                <ul className="nav-dropdown-items bg-light">
+                  <li className="nav-item" onClick={(e) => {
+                    e.preventDefault();
+                    document.body.classList.toggle('sidebar-mobile-show');
+                  }}>
+                    <NavLink to={'/private/ontologies'} className="nav-link" activeClassName="nav-link-primary"><i className="fas fa-book fa-lg text-secondary" /> Ontologie</NavLink>
+                  </li>
+                  <li className="nav-item" onClick={(e) => {
+                    e.preventDefault();
+                    document.body.classList.toggle('sidebar-mobile-show');
+                  }}>
+                    <NavLink to={'/private/vocabularies'} className="nav-link" activeClassName="nav-link-primary"><i className="fas fa-book fa-lg text-secondary" /> Vocabolari</NavLink>
+                  </li>
+                </ul>
               </li>
               <li className="nav-item" onClick={(e) => {
                 e.preventDefault();

src/containers/App/App.js

@@ -94,8 +94,10 @@ class App extends Component {
             <Route path="/private/dashboard" name="Dashboard" component={Full} />
             <Route path="/private/widget" name="Widget" component={Full} />
             <Route path="/private/ingestionwizzard" name="Ingestion" component={Full} />
-            <Route path="/private/ontologies" name="Ontologies" component={Full} />
-            <Route path="/private/vocabulary" name="Vocabulary" component={Full} />
+            <Route path="/private/ontologies" name="Ontologies" exact component={Full} />
+            <Route path="/private/ontologies/:filter" name="Ontology" component={Full} />
+            <Route path="/private/vocabularies" name="Vocabularies" exact component={Full} />
+            <Route path="/private/vocabularies/:filter" name="Vocabulary" component={Full} />
             <Route exact path="/private/dataset" name="Dataset" component={Full} />
             <Route exact path="/private/dataset_old" name="Dataset" component={Full} />
             {<Route exact path="/private/search" name="Search" component={Full} />}

src/containers/Full/Full.js

@@ -19,8 +19,6 @@ import Aside from '../../components/Aside/';
 import Footer from '../../components/Footer/';
 import Home from '../../views/Home/Home';
 import IngestionWizard from '../../views/IngestionWizard/';
-import Ontologies from '../../views/Ontologies/';
-import Vocabulary from '../../views/Vocabulary/';
 import Dashboard from '../../views/Dashboard/';
 import Dataset from '../../views/Dataset/';
 import DatasetList from '../../views/DataseList/';
@@ -35,6 +33,12 @@ import Crea from "../../views/Crea/Crea";
 import Widgets from '../../views/Widgets/Widgets';
 import SearchBar from '../../components/SearchBar/SearchBar';
 
+// semantic's containers imports
+import Vocabularies from '../../semantics/containers/Vocabularies.js'
+import Vocabulary from '../../semantics/containers/Vocabulary.js'
+import Ontologies from '../../semantics/containers/Ontologies.js'
+import Ontology from '../../semantics/containers/Ontology.js'
+
 function PrivateRoute({ component: Component, authed, ...rest }) {
   return (
     <Route
@@ -571,8 +575,10 @@ class Full extends Component {
               <Switch>
                 <PrivateRoute authed={this.state.authed} path="/private/home" name="Home" exact component={Home}/>
                 <PrivateRouteEditor authed={this.state.authed} role={role} path="/private/ingestionwizzard" name="Forms" component={IngestionWizard} history={history} />
-                <PrivateRoute authed={this.state.authed} path="/private/ontologies" name="Ontologies" component={Ontologies} />
-                <PrivateRoute authed={this.state.authed} path="/private/vocabulary" name="Vocabulary" component={Vocabulary} />
+                <PrivateRoute authed={this.state.authed} path="/private/ontologies/" name="Ontologies" exact component={Ontologies} />
+                <PrivateRoute authed={this.state.authed} path="/private/ontologies/:filter" name="Ontology" component={Ontology} />
+                <PrivateRoute authed={this.state.authed} path="/private/vocabularies" name="Vocabularies" exact component={Vocabularies} />
+                <PrivateRoute authed={this.state.authed} path="/private/vocabularies/:filter" name="Vocabulary" component={Vocabulary} />
                 <PrivateRoute authed={this.state.authed} path="/private/dashboard" name="Dashboard manager" component={DashboardManager} />
                 <PrivateRoute authed={this.state.authed} path="/private/userstory" name="User Story" component={UserStory} />
                 <PrivateRoute authed={this.state.authed} path="/private/widget" name="Widget" component={Widgets} />

src/reducers.js

@@ -16,8 +16,6 @@ import {
   RECEIVE_ACTIVATION,
   RECEIVE_ACTIVATION_ERROR,
   RECEIVE_ADD_DATASET,
-  RECEIVE_ONTOLOGIES,
-  RECEIVE_VOCABULARY,
   RECEIVE_PROPERTIES,
   REQUEST_PROPERTIES,
   REQUEST_REGISTRATION,
@@ -35,6 +33,16 @@ import {
   dataApplicationsReducer
 } from './views/Public/DataApplication/reducers/dataApplicationsReducer'
 
+// semantic's reducers
+import {
+  ontListReducer,
+  ontDetailReducer
+} from "./semantics/reducers/ontologiesReducers";
+import {
+  vocListReducer,
+  vocDetailReducer
+} from "./semantics/reducers/vocabulariesReducers";
+
 //Object.assign({}, state, .. create a new copy of the state
 function datasets(state = { isFetching: false, didInvalidate: false, items: [], dataset: null, ope: '' }, action
 ) {
@@ -201,17 +209,6 @@ function userReducer(state = {}, action) {
   }
 }
 
-function ontologiesReducer(state = {}, action) {
-  switch (action.type) {
-    case RECEIVE_ONTOLOGIES:
-      return Object.assign({}, state, { 'ont': { 'ontologies': action.ontologies, 'error': action.error } })
-    case RECEIVE_VOCABULARY:
-      return Object.assign({}, state, { 'voc': { 'ontologies': action.ontologies, 'vocabulary': action.vocabulary, 'error': action.error } })
-    default:
-      return state
-  }
-}
-
 function searchReducer(state = {}, action) {
   switch (action.type) {
     case REQUEST_SEARCH:
@@ -230,10 +227,14 @@ const rootReducer = combineReducers({
   datasetReducer,
   userReducer,
   searchReducer,
-  ontologiesReducer,
   propertiesReducer,
   toastr: toastrReducer, // <- Mounted at toastr.
-  dataApplicationsList: dataApplicationsReducer
+  dataApplicationsList: dataApplicationsReducer,
+  // semantic's reducers
+  ontologiesList: ontListReducer,
+  ontologyDetail: ontDetailReducer,
+  vocabulariesList: vocListReducer,
+  vocabularyDetail: vocDetailReducer
 })
 
 export default rootReducer

src/routes.js

@@ -6,7 +6,8 @@ const routes = {
   '/private/userstory/list': 'Storie',
   '/private/userstory/create': 'Nuova storia',
   '/private/ingestionwizzard': 'Nuovo dataset',
-  '/private/vocabulary/list': 'Vocabolari e standard',
+  '/private/ontologies': 'Ontologie',
+  '/private/vocabularies': 'Vocabolari',
   '/private/dataset':'Dataset',
   '/private/widget' : 'Widget',
   '/private/search': 'Ricerca',