grtjn/ml-lodlive-ng

Angular directive that wraps around Matt's ml-lodlive project

ml-lodlive-ng

Angular directive that wraps around Matt's ml-lodlive project

Docs and examples available here: http://grtjn.github.io/ml-lodlive-ng

ml-lodlive-ng's Issues

Add zoom buttons on a toolbar

ml-lodlive gives a div with class lodlive-graph-context, that would be a perfect place to apply transform: scale(..) via CSS. The ml-lodlive directive in this project includes a legend directive that could be generalized into a toolbar directive including zoom buttons for zoom in (+), zoom out (-), and a reset zoom. I guess a zoom to fit will be tricky..

Not opening child nodes on click of .relatedBox. Node moves instead

When you click one of a node's .relatedBox circles it doesn't open the child node.

On the demo page: it causes the whole parent node to move instead.

I've done some digging, as i'm getting a similar problem on my own extension.

It seems draggable.js is hooving up all the clicks.

container.on('mousedown', draggableSelector, function(event) {

    // mark the node as being dragged using event-delegation
    dragState.target = $(this);
    dragState.panning = false;

    // store offset of event so node moves properly
    dragState.offsetX = event.offsetX;
    dragState.offsetY = event.offsetY;
    event.stopPropagation();
    event.preventDefault();
  });

Could this be a packaging error? As i assume this works fine on ml-lodlive?

Only show relations in legend that appear in graph

Likely requires changes in ml-lodlive to get easy access to data, and (potentially) make things interactive..

update ml-lodlive dependency

An updated version of ml-lodlive has been released (0.4.0). Please update bower.json to reference this version, as it has many fixes and improvements.

Note: for the purposes of this component, this release is mostly backwards compatible.

Update bower dep for ml-lodlive

Accept header PR on ml-lodlive is finally processed into dist, we can upgrade to ml-lodlive#0.3.1.

Sorting + title of relationships in legend

Allow custom titles for relationships, and show them alphabetically sorted.

How can I use ml-lodlive-ng with my own endpoint?

I'm trying to use my own endpoint but it is not clear to me how I would create a new provider.
Can you give a quick example?

Legend initialization fails when profile is not in scope

If the profile is not initialized when the MLLodliveLegendCtrl is created, then the initRelationship() function causes and error because the condition checking for (model.profile.UI) gets a TypeError since (model.profile) is null. Need to update the if-statement to check that (model.profile) exists as well.

When using slush, the order of script loading results in error

James Kerr ran into this, and I confirmed: with a vanilla slush app, relying on wiredep to inject scripts into index.html, working through the QuickStart steps results in an error:

angular.js:12783 TypeError: angular.element(...).lodlive is not a function
    at ml-lodlive-ng.js:21
    at Scope.$digest (angular.js:16203)
    at Scope.$apply (angular.js:16467)
    at done (angular.js:10852)
    at completeRequest (angular.js:11050)
    at XMLHttpRequest.requestLoaded (angular.js:10991)

There is a workaround, by moving ml-lodlive.complete.js before angular.js in index.html. But, since ml-lodlive.complete.js relies on jQuery, jquery.js has to go to the top of the list. (Looking through some forums, it might actually be preferable to load jQuery first ... but that is an issue for slush itself)

Susequent changes to "iri" does not refresh lodlive

The following line in directive's link: angular.element($elem).lodlive({ profile: $scope.profile, firstUri: newVal, ignoreBnodes: true }); actually creates a new lodlive instance. Therefore, subsequent updates to iri after it first gets initialized result in multiple inserted lodlive divs placed on top of each other (the first instance being always on top) that gives an outward appearance of lodlive not "refreshing".

Possible solution is as follows:

$scope.$watch('iri', function(newIri, oldIri) {
    var ll = angular.element($elem).lodlive(); // lodlive() returns null if not yet initialized
    if (!ll && $scope.profile && newIri) {
        angular.element($elem).lodlive({ profile: $scope.profile, firstUri: newIri, ignoreBnodes: true });
    }
    else if (ll && newIri) {
        ll.context.empty(); // it seems that w/o this call, init(uri) will "append" rather than reset
        ll.init(newIri);
    }
});

A workaround for projects using the current version is to use angular (1.4) decorators:

angular.module('app').decorator('mlLodliveDirective', function($delegate) {
    var directive = $delegate[0];

    // completely replace link: to fix updating of iri
    var link = function($scope, $elem, $attr) {
        // Use new $scope.$watch() code here
    };

    directive.compile = function() {
        return function(scope, elem, attr) {
            link.apply(this, arguments);
        };
    };

    return $delegate;
});

TypeError: Cannot read property 'UI' of undefined

Hi,

I'm getting below error while working on this

Error:
TypeError: Cannot read property 'UI' of undefined

Attached the html template for the same: sample3.zip

Kindly let me know how to fix this, I'm new to angular js, just want to show data from MarkLogic if the dbpedia endpoint works.

Thanks,
Rajesh

ml-lodlive 0.4+ requires slight change in profile.connection.accepts

Expects string/array instead of object..