Include changes from v0.10.0

CHANGELOG.md

@@ -6,6 +6,31 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Latest]
 
+## [0.10.0] - 2019-09-30
+### Added
+- Custom element state in the serialized diagram layout via
+`elementTemplateState` property.
+- Enhance standard template with ability to "pin" properties to display them
+even in collapsed state.
+- Add options to override `selectLabelLanguage` to customize label language
+selection based on user-preferred language.
+
+### Changed
+- **[Breaking]** New look for collapsible sidebar panels,
+remove sidebar expand/collapse state props from `ToolbarProps`.
+- Use first character of types instead of label as thubmnail fallback in
+standard element template.
+- Highlight single-selected nodes with additional border in Halo.
+- Changed the look for temporary elements in authoring mode.
+
+### Fixed
+- Incorrectly overlapping authoring status overlays of elements and links
+(new, changed, deleted, etc).
+- Scrolling to canvas location on navigator click when there are any vertical
+scrolling on a page (`Window.pageYOffset` is not zero).
+- Bias in layout algorithms making diagrams look too vertical.
+- Drag'n'drop button to create entity from class tree in Firefox.
+
 ## [0.9.12] - 2019-08-27
 ### Added
 - Bringing selected elements to front
@@ -450,8 +475,9 @@ info loaded from `DataProvider`.
 ### Added
 - Ontodia published on GitHub as OSS project.
 
-[Latest]: https://github.com/metaphacts/ontodia/compare/v0.9.12...HEAD
-[0.9.11]: https://github.com/metaphacts/ontodia/compare/v0.9.11...v0.9.12
+[Latest]: https://github.com/metaphacts/ontodia/compare/v0.10.0...HEAD
+[0.10.0]: https://github.com/metaphacts/ontodia/compare/v0.9.12...v0.10.0
+[0.9.12]: https://github.com/metaphacts/ontodia/compare/v0.9.11...v0.9.12
 [0.9.11]: https://github.com/metaphacts/ontodia/compare/v0.9.10...v0.9.11
 [0.9.10]: https://github.com/metaphacts/ontodia/compare/v0.9.9...v0.9.10
 [0.9.9]: https://github.com/metaphacts/ontodia/compare/v0.9.8...v0.9.9

package.json

@@ -67,8 +67,8 @@
     "sass-loader": "7.1.0",
     "style-loader": "0.23.0",
     "ts-loader": "5.1.1",
-    "tslib": "1.9.3",
-    "tslint": "5.11.0",
+    "tslib": "1.10.0",
+    "tslint": "5.20.0",
     "typescript": "3.0.3",
     "url-loader": "1.1.1",
     "webpack": "4.19.0",

schema/context-v1.json

@@ -12,7 +12,7 @@
     "links": {"@id": "ontodia:hasLink", "@container": "@set"},
 
     "Element": "ontodia:Element",
-    "iri": {"@id": "ontodia:resource", "@type": "@vocab"},
+    "iri": {"@id": "ontodia:resource", "@type": "@id"},
     "position": "ontodia:position",
     "x": {"@id": "ontodia:xCoordValue"},
     "y": {"@id": "ontodia:yCoordValue"},
@@ -30,6 +30,7 @@
     "LinkTypeOptions": "ontodia:LinkTypeOptions",
     "visible": "ontodia:visible",
     "showLabel": "ontodia:showLabel",
+    "elementState": "ontodia:elementState",
     "linkState": "ontodia:linkState"
   }
 }

src/examples/resources/exampleMetadataApi.ts

@@ -1,6 +1,6 @@
 import {
     ElementModel, LinkModel, ElementTypeIri, LinkTypeIri, PropertyTypeIri, MetadataApi, CancellationToken,
-    AuthoringKind, LinkChange, ValidationApi, ValidationEvent, ElementError, LinkError, formatLocalizedLabel,
+    AuthoringKind, LinkChange, ValidationApi, ValidationEvent, ElementError, LinkError,
     LinkDirection, ElementIri,
 } from '../../index';
 import { DirectedLinkType } from '../../ontodia/diagram/elements';
@@ -137,11 +137,10 @@ export class ExampleValidationApi implements ValidationApi {
                         message: 'Cannot add any new link from a Class',
                     });
                     const linkType = event.model.createLinkType(newLinkEvent.after.linkTypeId);
-                    const linkTypeLabel = formatLocalizedLabel(linkType.id, linkType.label, 'en');
                     errors.push({
                         type: 'element',
                         target: event.target.id,
-                        message: `Cannot create "${linkTypeLabel}" link from a Class`,
+                        message: `Cannot create <${linkType.id}> link from a Class`,
                     });
                 });
         }

src/examples/wikidata.ts

