GeoKnow/Jassa-Core

View on GitHub
demo/sponate/sponate-linking.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html ng-app="SponateLinkDemo">
<head>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bluebird/1.2.2/bluebird.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-sanitize.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
    <script src="../../dist/jassa.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>

    <style>
    .preserve-whitespace {
        white-space: pre;
    }
    </style>

    <script type="text/javascript">
    jassa = new Jassa(Promise, $.ajax);

    var vocab = jassa.vocab;
    var rdf = jassa.rdf;
    var sparql = jassa.sparql;
    var service = jassa.service;
    var sponate = jassa.sponate;
    var facete = jassa.facete;
    var util = jassa.util;

    angular.module('SponateLinkDemo', ['ui.bootstrap', 'ngSanitize'])

    .filter('objectToArray', function() {
        return function(input) {
            var r = _.values(input);
            return r;
        }
    })

    .controller('AppCtrl', ['$scope', '$q', function($scope, $q) {

        //var linkSparqlService = new service.SparqlServiceHttp('http://lod.openlinksw.com/sparql', ['http://dbpedia.org']);
        var linkSparqlService = new service.SparqlServiceHttp('http://localhost/data/geolink/sparql', ['http://geolink.aksw.org/'], {type: 'POST'});
        var dbpediaSparqlService = new service.SparqlServiceHttp('http://lod.openlinksw.com/sparql', ['http://dbpedia.org'], {type: 'POST'});
        var dbpediaSparqlService = new service.SparqlServiceHttp('http://localhost/data/dbpedia/sparql', ['http://dbpedia.org'], {type: 'POST'});
        //var dbpediaSparqlService = new service.SparqlServiceHttp('http://dbpedia.org/sparql', ['http://dbpedia.org']);
        var lgdSparqlService = new service.SparqlServiceHttp('http://linkedgeodata.org/sparql', ['http://linkedgeodata.org'], {type: 'POST'});

        linkStore = new sponate.StoreFacade(linkSparqlService, {
            'rdf': 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
            'llo': 'http://www.linklion.org/ontology#'
        });

        linkStore.addMap({
            name: 'links',
            template: [{
                id: '?l',
                source: { $ref: { target: 'dbpedia-data', on: '?s' } },
                target: { $ref: { target: 'lgd-data', on: '?t' } }
            }],
            from: '?l a llo:Link; rdf:subject ?s; rdf:object ?t'
        });

        var bestLiteralConfig = new sparql.BestLabelConfig(); //['ja', 'ko', 'en', '']);
        var mappedConcept = sponate.MappedConceptUtils.createMappedConceptBestLabel(bestLiteralConfig);

        linkStore.addTemplate({
            name: 'spo',
            template: [{
                id: '?s',
                displayLabel: { $ref: { target: mappedConcept, attr: 'displayLabel' }},
                predicates: [{
                    id: '?p',
                    displayLabel: { $ref: { target: mappedConcept, attr: 'displayLabel', on: '?p' }},
                    values: [{
                        id: '?o',
                        displayLabel: { $ref: { target: mappedConcept, attr: 'displayLabel', on: '?o' }},
                    }]
                }]
            }],
            from: '?s ?p ?o',
        });

        linkStore.addMap({
            name: 'dbpedia-data',
            template: 'spo',
            service: dbpediaSparqlService
        });

        linkStore.addMap({
            name: 'lgd-data',
            template: 'spo',
            service: lgdSparqlService
        });

        $scope.offset = 0;
        $scope.numItems = 10;

        var orderBySource = function(map) {
            var result = Object.keys(map);

            _(result).orderBy(function(item) {
                var s = item.sources;
                var r = s.length + '-' + s.join('-');
                return r;
            });

            return result;
        };

        $scope.sourceOrderFn = function(item) {
            var s = item.sources;
            var r = s.length + '-' + s.join('-');
            //console.log('Item: ', item, r);
            return r;
        };


        $scope.$watchCollection('[offset, numItems]', function() {
//            $q.when(linkStore.links.find().limit($scope.numItems).skip($scope.offset).list().then(function(items) {
              $q.when(linkStore.links.getListService().fetchItems(null, $scope.numItems, $scope.offset).then(function(entries) {
                return entries.map(function(entry) {
                    return entry.val;
                });
            })).then(function(links) {

                // Enrich links with a cluster for the predicates
                links.forEach(function(link) {
                    var cluster = util.ClusterUtils.clusterLink(link);

                    // TODO Add the property display labels
//                     _(cluster).forEach(function(cluster) {

//                     })

                    link.cluster = cluster;
                });


                //console.log('Links: ', links);

                $scope.links = links;
            })

        });


    }]);

    </script>

</head>

<body ng-controller="AppCtrl">

<table class="table table-striped">

    <div class="alert alert-success" role="alert">
        Legend: <span class="label label-success">Both resources</span> <span class="label label-primary">Source only</span> <span class="label label-warning">Target only</span>
    </div>

    <tr><th>Link</th><th>Source</th><th>Target</th></tr>
    <tr ng-repeat="link in links">
        <td>
            <span class="label label-warning" title="{{link.source.id}}">{{link.source.displayLabel}}</span>
            <span class="label label-primary" title="{{link.target.id}}">{{link.target.displayLabel}}</span>
        </td>


        <button ng-class="{ 'disabled': offset === 0 }" type="button" class="btn btn-default" ng-click="offset = offset > 0 ? offset - 1 : offset">Prev</button>
        <button type="button" class="btn btn-default" ng-click="offset = offset + 1">Next</button>

        <td>
            <table class="table table-striped">
                <tr ng-repeat="predicate in link.cluster | objectToArray | orderBy:sourceOrderFn:true">
                    <td>
                        <span title="{{predicate.id}}" class="label" ng-class="predicate.sources.length === 2 ? 'label-success' : ( predicate.sources[0] === 'source' ? 'label-primary' : 'label-warning' )">{{predicate.displayLabel || predicate.id}}</span>
                    </td>
                    <td>
                        <ul>
                            <li ng-repeat="member in predicate.valueToMember | objectToArray | orderBy:sourceOrderFn:true">
                                <span title="{{member.value.id}}" class="label preserve-whitespace" ng-class="member.sources.length === 2 ? 'label-success' : ( member.sources[0] === 'source' ? 'label-primary' : 'label-warning' )">{{member.value.displayLabel || member.value.id}}</span>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
        </td>

    </tr>
</table>

</body>

</html>