jsonLD to graphical representationnot working - angularjs

I am trying to draw a graph from my ontology which is in RDF format.I am following "https://github.com/scienceai/jsonld-vis" repositry to develop.I am getting error when trying to replicate the above github code.I am adding my code for the aobve implemetation HERE
I came across many comments saying above github repositry works.But i am not to figure it out. Please help
d3.jsonldVis(mockData, '#graph', {
w: 800,
h: 600,
maxLabelWidth: 250,
tipClassName: 'tip-class'
});
If there are any other libraries i can use to implement the above in angularjs,javascript environment please mention.

I'm not sure if this is to be answered but anyway with minor changes the example can be reproduced:
Minor Changes:
The MAIN code to initiate jsonld-vis index.js wasn't being included
CSS included as a script??? Probably a mistake. Added a link tag to include it.
The library is based on d3 version 3 and you were trying to include the latest (i.e. v5.6)
You don't need to use the import statements here. Read more about import here or here
Fork: https://plnkr.co/edit/KkNHWQa0xxiotB4tN7Ru?p=preview
Suggestions? d3 Collapsible Tree is a great viz that you can refer to and customize as per your requirements.

Related

react-swipeable-list is not working as expected

I'm using #sandstreamdev/react-swipeable-list package in one of my project to create a swipeable list with React. Explored the docs and thought of experimenting with one of the examples mentioned in it. Here is the application created by copying code from the given example. But it is behaving unexpectedly.
Actual Behavior:
Expected Behavior:
Whenever the list item shown is swiped right or left it should display reply or delete option accordingly under the list item. But instead the options are shown all the time. I think the issue here is with the CSS but I'm not sure exactly where I messed it up. Please help me in resolving this issue.
You forgot to import the css of the library.
import '#sandstreamdev/react-swipeable-list/dist/styles.css';
here is the fix
https://codesandbox.io/s/twilight-waterfall-lhkfo

ExtJS Admin Dashboard Example from the docs

I am trying to understand how things connect in the Admin Dashboard example, the register page here: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register
FYI, I have read the entire docs on the quick start and the guide (which includes almost everything), and yet I find few things that I cannot connect. Maybe the docs need improvement or maybe I'm just dumb. I'll find out if its the latter.
This is the entire source code for the application: https://github.com/bjornharrtell/extjs/tree/master/templates/admin-dashboard. I am working with the classic version.
Now for the register page, the main view is this: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/src/view/authentication/Register.js
My questions are:
At line 25: cls: 'auth-dialog-register'. Which means an extra css class is being added to the component. Now I searched the scss files and did not find the style definitions for this class anywhere. Since this component is the 'authdialog', I looked at this file in particular: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/sass/src/view/authentication/Dialog.scss, but I cannot find 'auth-dialog-register' anywhere. Where is that class defined? Or is it not being used(in that case, bummer)
Similarly at lines: Line 42, Line 57 also, there is a class 'auth-textbox' being attached to text boxes, but I cannot find where its styles are defined.
Moving on, on line 49, for the textfield, a 'triggers' config is defined. In the docs it is here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.field.Text.html#cfg-triggers , It really doesn't explain anything, just a bunch of code. Also on the next line in the Register.js file, on line 50, it has a 'glyphed' config inside triggers. Again, I cannot find out in the docs what it is used for. Sure the idea is clear, that it is used for a textbox trigger, but I need to be sure I know what is happening.
My next question is probably connected with the previous one. If you look at the example page: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register, you see that all text boxes have an icon saying what the field is for: Email field has an email icon. How did that come? I'm pretty sure it had to do with the triggers config in my previous question. According to the documentation https://docs.sencha.com/extjs/6.0.2/guides/core_concepts/font_ext.html, I should use a 'iconCls' config, but here that is not used.
Please someone explain this. Is it reasonable to have these questions? Or should I have been able to figure them out? I am new to ExtJS and have just started learning it from 2 weeks.
1/2) Seems they are unused classes. I'll open a ticket to remove them.
3) The triggers are button like things that can be appended to the field. As it says in the docs, they are a set of configurations for Ext.form.trigger.Trigger, the options for those can be found here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.trigger.Trigger.html
glyphed is not a config, but rather a "label" for that trigger in the field.
4) That is some custom css, applied by the classes used in the trigger.
.password-trigger,
.auth-email-trigger,
.auth-password-trigger,
.auth-envelope-trigger {
&:before{
top: 10px;
left: -18px;
position: relative;
color: $dialog-trigger-color;
font-size: 30px;
}
&.password-trigger:before,
&.auth-password-trigger:before {
content: "\f023";
}
&.auth-email-trigger:before {
content: "\f007";
}
&.auth-envelope-trigger:before {
content: "\f0e0";
}
}