@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom';
 
 import {
     Workspace, WorkspaceProps, SparqlDataProvider, WikidataSettings, SparqlQueryMethod, PropertySuggestionParams,
-    PropertyScore, formatLocalizedLabel
+    PropertyScore
 } from '../index';
 
 import { onPageLoad, tryLoadLayoutFromLocalStorage, saveLayoutToLocalStorage } from './common';
@@ -14,11 +14,9 @@ let workspace: Workspace;
 
 function getElementLabel(id: string): string {
     const model = workspace.getModel();
-    const diagram = workspace.getDiagram();
+    const view = workspace.getDiagram();
     const element = model.getElement(id);
-    return element ? formatLocalizedLabel(
-        element.iri, element.data.label.values, diagram.getLanguage()
-    ) : '';
+    return element ? view.formatLabel(element.data.label.values, element.iri) : '';
 }
 
 function wikidataSuggestProperties(params: PropertySuggestionParams) {

src/index.ts

@@ -22,11 +22,13 @@ export * from './ontodia/data/sparql/sparqlGraphBuilder';
 export { DIAGRAM_CONTEXT_URL_V1 } from './ontodia/data/schema';
 
 export { RestoreGeometry } from './ontodia/diagram/commands';
-export { Element, ElementEvents, Link, LinkEvents, LinkVertex, Cell, LinkDirection } from './ontodia/diagram/elements';
+export {
+    Element, ElementEvents, ElementTemplateState, Link, LinkEvents, LinkTemplateState, LinkVertex, Cell, LinkDirection
+} from './ontodia/diagram/elements';
 export { EmbeddedLayer } from './ontodia/diagram/embeddedLayer';
 export * from './ontodia/diagram/geometry';
 export * from './ontodia/diagram/history';
-export * from './ontodia/diagram/model';
+export { DiagramModel, DiagramModelEvents } from './ontodia/diagram/model';
 export * from './ontodia/diagram/view';
 export {
     PointerEvent, PointerUpEvent, getContentFittingBox, ViewportOptions, ScaleOptions,
@@ -44,19 +46,23 @@ export {
     LayoutData, LayoutElement, LayoutLink, SerializedDiagram,
     convertToSerializedDiagram, makeSerializedDiagram, LinkTypeOptions, makeLayoutData
 } from './ontodia/editor/serializedDiagram';
-export { recursiveLayout, recursiveForceLayout } from './ontodia/viewUtils/layout';
+export {
+    calculateLayout, removeOverlaps, CalculatedLayout,
+    UnzippedCalculatedLayout, LayoutNode, applyLayout, forceLayout,
+} from './ontodia/viewUtils/layout';
 
 export { Cancellation, CancellationToken } from './ontodia/viewUtils/async';
 export * from './ontodia/viewUtils/events';
 
 export { PropertySuggestionParams, PropertyScore } from './ontodia/widgets/connectionsMenu';
 
-export * from './ontodia/workspace/toolbar';
+export { DefaultToolbar, ToolbarProps } from './ontodia/workspace/toolbar';
 export {
-    Workspace, WorkspaceProps, WorkspaceLanguage, renderTo,
+    Workspace, WorkspaceProps, WorkspaceState, WorkspaceLanguage, renderTo,
 } from './ontodia/workspace/workspace';
 export { WorkspaceEventHandler, WorkspaceEventKey } from './ontodia/workspace/workspaceContext';
 export { DraggableHandle } from './ontodia/workspace/draggableHandle';
+export * from './ontodia/workspace/layout/layout';
 
 import * as InternalApi from './internalApi';
 export { InternalApi };

src/internalApi.ts

@@ -1,5 +1,7 @@
 export { LINK_SHOW_IRI } from './ontodia/customization/defaultLinkStyles';
 
+export { TemplateProperties } from './ontodia/data/schema';
+
 export * from './ontodia/diagram/paper';
 export * from './ontodia/diagram/paperArea';
 
@@ -13,3 +15,7 @@ export * from './ontodia/widgets/listElementView';
 export {
     WorkspaceContext, WorkspaceContextWrapper, WorkspaceContextTypes,
 } from './ontodia/workspace/workspaceContext';
+
+export {
+    groupForceLayout, groupRemoveOverlaps, padded, biasFreePadded, getContentFittingBoxForLayout,
+} from './ontodia/viewUtils/layout';

src/ontodia/customization/templates/standard.tsx

@@ -3,9 +3,11 @@ import { Component } from 'react';
 
 import { isEncodedBlank } from '../../data/sparql/blankNodes';
 
-import { TemplateProps } from '../props';
+import { TemplateProps, PropArray } from '../props';
 import { getProperty, getPropertyValues } from './utils';
 
+import { TemplateProperties } from '../../data/schema';
+
 import { AuthoredEntity, AuthoredEntityContext } from '../../editor/authoredEntity';
 import { AuthoringState } from '../../editor/authoringState';
 
@@ -25,32 +27,40 @@ export class StandardTemplate extends Component<TemplateProps, {}> {
     }
 
     private renderTemplate(context: AuthoredEntityContext) {
-        const {color, types, isExpanded, iri} = this.props;
+        const {color, types, isExpanded, iri, propsAsList} = this.props;
         const label = this.getLabel();
 
         const {editor} = context;
         const isNewElement = AuthoringState.isNewElement(editor.authoringState, iri);
         const leftStripeColor = isNewElement ? 'white' : color;
+        const pinnedProperties = this.findPinnedProperties(context);
 
         return (
             <div className={CLASS_NAME}>
                 <div className={`${CLASS_NAME}__main`} style={{backgroundColor: leftStripeColor, borderColor: color}}>
                     <div className={`${CLASS_NAME}__body`} style={{borderLeftColor: color}}>
-                        {this.renderThumbnail()}
-                        <div className={`${CLASS_NAME}__body-content`}>
-                            <div title={types} className={`${CLASS_NAME}__type`}>
-                                <div className={`${CLASS_NAME}__type-value`}>{this.getTypesLabel()}</div>
+                        <div className={`${CLASS_NAME}__body-horizontal`}>
+                            {this.renderThumbnail()}
+                            <div className={`${CLASS_NAME}__body-content`}>
+                                <div title={types} className={`${CLASS_NAME}__type`}>
+                                    <div className={`${CLASS_NAME}__type-value`}>{this.getTypesLabel()}</div>
+                                </div>
+                                <div className={`${CLASS_NAME}__label`} title={label}>{label}</div>
                             </div>
-                            <div className={`${CLASS_NAME}__label`} title={label}>{label}</div>
                         </div>
+                        {pinnedProperties ? (
+                            <div className={`${CLASS_NAME}__pinned-props`} style={{borderColor: color}}>
+                                {this.renderProperties(pinnedProperties)}
+                            </div>
+                        ) : null}
                     </div>
                 </div>
                 {isExpanded ? (
                     <div className={`${CLASS_NAME}__dropdown`} style={{borderColor: color}}>
                         {this.renderPhoto()}
                         <div className={`${CLASS_NAME}__dropdown-content`}>
                             {this.renderIri()}
-                            {this.renderProperties()}
+                            {this.renderProperties(propsAsList)}
                             {editor.inAuthoringMode ? <hr className={`${CLASS_NAME}__hr`} /> : null}
                             {editor.inAuthoringMode ? this.renderActions(context) : null}
                         </div>
@@ -60,9 +70,18 @@ export class StandardTemplate extends Component<TemplateProps, {}> {
         );
     }
 
-    private renderProperties() {
-        const {propsAsList} = this.props;
+    private findPinnedProperties(context: AuthoredEntityContext): PropArray | undefined {
+        const {isExpanded, propsAsList, elementId} = this.props;
+        if (isExpanded) { return undefined; }
+        const templateState = context.view.model.getElement(elementId).elementState;
+        if (!templateState) { return undefined; }
+        const pinned = templateState[TemplateProperties.PinnedProperties] as PinnedProperties;
+        if (!pinned) { return undefined; }
+        const filtered = propsAsList.filter(prop => Boolean(pinned[prop.id]));
+        return filtered.length === 0 ? undefined : filtered;
+    }
 
+    private renderProperties(propsAsList: PropArray) {
         if (!propsAsList.length) {
             return <div>no properties</div>;
         }
@@ -136,10 +155,10 @@ export class StandardTemplate extends Component<TemplateProps, {}> {
             );
         }
 
-        const label = this.getLabel();
+        const typeLabel = this.getTypesLabel();
         return (
             <div className={`${CLASS_NAME}__thumbnail`} aria-hidden='true' style={{color}}>
-                {label.charAt(0).toUpperCase()}
+                {typeLabel.length > 0 ? typeLabel.charAt(0).toUpperCase() : '✳'}
             </div>
         );
     }
@@ -183,3 +202,7 @@ export class StandardTemplate extends Component<TemplateProps, {}> {
         );
     }
 }
+
+interface PinnedProperties {
+    [propertyId: string]: boolean;
+}

src/ontodia/data/composite/composite.ts

@@ -58,7 +58,7 @@ export class CompositeDataProvider implements DataProvider {
     }
 
     classTree(): Promise<ClassModel[]> {
-        return this.fetchSequentially('classTree', mergeClassTree);
+        return this.fetchSequentially('classTree', mergeClassTree, undefined);
     }
 
     propertyInfo(params: { propertyIds: PropertyTypeIri[] }): Promise<Dictionary<PropertyModel>> {
@@ -99,7 +99,7 @@ export class CompositeDataProvider implements DataProvider {
     }
 
     linkTypes(): Promise<LinkType[]> {
-        return this.fetchSequentially('linkTypes', mergeLinkTypes);
+        return this.fetchSequentially('linkTypes', mergeLinkTypes, undefined);
     }
 
     elementInfo(params: { elementIds: ElementIri[] }): Promise<Dictionary<ElementModel>> {
@@ -223,12 +223,24 @@ export class CompositeDataProvider implements DataProvider {
         return recursiveCall();
     }
 
-    private fetchSequentially<ResponseType>(
-        functionName: keyof DataProvider, mergeFunction: (...args: any[]) => ResponseType, params?: any,
+    private fetchSequentially<K extends keyof DataProvider>(
+        functionName: K,
+        mergeFunction: (response: CompositeResponse<OperationResult<K>>[]) => OperationResult<K>,
+        params: OperationParams<K>,
     ) {
-        const resultPromises = this.dataProviders.map((dp: DPDefinition) =>
-            this.processResults(dp.dataProvider[functionName].call(dp.dataProvider, params), dp.name, dp.useInStats)
-        );
+        const resultPromises = this.dataProviders.map((dp: DPDefinition) => {
+            const providerMethod = dp.dataProvider[functionName] as any as
+                (this: DataProvider, params: OperationParams<K>) => Promise<OperationResult<K>>;
+            return this.processResults(providerMethod.call(dp.dataProvider, params), dp.name, dp.useInStats);
+        });
         return Promise.all(resultPromises).then(mergeFunction);
     }
 }
+
+type OperationParams<K> = any;
+type OperationResult<K> = any;
+// TODO: replace on compiler update
+// type OperationParams<K extends keyof DataProvider> =
+//     DataProvider[K] extends (params: infer P) => any ? P : never;
+// type OperationResult<K extends keyof DataProvider> =
+//     ReturnType<DataProvider[K]> extends Promise<infer R> ? R : never;

src/ontodia/data/schema.ts

@@ -1,4 +1,4 @@
-import { ElementIri, ElementTypeIri, LinkTypeIri } from './model';
+import { ElementTypeIri, LinkTypeIri } from './model';
 import { generate128BitID } from './utils';
 
 // context could be imported directly from NPM package, e.g.
@@ -13,3 +13,8 @@ export namespace GenerateID {
     export function forElement() { return `${ONTODIA_ID_URL_PREFIX}e_${generate128BitID()}`; }
     export function forLink() { return `${ONTODIA_ID_URL_PREFIX}l_${generate128BitID()}`; }
 }
+
+export namespace TemplateProperties {
+    export const PinnedProperties = 'ontodia:pinnedProperties';
+    export const CustomLabel = 'ontodia:customLabel';
+}

src/ontodia/data/sparql/blankNodes.ts

@@ -1,6 +1,6 @@
 import { Dictionary } from '../model';
 import { FilterParams } from '../provider';
-import { uri2name } from '../utils';
+import { getUriLocalName } from '../utils';
 
 import { SparqlDataProviderSettings } from './sparqlDataProviderSettings';
 import {
@@ -199,7 +199,7 @@ export function createLabelForBlankBinding(bn: BlankBinding): RdfLiteral {
     } else {
         return {
             type: 'literal',
-            value: bn.class ? uri2name(bn.class.value) : 'anonymous',
+            value: bn.class ? (getUriLocalName(bn.class.value) || bn.class.value) : 'anonymous',
             'xml:lang': '',
         };
     }

src/ontodia/data/utils.ts

@@ -29,19 +29,19 @@ export function hashFnv32a(str: string, seed = 0x811c9dc5): number {
     /* tslint:enable:no-bitwise */
 }
 
-export function uri2name(uri: string): string {
-    const hashIndex = uri.lastIndexOf('#');
-    if (hashIndex !== -1 && hashIndex !== uri.length - 1) {
-        return uri.substring(hashIndex + 1);
+/**
+ * Extracts local name for URI the same way as it's done in RDF4J.
+ */
+export function getUriLocalName(uri: string): string | undefined {
+    let index = uri.indexOf('#');
+    if (index < 0) {
+        index = uri.lastIndexOf('/');
     }
-    const endsWithSlash = uri[uri.length - 1] === '/';
-    if (endsWithSlash) {
-        uri = uri.substring(0, uri.length - 1);
+    if (index < 0) {
+        index = uri.lastIndexOf(':');
     }
-
-    const lastPartStart = uri.lastIndexOf('/');
-    if (lastPartStart !== -1 && lastPartStart !== uri.length - 1) {
-        return uri.substring(lastPartStart + 1);
+    if (index < 0) {
+        return undefined;
     }
-    return uri;
+    return uri.substring(index + 1);
 }