added faceting ability eresearch/rdm#1303

src/components/FacetController.js

+const FacetController = {
+  get: function({data:arr, toJSON:toJSON}) {
+    const facets = [];
+    arr.map(function(value, index, Arr) {
+      if(index % 2 == 0) {
+        if(toJSON){
+          try{
+            value = JSON.parse(value)
+          }catch(e){console.error(e.message);}}
+          const facet = {
+            value: value, count: arr[index + 1]
+          }
+          facets.push(facet);
+        }
+      });
+      return facets;
+    },
+    display: function ({data: data, config: config}) {
+      const displays = [];
+      data.forEach(function(d){
+        const displayFacet = {
+          count:d.count,
+          name: config.name,
+          route: config.route,
+          searchUrl: d.value[config.searchUrl],
+          searchText: d.value[config.searchText]
+        }
+        displays.push(displayFacet)
+      });
+      return displays;
+    }
+  }
+
+  module.exports = FacetController;

src/components/Router.js

@@ -6,6 +6,8 @@ const Footer = require('./views/footer');
 const Search = require('./views/search');
 const ViewDoc = require('./views/ViewDoc');
 const ViewError = require('./views/ViewError');
+const FacetController = require('./FacetController');
+
 const solrService = require('./SolrService');
 
 const Router = async function (state) {
@@ -30,19 +32,20 @@ const Router = async function (state) {
             start: 0,
             page: 1,
             searchParam: 'author_id%3A',
-            text: state.main.doc.id
+            text: state.main.doc.id,
+            facets: false
           });
           if (status === 200) {
             state.main.related = res.data.docs || [];
           }
         }
-        app.innerHTML = [Header(state), Menu(state), Container([Search(state), ViewDoc(state)]), Footer(state)].join('');
+        app.innerHTML = [Container([Header(state), Menu(state), Search(state), ViewDoc(state), Footer(state)])].join('');
       } else {
-        app.innerHTML = [Header(state), Menu(state), Container([Search(state), ViewError(state)]), Footer(state)].join('');
+        app.innerHTML = [Container([Header(state), Menu(state), Search(state), ViewError(state), Footer(state)])].join('');
       }
     }
     if (verb === '#search/') {
-      //TODO: make this better
+      //TODO: make the split better
       const splits = match[2].split('/');
       const start = splits[0] || state.main.start;
       const page = splits[1] || '';
@@ -51,30 +54,49 @@ const Router = async function (state) {
         start: start,
         page: page,
         searchParam: 'main_search%3A',
-        text: searchText
+        text: searchText,
+        facets: state.facets,
+        facetLimit: state.facetLimit
       });
       if (status === 200) {
         state.main.docs = data.docs;
         state.main.numFound = data.numFound;
         state.main.searchText = searchText;
-        app.innerHTML = [Header(state), Menu(state), Container([Search(state), Main(state)]), Footer(state)].join('');
+        app.innerHTML = [Container([Header(state), Menu(state), Search(state), Main(state), Footer(state)])].join('');
         const input = document.getElementById('text-to-search');
         if (input) {
           input.value = searchText;
         }
       } else {
-        app.innerHTML = [Header(state), Menu(state), Container([Search(state), ViewError(state)]), Footer(state)].join('');
+        app.innerHTML = [Container([Header(state), Menu(state), Search(state), ViewError(state), Footer(state)])].join('');
       }
     }
   } else {
-    const {data, status} = await solrService.searchAll({api: state.config.api});
-    if (status === 200) {
-      state.main.docs = data.docs;
-      state.main.numFound = data.numFound;
+    const res = await solrService.search({api: state.config.api}, {
+      start: state.main.start,
+      page: state.main.page,
+      searchParam: '*%3A',
+      text: '*',
+      facets: state.facets,
+      facetLimit: state.facetLimit
+    });
+    if (res.status === 200) {
+      state.main.docs = res.data.docs;
+      state.main.numFound = res.data.numFound;
       state.main.searchText = '';
-      app.innerHTML = [Header(state), Menu(state), Container([Search(state), Main(state)]), Footer(state)].join('');
+      state.facetResult = res.facets;
+      const facetContent = FacetController.get({data: state.facetResult['facet_fields'][state.facets[0]], toJSON: true});
+      const facetData = FacetController.display({data: facetContent, config: {
+        name: 'Dataset_author_facetmulti',
+        route: '#view/',
+        searchUrl: '@id',
+        searchText: 'name'
+        }
+      });
+      state.facetData = facetData;
+      app.innerHTML = [Container([Header(state), Menu(state), Search(state), Main(state), Footer(state)])].join('');
     } else {
-      app.innerHTML = [Header(state), Menu(state), Container([Search(state), ViewError(state)]), Footer(state)].join('');
+      app.innerHTML = [Container([Header(state), Menu(state), Search(state), ViewError(state), Footer(state)])].join('');
     }
   }
 };