gmaps geometa.js not found?

I'm using a plugin which calls http://gmaps-samples-v3.googlecode.com/svn/trunk/geolocate/geometa.js for displaying map with pins on the homepage. However, this link is not found (404). I've searched for the solution too see what to do, but with no luck.
Is there a new version of this javascript available that I could replace this link with the new one? Not sure how else to put it and hope it makes sense.
Not Certain but I think this is the file.
http://pastebin.com/D22BSvb8
EDIT: Think this is the most upto date version: http://pastebin.com/GHpyPTQE

Limitation on defining stylesheet in reactjs native version

If I try to define a textalign with justify value in reactjs native, I get the error message that only four values are supported: auto, left, right, center. Is it possible to work around this, and define textalign with justify? Below is the sample code:
var styleTest = StyleSheet.create({
title: {
fontSize : 20,
color : 'rgb(0,0,255)',
textAlign: "justify"
}
});
Just to clarify, I see this when trying out reactjs native for ios, not in reactjs.
The above error happens when calling StyleSheet.create method which calls StyleSheetValidation.validateStyle method. I guess in order to create a non-supported CSS property, I have to do a workaround and call CSS directly. I am curious how to go about including other stylesheet properties that are not supported, in a simple way. I couldn't find documentation on this. Pointers will be very much appreciated.
I have to do a workaround and call CSS directly
It's not actually CSS, it's a description of how it should look using the terms you know from CSS. The actual implementation does a bunch of math and then conveys it to UIKit in a way it understands, similar to how browsers implement CSS.
This has been done from scratch for react-native. It's not using an existing css engine.
I am curious how to go about including other stylesheet properties that are not supported, in a simple way
As you may have guessed by the words 'math' and 'UIKit', there's no simple way to do this, and absolutely no way to do it without modifying the objc code.
I suggest creating an issue or sending a pull request if it's missing something. Not all of CSS will be supported.
Disclaimer: Minimal iOS/react-native experience, I don't know what's required to add text justification. It may be simple.

How to use default.ctp in cakephp

I just finished the "15 min Blog Post tutorial" included in the documentation for cakephp. I was asked for another tutorial to change the layout for first tutorial.
However, I am fairly new to MVC programming/Cakephp and I have no real clue how to do so. Well, I know I need "default.ctp" placed in app/views/layouts/ and I presume I need to include
to include my data? . . .
I am really at a loss of what to do. I set up my default.ctp as I mentioned above, but when I go to localhost:9999/posts the layout is still the same. I guess I need to include a stylesheet (and if so, where?)
I guess if someone can point me in the right direction to a beginner's guide to layout styling or how to use it I would greatly appreciate any help.
I would advice you to read the following from the cookbook: Layouts and CSS. Then copy the layout from /cake/libs/view/layouts/ to /app/views/layouts/ and modify it to your needs. After that create you stylesheet (or modify existing one) in /app/webroot/css/ and include it in your layout.
Create in app/View/Layout a file named "my_posts_layout.ctp"
In your PostController set $this->layout = 'my_posts_layout';
This way you should view the content defined on my_posts_layout.ctp.
Lack of stylesheets has no impact here.
How MVC works in CakePHP:
The router dispatches an incoming request to an appropriate Contoller.
The appropriate Controller function executes (no output, just fetching data, setting up variables).
The appropriate view is rendered. In fact, the output of the view is just contained in $content_for_layout.
What you really get back in the browser is in the layout. Therefore you can put your view's output into the layout by echo $content_for_layout in default.ctp. (Of course you can also have different layouts.) In addition, the layout can be enhanced with elements.
I really recomend the CakePHP CookBook, easily found from the CakePHP homepage. Modifying default.ctp should edit your applications layout.
A more specific question (eg. code samples of your default.ctp, expected results etc) might help people provide a better answer than mine.

Resources