WIP VOWL notation for owl by toefl · Pull Request #78 · metaphacts/ontodia

toefl · 2017-10-31T09:06:07Z

No description provided.

AlexeyMz · 2017-10-31T12:10:35Z

@toefl Thanks, I'll look at the changes shortly.

toefl · 2017-11-02T17:07:28Z

I deleted the commented code sections.
The next step is to use two kinds of visualization at once.
Work in progress

yuricus

Please see comments in files.

yuricus · 2017-11-04T09:26:43Z

        "id": "http://ailab.ifmo.ru/dialog/tv/schema#Router",
        "types": [
-            "http://www.w3.org/2002/07/owl#Class"
+            "http://www.w3.org/2002/07/owl#Thing"


Why do you need to change default example? Do you need it to demo something? I expect there are enough classes in this example to showcase visualization customization.

I wanted to experiment with the data. Returned as it was

yuricus · 2017-11-04T09:29:20Z

+
+const CLASS_NAME = 'ontodia-big-icon-owl_template';
+
+export class BigIconTemplateOwl extends Component<TemplateProps, {}> {


Since you're providing templates for OWL/VOWL notation please name templates and files appropriately. For example, VOWLClassTemplate, VOWLPropertyTemplate, etc.

yuricus · 2017-11-04T09:30:09Z

+    view: DiagramView;
+}
+
+export class ElementLayerOwl extends React.Component<Props, void> {


Do you really need to clone this class? Maybe there is some other way?

No, I'll try differently later

done without clone class ElementLayer

yuricus · 2017-11-04T09:31:44Z

@@ -0,0 +1,35 @@
+.ontodia-overlayed-owl_element {


You don't need to copy every css class, with scss you can easily use existing ones and override only properties you need.

AlexeyMz · 2017-11-10T14:39:37Z

+
+import { TemplateProps } from '../props';
+
+const CLASS_NAME = 'ontodia-VOWLClass_template';


Please, use consistent naming for CSS classes: ontodia-vowl-class-template

AlexeyMz · 2017-11-10T14:43:02Z

+
+const CLASS_NAME = 'ontodia-VOWLDatatypeObjectProperty_template';
+
+export class VOWLDatatypeObjectPropertyTemplate extends Component<TemplateProps, {}> {


I think the better name for this template would be just VowlPropertyTemplate and corresponding CSS class ontodia-vowl-property-template.

AlexeyMz · 2017-11-10T14:44:49Z

+const CLASS_NAME = 'ontodia-VOWLDatatypeObjectProperty_template';
+
+export class VOWLDatatypeObjectPropertyTemplate extends Component<TemplateProps, {}> {
+    public SetColor(types: any) : string {


This method should be private and called getColor (because it doesn't actually set anything).

Also consider changing the type of types parameter to string.

AlexeyMz · 2017-11-10T14:47:20Z

+
+import { TemplateProps } from '../props';
+
+const CLASS_NAME = 'ontodia-default-owl_template';


-> ontodia-default-owl-template

AlexeyMz · 2017-11-10T14:48:22Z

+
+const CLASS_NAME = 'ontodia-default-owl_template';
+
+export class DefaultElementTemplateOwl extends React.Component<TemplateProps, {}> {


DefaultElementTemplateOwl -> DefaultOwlTemplate

AlexeyMz · 2017-11-10T15:05:52Z

+
+        var divStyle;
+        if ( window.location.href == "http://localhost:10444/vowl.html" )
+             divStyle = {position: 'absolute', transform, borderStyle: "solid", borderWidth: '1px', borderRadius: '15px', borderColor: "grey", padding: '5px'}


I think the better way to add this styles is to specify them in .scss for VOWL templates.

I was asked not to clone this class for vowl. Therefore, it remains the same. Depending on the values in the select I override the necessary properties for ElementLayer.
I leave without changes.

This module (elementLayer) shouldn't contain any domain-related logic, especially like overriding styles for specific URIs (it also wouldn't work on any other deployment URI, so it isn't a good idea anyway).

Instead, a right way to do this is to add this styles directly to VOWL-related templates' scss-styles, so they could work in any environment.

AlexeyMz · 2017-11-10T15:06:31Z

+
+const CLASS_NAME = 'ontodia-VOWLClass_template';
+
+export class VOWLClassTemplate extends Component<TemplateProps, {}> {


VOWLClassTemplate -> VowlClassTemplate

AlexeyMz · 2017-11-10T15:08:15Z

 import { DefaultTypeStyleBundle } from '../customization/defaultTypeStyles';
 import { DefaultLinkTemplateBundle } from '../customization/defaultLinkStyles';
-import { DefaultElementTemplate, DefaultTemplateBundle } from '../customization/templates';
+import { DefaultElementTemplateOwl, DefaultTemplateBundle } from '../customization/templates';


These changes should be unnecessary (see comments for stc/ontodia/customization/templates/index.ts).

I do not understand how to satisfy your remarks. I need help

AlexeyMz · 2017-11-10T15:08:47Z


 const CLASS_NAME = 'ontodia-toolbar';

+


Please, discard all unnecessary whitespace / formatting changes here.

AlexeyMz · 2017-11-10T15:11:18Z

+  }
+}
+
+.ontodia-VOWLDatatypeObjectProperty_template_body {


Use SASS nested selectors for styles here, e.g.:

.ontodia-vowl-property-template { &__body { ... } &__body-type-line { ... } }

toefl · 2017-11-13T10:43:17Z

I use the automatic formatting of the code by means of VisualCode. I think it will not be a problem.

AlexeyMz · 2017-11-13T10:52:25Z

I recommend to install TSLint extension for VSCode to see all style warnings directly in the editor.

AlexeyMz · 2017-11-13T11:27:30Z

@@ -0,0 +1,73 @@
+import * as React from 'react';


Please rename this file to VowlClass.tsx to match component's name.

AlexeyMz · 2017-11-13T11:29:02Z

+
+const CLASS_NAME = 'ontodia-vowl-property-template';
+
+export class vowlPropertyTemplate extends Component<TemplateProps, {}> {


Class names usually start with uppercase character: vowlPropertyTemplate -> VowlPropertyTemplate.

Also don't forget to rename the file itself (to vowlProperty.tsx).

AlexeyMz · 2017-11-13T11:37:54Z

-            types.indexOf('http://xmlns.com/foaf/0.1/Organization') !== -1
-        ) {
-            return OrganizationTemplate;
+        if (window.location.href === 'http://localhost:10444/vowl.html') {


It would be better to create separate VowlTemplateBundle like this instead:

export const VowlTemplateBundle: TemplateResolver[] = [ types => { // Use new templates here if (types.indexOf('http://www.w3.org/2000/01/rdf-schema#Class') !== -1) { return VowlClassTemplate; } ... } ]

and then just import and use this bundle instead in the src/examples/demoOwl.ts:

import { VowlTemplateBundle } from '../index'; ... const props: WorkspaceProps & ClassAttributes<Workspace> = { ... viewOptions: { linkTemplateResolvers: ... templatesResolvers: VowlTemplateBundle, } }

VowlTemplateBundle has been added

AlexeyMz · 2017-11-13T11:40:40Z

+    viewOptions: {
+        linkTemplateResolvers: [
+            type => {
+                if (type.indexOf('subClassOf') !== -1)


Always use braces for block statements:

if (type.indexOf('subClassOf') !== -1) { return CUSTOM_LINK_TEMPLATE_SUBCLASSOF; } else { return CUSTOM_LINK_TEMPLATE; }

AlexeyMz · 2017-11-13T11:48:49Z

+const CLASS_NAME = 'ontodia-default-owl-template';
+
+export class DefaultOwlTemplate extends React.Component<TemplateProps, {}> {
+    private GetColor(types: string): string {


In javascript (and typescript) methods' names (and other functions' names in general) usually starts with lower-case character, e.g.:

private getColor(types: string): string { ... } public isThing(types: any): boolean { ... }

AlexeyMz · 2017-11-13T12:17:16Z

+  padding-right: 10px;
+}
+
+.link.joint-theme-default:hover {


Put this style change into CUSTOM_LINK_TEMPLATE or CUSTOM_LINK_TEMPLATE_SUBCLASSOF instead of globally overriding style for all links.

AlexeyMz · 2017-11-13T12:18:00Z

+    overflow: hidden;
+    padding: 7px 10px 0px 10px; 
+    &:hover
+    {


Please move this brace to the previous line.

AlexeyMz · 2017-11-13T12:19:33Z

+            <div className={CLASS_NAME}>
+                <div className={`${CLASS_NAME}__main-part`}>
+                        <div className='ontodia-vowl-class-template_body'>
+                        <div style={{flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis'}}>


Please, extract all inline styles for elements in markup for this template into corresponding scss file.

AlexeyMz · 2017-11-13T12:23:41Z

@@ -0,0 +1,182 @@
+.ontodia-default-owl-template {


Please rename this file to _defaultOwl.scss to match component's name.

AlexeyMz · 2017-11-13T12:24:50Z

@@ -0,0 +1,132 @@
+.ontodia-vowl-property-template {


Please rename this file to _vowlProperty.scss to match component's name.

Fix styles of the links labels

…fault template

* Add pointer callbacks to the API * Fix displaying the spinner

- support element nesting (grouping) through EmbeddedLayer; - import data from outside to RDFDataProvider; - merge statistics in composite data provider.

…ementContext

Nested nodes

…#99)

…ressed (#101)

…ust _ (#102)

…n Ontodia. Now uri2name was improved so it's more difficult to get empty label.

Remove the uri2name from rdf/sparql data providers and check labels

- workaround bug when parser encounters rdf:parseType="Collection"; - support blank nodes; - imporove guessing file type by extension; - throw errors with more detailed messages; - fix initialization data race issues; - use async/await for implementation.

…105) * Fixed default OWL/RDFS SPARQL config to display only links user can navigate * Updated configuration to support blank nodes.

toefl and others added 13 commits October 21, 2017 23:05

Select for owl has been added

c7385b8

Export changed for class and datatype

e911164

Changes for import owl templates bigIcon and defaultElement

4de3a56

Owl templates added

373a7af

Styles for datatypeProperty and ObjectProperty added

c270701

<hr> tags color has been fixed

943985e

Trying for add thing styles. Troubles with comment for Thing

6b3809e

Problems with things comment was fixed

539dfb9

Problems with comments was fixed.

497c495

Merge branch 'master' of https://github.com/toefl/Ontodia-org

2333451

Tabulatioin

f30038b

Changes with templates color

ca0166b

Owl marks were added

0ea5e59

Comments for owl notation were deleted.

733ad20

yuricus reviewed Nov 4, 2017

View reviewed changes

Айдар Бикмухаметов added 3 commits November 5, 2017 15:18

Merge branch 'master' of https://github.com/ontodia-org/ontodia

7e853f0

VOWL classes renamed

e67ebbe

Added possibility to use both visualization. Excess classes removed

968cd58

AlexeyMz suggested changes Nov 10, 2017

View reviewed changes

Айдар Бикмухаметов added 2 commits November 11, 2017 11:01

Merge branch 'master' of https://github.com/ontodia-org/ontodia

517f58e

Refactoring by comments Alexey

8850feb

Айдар Бикмухаметов and others added 2 commits November 13, 2017 14:21

Installed TSLint. Fixed remarks

e17fb56

Rename VOWLClass.tsx to vowlClass.tsx

18bfa7a

AlexeyMz suggested changes Nov 13, 2017

View reviewed changes

Айдар Бикмухаметов added 2 commits November 29, 2017 17:33

Refactoring by comments Alexey

504eb09

Merge branch 'master' of https://github.com/toefl/ontodia

e0b6ef4

Olga Belyaeva and others added 30 commits February 7, 2018 16:01

Fix styles of the links labels

dea0aad

Refactor LinkLayer, use getBBox() to measure link labels

676a908

Merge pull request #91 from ontodia-org/links-labels-styles

9f0dfd5

Fix styles of the links labels

Add missing IE polyfills, don't render property table in collapsed de…

413109a

…fault template

Add pointer callbacks to the API, fix loading spinner centering (#94)

dbec30c

* Add pointer callbacks to the API * Fix displaying the spinner

Add checking the existence of a link marker in the mount callback (#95)

7c704f2

Update README.md

334206a

Add rewriting https to http when we create element. (#97)

a2ed2e1

Improve error indication. (#100)

97c7138

Support element nesting, import RDF data, merge composite statistics.

9f49263

- support element nesting (grouping) through EmbeddedLayer; - import data from outside to RDFDataProvider; - merge statistics in composite data provider.

Refactor DiagramModel, fix InstancesSearch, use better typings for El…

79e0cb8

…ementContext

Add .iri helper property to DiagramElement

11682ae

Merge pull request #81 from ontodia-org/nested-nodes

ef83da8

Nested nodes

Fix bug with self-routing. Add halo refresh on connectionMenu hiding. (…

4c3b9c3

…#99)

Add .panning property and fire PointerEvent even if modifier key is p…

eb4e550

…ressed (#101)

Make PaperArea available from workspace, rename internal_ prefix to j…

e7d1c1c

…ust _ (#102)

Remove the uri2name from rdf/sparql data providers and check labels i…

df4cc15

…n Ontodia. Now uri2name was improved so it's more difficult to get empty label.

Extract getLocalizedText() logic into formalLocalizedLabel()

9a97996

Merge pull request #96 from ontodia-org/fixing-labels

43413e4

Remove the uri2name from rdf/sparql data providers and check labels

Update CHANGELOG.md

cbdf339

Vectorize "delete", "navigate" and "close navigation" icons in Halo

e5a6d71

Refactor module structure

6fcee50

Reverted changing element IRI from https to http

c3a5c1b

Polyfill the remove method in IE (#104)

5f16dfe

Fixed OWL/RDFS SPARQL config to display only links user can navigate (#…

cf2e16d

…105) * Fixed default OWL/RDFS SPARQL config to display only links user can navigate * Updated configuration to support blank nodes.

Ontodia tree. Work in propgress.

6a7c308

File to import has been renamed

101dde8

Rename _VowlClass.scss to _vowlClass.scss

b30fb6c

Rename _VowlProperty.scss to _vowlProperty.scss

d842e88


		const CLASS_NAME = 'ontodia-big-icon-owl_template';

		export class BigIconTemplateOwl extends Component<TemplateProps, {}> {


		import { TemplateProps } from '../props';

		const CLASS_NAME = 'ontodia-VOWLClass_template';


		const CLASS_NAME = 'ontodia-VOWLDatatypeObjectProperty_template';

		export class VOWLDatatypeObjectPropertyTemplate extends Component<TemplateProps, {}> {


		import { TemplateProps } from '../props';

		const CLASS_NAME = 'ontodia-default-owl_template';


		const CLASS_NAME = 'ontodia-default-owl_template';

		export class DefaultElementTemplateOwl extends React.Component<TemplateProps, {}> {


		const CLASS_NAME = 'ontodia-VOWLClass_template';

		export class VOWLClassTemplate extends Component<TemplateProps, {}> {


		const CLASS_NAME = 'ontodia-vowl-property-template';

		export class vowlPropertyTemplate extends Component<TemplateProps, {}> {

Conversation

toefl commented Oct 31, 2017

Uh oh!

AlexeyMz commented Oct 31, 2017

Uh oh!

toefl commented Nov 2, 2017

Uh oh!

yuricus left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

toefl Nov 5, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

toefl commented Nov 13, 2017

Uh oh!

AlexeyMz commented Nov 13, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexeyMz Nov 13, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

toefl Nov 5, 2017 •

edited

Loading

AlexeyMz Nov 13, 2017 •

edited

Loading