GeoKnow/Jassa-Core

View on GitHub
demo/dataset-browser/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html ng-app="DatasetBrowser">
<head>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
    <link rel="stylesheet" href="http://js.geoknow.eu/libs/jassa-ui-angular/latest/jassa-ui-angular.css">
<!--     <link rel="stylesheet" href="file:///home/raven/Projects/Eclipse/jassa-ui-angular-parent/jassa-ui-angular-core/target/release/repo/jassa-ui-angular.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/jqueryui/1.10.4/jquery-ui.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="http://js.geoknow.eu/libs/jassa/latest/jassa.js"></script>
<!--     <script src="../../dist/jassa.js"></script> -->

    <script src="http://js.geoknow.eu/libs/jassa-ui-angular/latest/jassa-ui-angular-tpls.js"></script>
<!--     <script src="file:///home/raven/Projects/Eclipse/jassa-ui-angular-parent/jassa-ui-angular-core/target/release/repo/jassa-ui-angular-tpls.js"></script> -->

    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.12.8/sortable.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>


    <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('DatasetBrowser', ['ui.jassa', 'ui.bootstrap', 'ui.sortable', 'ui.keypress', 'ngSanitize'])

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

        /*
         * Set up the sparql service with as many buffs (decorations) as we like
         */
        var sparqlService = service.SparqlServiceBuilder
            .http('http://cstadler.aksw.org/data/misc/sparql', ['http://datacat.aksw.org/'])
            .cache()
            .virtFix()
            .paginate(1000)
            .pageExpand(100)
            .create();

        //sparqlService = new service.SparqlServiceConsoleLog(sparqlService);

        /*
         * Set up the Sponate mapping for the data we are interested in
         */
        var store = new sponate.StoreFacade(sparqlService, {
            'rdf': 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
            'dbpedia-owl': 'http://dbpedia.org/ontology/',
            'foaf': 'http://xmlns.com/foaf/0.1/',
            'dcat': 'http://www.w3.org/ns/dcat#',
            'theme': 'http://example.org/resource/theme/',
            'o': 'http://example.org/ontology/'
        });

        $scope.langs = ['de', 'en', ''];

        var labelConfig = new sparql.LiteralPreference($scope.langs);
        var labelTemplateFn = function() { return sponate.MappedConceptUtils.createMappedConceptLiteralPreference(labelConfig); };
        var commentTemplateFn = function() { return sponate.MappedConceptUtils.createMappedConceptLiteralPreference(new sparql.BestLabelConfig($scope.langs, [vocab.rdfs.comment])); };

        var template = [{
            id: '?s',
            label: { $ref: { target: labelTemplateFn, attr: 'displayLabel' }},
            comment: { $ref: { target: commentTemplateFn, attr: 'displayLabel' }},
            depiction: '?d',
            resources: [{
                label: 'Distributions',
                items: [{ $ref: { target: 'distributions', on: '?x'} }],
                template: 'distribution-list.html'
            }, {
                label: 'Join Summaries',
                items: [[{ $ref: { target: 'datasets', on: '?j'} }], function(items) { // <- here be recursion
                    var r = _(items).chain().map(function(item) { return item.resources[0].items; }).flatten(true).value();
                    return r;
                }],
                template: 'distribution-list.html'
            }]
        }];

        store.addMap({
            name: 'primaryDatasets',
            template: template,
            from: '?s a dcat:Dataset ; dcat:theme theme:primary . Optional { ?s foaf:depiction ?d } . Optional { ?x o:distributionOf ?s } Optional { ?j o:joinSummaryOf ?s }'
        });

        store.addMap({
            name: 'datasets',
            template: template,
            from: '?s a dcat:Dataset . Optional { ?s foaf:depiction ?d } . Optional { ?x o:distributionOf ?s } Optional { ?j o:joinSummaryOf ?s }'
        });

        store.addMap({
            name: 'distributions',
            template: [{
                id: '?s',
                accessUrl: '?a',
                graphs: ['?g']
            }],
            from: '?s a dcat:Distribution ; dcat:accessURL ?a . Optional { ?s o:graph ?g } '
        });

        /*
         * Create a list service for our mapping and decorate it with
         * keyword search support
         */
        $scope.searchModes = [{
            label: 'regex',
            mode: 'regex'
        }, {
            label: 'fulltext',
            mode: 'fulltext'
        }];

        $scope.activeSearchMode = $scope.searchModes[0];

        $scope.listService = store.primaryDatasets.getListService();

        $scope.listService = new service.ListServiceTransformConceptMode($scope.listService, function() {
            var searchConfig = new sparql.LiteralPreference($scope.langs, [vocab.rdfs.comment, vocab.rdfs.label]);
            var labelRelation = sparql.LabelUtils.createRelationPrefLabels(searchConfig);
            return labelRelation;
        });

//         $scope.listService.fetchItems().then(function(entries) {
//            console.log('entries: ', entries);
//         });

        /*
         * Angular setup
         */
        $scope.availableLangs = ['de', 'en', 'jp', 'ko'];


        $scope.offset = 0;
        $scope.limit = 10;
        $scope.totalItems = 0;
        $scope.items = [];
        $scope.maxSize = 7;

        $scope.doFilter = function(searchString) {
            $scope.filter = {
                searchString: searchString,
                mode: $scope.activeSearchMode.mode
            };
            $scope.offset = 0;
        };

        $scope.context = {
            // TODO Get rid of the limitation of having to pass in the itemTemplate via a 'context' object
            itemTemplate: 'dataset-item.html',

            buildAccessUrl: function(accessUrl, graphUrls) {
                var defaultQuery = 'Select * { ?s ?p ?o } Limit 10'
                return accessUrl + '?qtxt=' + encodeURIComponent(defaultQuery) + (
                    graphUrls && graphUrls.length > 0
                        ? '&' + graphUrls.map(function(item) { return 'default-graph-uri=' + encodeURIComponent(item); }).join('&')
                        : ''
                );
            }
        };

        //$scope.itemTemplate = 'dataset-item.html';
    }]);

    </script>

</head>

<body ng-controller="AppCtrl">

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" style="padding: 3px 15px;" href="http://aksw.org" target="_blank"><img style="height: 42px;" src="http://js.geoknow.eu/images/aksw-logo.png" alt=""></img></a>
                <a class="navbar-brand" href="#">Dataset Browser</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="http://aksw.org/ClausStadler" target="_blank">by Claus Stadler</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <jassa-list-browser
        list-service="listService"
        offset="offset"
        limit="limit"
        filter="filter"
        do-filter="doFilter"
        total-items="totalItems"
        items="items"
        langs="langs"
        availableLangs="availableLangs"
        search-modes="searchModes"
        active-search-mode="activeSearchMode"
        context="context"
        item-template="itemTemplate"
    ></jassa-list-browser>

</body>

</html>