src/components/SolrService.js

 const axios = require('axios');
 
 const SolrService = {
-  searchAll: async function (config) {
-    try {
-      const req = await axios.get(`${config.api}/select?q=*%3A*`);
-      if (req.data) {
-        return {data: req.data['response'], status: req.status};
-      } else {
-        return {data: [], status: req.status};
-      }
-    } catch (e) {
-      return {data: [], status: e.message};
-    }
-  },
   get: async function (config, data) {
     try {
       let param = `get?id=`;
       data = encodeURIComponent(`${data}`);
-      const req = await axios.get(`${config.api}/${param}${data}`);
-      if (req.data) {
-        return {data: req.data['doc'], status: req.status};
+      const res = await axios.get(`${config.api}/${param}${data}`);
+      if (res.data) {
+        return {data: res.data['doc'], status: res.status};
       } else {
-        return {data: {}, status: req.status};
+        return {data: {}, status: res.status};
       }
     } catch (e) {
       return {data: {}, status: e.message};
     }
   },
-  search: async function (config, {start: start, page: page, searchParam: searchParam, text: text}) {
+  search: async function (config, {start: start, page: page, searchParam: searchParam, text: text, facets: facets, facetLimit: facetLimit}) {
     try {
-      let param = `select?q=`;
-      if (text === '' || !text) {
+      let param = `select?q=`;      
+      if (text === '' || !text ) {
         text = '*';
       }
-      const req = await axios.get(`${config.api}/${param}${searchParam}${text}&start=${start}&page=${page}`);
-      if (req.data) {
-        return {data: req.data['response'], status: req.status};
+      let query = `${param}${searchParam}${text}&start=${start}&page=${page}`;
+
+      if(facets) {
+        query += `&facet=true%20&facet.field=${[...facets].join('&facet.field')}&facet.limit=${facetLimit || 5}`;
+      }
+      const res = await axios.get(`${config.api}/${query}`);
+      if (res.data) {
+        return {data: res.data['response'], facets: res.data['facet_counts'], status: res.status};
       } else {
-        return {data: [], status: req.status};
+        return {data: [], status: res.status};
       }
     } catch (e) {
       return {data: [], status: e.message};
@@ -45,4 +38,4 @@ const SolrService = {
   }
 };
 
-module.exports = SolrService;
\ No newline at end of file
+module.exports = SolrService;

src/components/views/Facets.js

+const $ = require("jquery");
+const isIterable = require('../isIterable');
+
+const Facets = function (data) {
+  let html = `<ul class="list-group col-sm-4">`;
+
+  if(isIterable(data.facetsDisplay)){
+    for(let fd of data.facetsDisplay){
+      html += `<li class="list-group-item">
+      <div>
+         <h4>${fd.displayText}</h4>
+         <hr/>
+         <ul class="list-group">`;
+         const currentFacet = data.facetData.filter((f)=>{
+           return f.name === fd.name;
+         });
+        if(isIterable(currentFacet)){
+           for(let facet of currentFacet){            
+             html += `<li class="row">
+             <div class="col-sm-4">${facet['count']}</div>
+             <div class="col-sm-8"><a href="/${facet['route']}${facet['searchUrl']}">${facet['searchText']}</a></div>
+             </li>`;
+           }
+        }
+         html += `</ul>
+      </div>
+      </li>`
+    }
+  };
+
+  html += `</ul>`;
+  return html;
+};
+
+module.exports = Facets;

src/components/views/ListDocs.js

+const Facets = require('./Facets');
+
 const ListDocs = function (data) {
   var html = '';
   const docs = data.main.docs;
-  html += `<ul class="list-group">`;
+  html += `<div class="container col-sm-12"><div class="row">`
+  html += Facets(data);
+  html += `<ul class="list-group col-sm-8">`;
   if (docs.length > 0) {
     docs.forEach((d) => {
       var url = `${data.config.repo}${d['uri_id']}/`;
@@ -13,8 +17,9 @@ const ListDocs = function (data) {
   } else {
     html += `<div class="text-center"> No data found</div>`;
   }
-  html += `<div></div><br/></div></ul>`;
+  html += `</ul><div><br/></div>`;
+  html += `</div></div>`;
   return html;
 };
 
-module.exports = ListDocs;
\ No newline at end of file
+module.exports = ListDocs;

src/components/views/Main.js

@@ -3,23 +3,20 @@ const ListDocs = require('./ListDocs');
 const Pagination = require('./Pagination');
 
 const Main = function (data) {
-  let html = `<div class="maincontent-body">
-<div><br/></div>
-
-`;
-  html = [ListDocs(data), Pagination(data)].join('');
-
+  let html = `<div><br/></div>`;
+  html = [ListDocs(data), '<div><br/></div>' ,Pagination(data)].join('');
   html += `
-   <div class="container">
-    <div class="text-center">
-    <p>Results: ${data.main.numFound}</p>
+  <div class="row">
+    <div class="container">
+      <div class="text-center">
+        <p>Results: ${data.main.numFound}</p>
+      </div>
     </div>
   </div>
   <div><br/></div>
-  </div>
-`;
+  `;
 
   return html;
 };
 
-module.exports = Main;
\ No newline at end of file
+module.exports = Main;

src/index.js

@@ -43,6 +43,13 @@ let state = {
       {display: "SubDoc", field: "contactPoint", fieldName: 'Contact Point', template: '${item.name} ${item.email}'},
     ]
   },
+  facets: ['Dataset_author_facetmulti'],
+  facetsDisplay: [
+    {name: 'Dataset_author_facetmulti', displayText: 'Top Authors'},
+    //{name: 'Keywords', displayText: 'Top Keywords'}
+  ],
+  facetData: [],
+  facetLimit: 5,
   footer:{
     text: '2019 University of Technology Sydney'
   },

src/styles/media.scss

@@ -13,7 +13,7 @@
   }
 }
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 490px) {
   .header-main a {
     font-size: 23px !important;
     bottom: 23px !important;

src/styles/theme.scss

@@ -22,15 +22,20 @@ html, body {
 }
 
 .content-inside {
-  //padding: 20px;
-  padding-bottom: 70px;
+  min-height: 100vh; /* will cover the 100% of viewport */
+  overflow: hidden;
+  display: block;
+  position: relative;
+  padding-bottom: 100px; /* height of your footer */
 }
 
 .footer {
-  height: 70px;
-  margin-top: -70px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
   background-color: #000;
   color: #fff;
+  height: 70px;
 }
 
 .footer p {
@@ -93,4 +98,3 @@ html, body {
   width: 500px;
   background-color: $refiner-card-bg-color;
 }
-