Primo Customization - Graph DB

custom.js

var app = angular.module('viewCustom', ['angularLoad']);

/* Other Works */
app.controller('OtherWorksComponentController', ['$http', function ($http) {
  var vm = this;
  const mms_id = vm.parentCtrl.item.pnx.control.sourcerecordid && vm.parentCtrl.item.pnx.control.sourcerecordid[0] || '';
  if (mms_id) {
    const data = {
      "statements": [{
        "statement": `MATCH 
              (book:Book {uri: "https://open-na.hosted.exlibrisgroup.com/alma/${vm.parentCtrl.institution}/bibs/${mms_id}"}) - [:CREATOR] -> (author:Resource) <- [:CREATOR] - (other:Book) 
              CALL { 
                  WITH other 
                  MATCH (other) - [:IDENTIFIER] -> (isbn:Isbn13) 
                  RETURN isbn LIMIT 1  
              }  
              RETURN other, isbn`
      }]
    };
    const req = {
      method: 'POST',
      url: "http://localhost:7474/db/neo4j/tx/commit",
      headers: {
        'Authorization': "Basic XXXX"
      },
      data
    }
    $http(req)
      .then(response => {
        const data = Array.isArray(response.data.results) && response.data.results[0].data;
        vm.works = Array.isArray(data) && data.map(row => row.row);
        const images = vm.works.map(work => {
          const isbn = work[1].label.match(/(\d+)/)[0];
          if (isbn) {
            return $http.get(`https://www.googleapis.com/books/v1/volumes?q=isbn:${isbn}`)
              .then(res => {
                const thumbnail = res.data.items[0].volumeInfo.imageLinks.smallThumbnail;
                return thumbnail;
              });
          }
        });
        Promise.all(images).then(results => vm.thumbnails = results);
      })
  }
}]);

app.component('otherWorksComponent', {
  bindings: {
    parentCtrl: '<'
  },
  controller: 'OtherWorksComponentController',
  template: `
    <div class="full-view-section loc-otherworks" flex-md="65" flex-lg="65" flex-xl="65" flex>
      <div class="layout-full-width full-view-section-content" ng-if="$ctrl.works">
        <div class="section-header" layout="row" layout-align="center center">
          <h2 class="section-title md-title light-text">
            Other Works by this Author:
          </h2>
          <md-divider flex>
          </md-divider>
        </div>
        <div class="full-view-section">
          <div class="full-view-section-content">
            <div class="section-body" layout="row" layout-align="center center">
              <div class="spaced-rows" layout="column" ng-repeat="work in $ctrl.works">
                <div class="work">
                  <img ng-src="{{$ctrl.thumbnails[$index]}}">
                  <p><a href="search?query=any,contains,{{work[0].title}}">{{work[0].title}}</a></p>
                  <!-- google book cover with ISBN, title, search link to Primo -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
`
});

app.component('prmFullViewAfter', {
  bindings: {
    parentCtrl: '<'
  },
  template: '<other-works-component parent-ctrl="$ctrl.parentCtrl"></other-works-component>'

});
/* END OTHER WORKS */

custom1.css

/* Other Works */
.full-view-section.loc-otherworks {
  background-color: #f3f3f3;
  margin-top: 0px;
  padding-left: 3em;
}
.full-view-section.loc-otherworks .work {
  display: flex;
  align-items: center;
}
.full-view-section.loc-otherworks .work img {
  width: 50px;
  padding: 10px;
}