33 |
61 | );
62 | }
63 | }
64 |
65 | function onWorkspaceMounted(workspace: Workspace) {
66 | if (!workspace) {
67 | return;
68 | }
69 |
70 | const model = workspace.getModel();
71 |
72 | const diagram = tryLoadLayoutFromLocalStorage();
73 | model.importLayout({
74 | dataProvider: new DemoDataProvider(CLASSES, LINK_TYPES, ELEMENTS, LINKS),
75 | diagram,
76 | validateLinks: true,
77 | });
78 | }
79 |
80 | const props: WorkspaceProps & React.ClassAttributes
34 |
35 |
38 |
39 |
50 |
57 |
58 |
59 |
60 |
15 | 
16 |
17 | ) : undefined;
18 |
19 | const expander = props.isExpanded ? (
20 |
16 |
21 |
36 | {this.renderPropertyTable()} 37 |
38 | ) : null;
39 |
40 | return (
41 |
22 |
35 |
23 | IRI:
24 |
25 |
26 |
31 | {props.iri}
32 |
33 |
34 | 36 | {this.renderPropertyTable()} 37 |
49 |
82 | );
83 | }
84 |
85 | renderPropertyTable() {
86 | const { propsAsList } = this.props;
87 | if (propsAsList && propsAsList.length > 0) {
88 | return (
89 |
53 |
59 |
68 | {image}
69 |
63 |
67 |
64 | {props.types}
65 |
66 |
73 |
77 | {props.label}
78 |
79 | {expander}
80 |
81 |
90 | {propsAsList.map((prop) => {
91 | const propertyValues = getPropertyValues(prop.property);
92 | const values = propertyValues.map((text, index) => (
93 |
119 | );
120 | } else {
121 | return
98 | {text}
99 |
100 | ));
101 | return (
102 |
106 |
116 | );
117 | })}
118 |
110 | {prop.name}
111 |
112 |
113 | {values}
114 |
115 | no properties
;
122 | }
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/src/graph-explorer/customization/templates/group.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { TemplateProps } from "../props";
4 | import { EmbeddedLayer } from "../../diagram/embeddedLayer";
5 |
6 | const CLASS = "graph-explorer-group-template";
7 |
8 | export class GroupTemplate extends React.Component
14 |
41 | );
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/graph-explorer/customization/templates/index.ts:
--------------------------------------------------------------------------------
1 | import { TemplateResolver } from "../props";
2 |
3 | export * from "./default";
4 | export * from "./group";
5 | export * from "./standard";
6 |
7 | export const DefaultElementTemplateBundle: TemplateResolver = (_types) =>
8 | undefined;
9 |
--------------------------------------------------------------------------------
/src/graph-explorer/customization/templates/utils.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Dictionary,
3 | Property,
4 | isIriProperty,
5 | isLiteralProperty,
6 | } from "../../data/model";
7 |
8 | export function getProperty(props: Dictionary
21 |
40 |
22 |
29 |
23 | 
24 |
25 |
26 |
28 | {types}
27 |
30 |
31 | {label}
32 |
33 | {isExpanded ? (
34 |
39 |
35 |
37 | ) : null}
38 |
103 |
144 | );
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/graph-explorer/forms/editLinkLabelForm.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { Link } from "../diagram/elements";
4 | import { DiagramView } from "../diagram/view";
5 |
6 | const CLASS_NAME = "graph-explorer-edit-form";
7 |
8 | export interface Props {
9 | view: DiagramView;
10 | link: Link;
11 | onApply: (label: string) => void;
12 | onCancel: () => void;
13 | }
14 |
15 | export interface State {
16 | label?: string;
17 | }
18 |
19 | export class EditLinkLabelForm extends React.Component
104 |
112 | this.setState({
113 | linkValue: {
114 | value,
115 | error: undefined,
116 | validated: false,
117 | allowChange: false,
118 | },
119 | })
120 | }
121 | />
122 | {isValidating ? (
123 |
128 |
124 |
126 | ) : null}
127 |
129 |
136 |
142 |
143 |
52 |
79 | );
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/graph-explorer/index.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-require-imports
2 | require("../../styles/main.scss");
3 |
4 | export * from "./customization/props";
5 | export * from "./customization/templates";
6 |
7 | export * from "./data/model";
8 | export * from "./data/metadataApi";
9 | export * from "./data/validationApi";
10 | export * from "./data/provider";
11 | export { PLACEHOLDER_ELEMENT_TYPE, PLACEHOLDER_LINK_TYPE } from "./data/schema";
12 | export * from "./data/demo/provider";
13 | export {
14 | RdfNode,
15 | RdfIri,
16 | RdfLiteral,
17 | Triple,
18 | } from "./data/sparql/sparqlModels";
19 | export * from "./data/sparql/sparqlDataProvider";
20 | export * from "./data/composite/composite";
21 | export * from "./data/sparql/sparqlDataProviderSettings";
22 | export * from "./data/sparql/graphBuilder";
23 | export * from "./data/sparql/sparqlGraphBuilder";
24 | export { DIAGRAM_CONTEXT_URL_V1 } from "./data/schema";
25 |
26 | export {
27 | RestoreGeometry,
28 | setElementExpanded,
29 | setElementData,
30 | setLinkData,
31 | } from "./diagram/commands";
32 | export {
33 | Element,
34 | ElementEvents,
35 | ElementTemplateState,
36 | Link,
37 | LinkEvents,
38 | LinkTemplateState,
39 | LinkVertex,
40 | Cell,
41 | LinkDirection,
42 | } from "./diagram/elements";
43 | export { EmbeddedLayer } from "./diagram/embeddedLayer";
44 | export * from "./diagram/geometry";
45 | export * from "./diagram/history";
46 | export { DiagramModel, DiagramModelEvents } from "./diagram/model";
47 | export * from "./diagram/view";
48 | export {
49 | PointerEvent,
50 | PointerUpEvent,
51 | getContentFittingBox,
52 | ViewportOptions,
53 | ScaleOptions,
54 | } from "./diagram/paperArea";
55 |
56 | export * from "./editor/asyncModel";
57 | export {
58 | AuthoredEntity,
59 | AuthoredEntityProps,
60 | AuthoredEntityContext,
61 | } from "./editor/authoredEntity";
62 | export * from "./editor/authoringState";
63 | export {
64 | EditorOptions,
65 | EditorEvents,
66 | EditorController,
67 | PropertyEditor,
68 | PropertyEditorOptions,
69 | } from "./editor/editorController";
70 | export {
71 | ValidationState,
72 | ElementValidation,
73 | LinkValidation,
74 | } from "./editor/validation";
75 |
76 | export {
77 | LayoutData,
78 | LayoutElement,
79 | LayoutLink,
80 | SerializedDiagram,
81 | convertToSerializedDiagram,
82 | makeSerializedDiagram,
83 | LinkTypeOptions,
84 | makeLayoutData,
85 | } from "./editor/serializedDiagram";
86 | export {
87 | calculateLayout,
88 | removeOverlaps,
89 | CalculatedLayout,
90 | UnzippedCalculatedLayout,
91 | LayoutNode,
92 | applyLayout,
93 | forceLayout,
94 | } from "./viewUtils/layout";
95 |
96 | export {
97 | Cancellation,
98 | CancellationToken,
99 | CancelledError,
100 | } from "./viewUtils/async";
101 | export * from "./viewUtils/events";
102 |
103 | export {
104 | PropertySuggestionParams,
105 | PropertyScore,
106 | } from "./widgets/connectionsMenu";
107 |
108 | export { DefaultToolbar, ToolbarProps } from "./workspace/toolbar";
109 | export {
110 | Workspace,
111 | WorkspaceProps,
112 | WorkspaceState,
113 | WorkspaceLanguage,
114 | renderTo,
115 | } from "./workspace/workspace";
116 | export {
117 | WorkspaceEventHandler,
118 | WorkspaceEventKey,
119 | } from "./workspace/workspaceContext";
120 | export { DraggableHandle } from "./workspace/draggableHandle";
121 | export * from "./workspace/layout/layout";
122 |
123 | import * as InternalApi from "./internalApi";
124 | export { InternalApi };
125 |
--------------------------------------------------------------------------------
/src/graph-explorer/internalApi.ts:
--------------------------------------------------------------------------------
1 | export { LINK_SHOW_IRI } from "./customization/defaultLinkStyles";
2 |
3 | export { TemplateProperties } from "./data/schema";
4 |
5 | export * from "./diagram/paper";
6 | export * from "./diagram/paperArea";
7 |
8 | export * from "./viewUtils/async";
9 | export * from "./viewUtils/collections";
10 | export * from "./viewUtils/keyedObserver";
11 | export * from "./viewUtils/spinner";
12 |
13 | export * from "./widgets/listElementView";
14 | export * from "./widgets/searchResults";
15 |
16 | export {
17 | WorkspaceContext,
18 | WorkspaceContextWrapper,
19 | WorkspaceContextTypes,
20 | } from "./workspace/workspaceContext";
21 |
22 | export {
23 | groupForceLayout,
24 | groupRemoveOverlaps,
25 | padded,
26 | biasFreePadded,
27 | getContentFittingBoxForLayout,
28 | } from "./viewUtils/layout";
29 |
--------------------------------------------------------------------------------
/src/graph-explorer/viewUtils/events.ts:
--------------------------------------------------------------------------------
1 | export type Listener
53 |
64 |
54 |
55 |
59 | this.setState({ label: (e.target as HTMLInputElement).value })
60 | }
61 | />
62 |
63 |
65 |
71 |
77 |
78 |
58 | {highlightSubstring(localizedText, highlightText)}
59 |
60 |
26 |
34 |
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/graph-explorer/workspace/accordionItem.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { DraggableHandle } from "./draggableHandle";
4 |
5 | export enum DockSide {
6 | Left = 1,
7 | Right,
8 | }
9 |
10 | export interface Props {
11 | heading?: React.ReactNode;
12 | bodyClassName?: string;
13 | bodyRef?: (body: HTMLDivElement) => void;
14 | children?: React.ReactNode;
15 | defaultSize?: number;
16 | defaultCollapsed?: boolean;
17 | collapsedSize?: number;
18 | minSize?: number;
19 |
20 | // props provided by Accordion
21 | collapsed?: boolean;
22 | size?: number | string;
23 | direction?: "vertical" | "horizontal";
24 | dockSide?: DockSide;
25 | onChangeCollapsed?: (collapsed: boolean) => void;
26 | onBeginDragHandle?: () => void;
27 | onDragHandle?: (dx: number, dy: number) => void;
28 | onEndDragHandle?: () => void;
29 | }
30 |
31 | const CLASS_NAME = "graph-explorer-accordion-item";
32 |
33 | export interface State {
34 | resizing?: boolean;
35 | }
36 |
37 | export class AccordionItem extends React.Component onChangeCollapsed(!collapsed)}
73 | />
74 | );
75 | }
76 |
77 | render() {
78 | const {
79 | heading,
80 | bodyClassName,
81 | children,
82 | bodyRef,
83 | collapsed,
84 | size,
85 | direction,
86 | onBeginDragHandle,
87 | onDragHandle,
88 | onEndDragHandle,
89 | dockSide,
90 | } = this.props;
91 | const { resizing } = this.state;
92 | const shouldRenderHandle =
93 | onBeginDragHandle && onDragHandle && onEndDragHandle;
94 | const style: React.CSSProperties = this.isVertical
95 | ? { height: size }
96 | : { width: size };
97 |
98 | // unmount child component when the accordion item is collapsed and has dockSide
99 | const isMounted = !(collapsed && dockSide);
100 |
101 | return (
102 | {
4 | onBeginDragHandle: (e: React.MouseEvent) => void;
5 | onDragHandle: (e: MouseEvent, dx: number, dy: number) => void;
6 | onEndDragHandle?: (e: MouseEvent) => void;
7 | }
8 |
9 | export class DraggableHandle extends React.Component {
10 | private isHoldingMouse = false;
11 | private originPageX: number;
12 | private originPageY: number;
13 |
14 | render() {
15 | // remove custom handlers from `div` props
16 | const {
17 | onBeginDragHandle: _onBeginDragHandle,
18 | onDragHandle: _onDragHandle,
19 | onEndDragHandle: _onEndDragHandle,
20 | ...props
21 | } = this.props;
22 | return (
23 | ) => {
34 | if (e.target !== e.currentTarget) {
35 | return;
36 | }
37 | if (this.isHoldingMouse) {
38 | return;
39 | }
40 |
41 | const LEFT_BUTTON = 0;
42 | if (e.button !== LEFT_BUTTON) {
43 | return;
44 | }
45 |
46 | this.isHoldingMouse = true;
47 | this.originPageX = e.pageX;
48 | this.originPageY = e.pageY;
49 | document.addEventListener("mousemove", this.onMouseMove);
50 | document.addEventListener("mouseup", this.onMouseUp);
51 | this.props.onBeginDragHandle(e);
52 | };
53 |
54 | private onMouseMove = (e: MouseEvent) => {
55 | if (!this.isHoldingMouse) {
56 | return;
57 | }
58 | e.preventDefault();
59 | this.props.onDragHandle(
60 | e,
61 | e.pageX - this.originPageX,
62 | e.pageY - this.originPageY
63 | );
64 | };
65 |
66 | private onMouseUp = (e: MouseEvent) => {
67 | this.removeListeners();
68 | if (this.props.onEndDragHandle) {
69 | this.props.onEndDragHandle(e);
70 | }
71 | };
72 |
73 | private removeListeners() {
74 | if (this.isHoldingMouse) {
75 | this.isHoldingMouse = false;
76 | document.removeEventListener("mousemove", this.onMouseMove);
77 | document.removeEventListener("mouseup", this.onMouseUp);
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/graph-explorer/workspace/layout/layout.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { Accordion } from "../accordion";
4 | import { AccordionItem, DockSide } from "../accordionItem";
5 |
6 | const DEFAULT_HORIZONTAL_COLLAPSED_SIZE = 28;
7 |
8 | export enum WorkspaceLayoutType {
9 | Row = "row",
10 | Column = "column",
11 | Component = "component",
12 | }
13 |
14 | export type WorkspaceLayoutNode = Container | Component;
15 |
16 | interface Container {
17 | type: WorkspaceLayoutType.Row | WorkspaceLayoutType.Column;
18 | children: readonly WorkspaceLayoutNode[];
19 | defaultSize?: number;
20 | defaultCollapsed?: boolean;
21 | collapsedSize?: number;
22 | minSize?: number;
23 | undocked?: boolean;
24 | animationDuration?: number;
25 | }
26 |
27 | interface Component {
28 | id: string;
29 | type: WorkspaceLayoutType.Component;
30 | content: React.ReactElement;
31 | heading?: React.ReactNode;
32 | defaultSize?: number;
33 | defaultCollapsed?: boolean;
34 | collapsedSize?: number;
35 | minSize?: number;
36 | undocked?: boolean;
37 | }
38 |
39 | export interface WorkspaceLayoutProps {
40 | layout: WorkspaceLayoutNode;
41 | _onStartResize?: (direction: "vertical" | "horizontal") => void;
42 | _onResize?: (direction: "vertical" | "horizontal") => void;
43 | }
44 |
45 | export class WorkspaceLayout extends React.Component {
46 | private renderAccordion({
47 | children,
48 | direction,
49 | animationDuration,
50 | }: {
51 | children: readonly WorkspaceLayoutNode[];
52 | direction: "horizontal" | "vertical";
53 | animationDuration?: number;
54 | }) {
55 | const { _onStartResize, _onResize } = this.props;
56 | const items = children.map((child, index) => {
57 | let dockSide: DockSide;
58 | if (direction === "horizontal" && !child.undocked) {
59 | if (index === 0) {
60 | dockSide = DockSide.Left;
61 | } else if (index === children.length - 1) {
62 | dockSide = DockSide.Right;
63 | }
64 | }
65 | let collapsedSize = child.collapsedSize;
66 | if (collapsedSize === undefined && direction === "horizontal") {
67 | collapsedSize = DEFAULT_HORIZONTAL_COLLAPSED_SIZE;
68 | }
69 | return (
70 |
83 | {this.renderLayout(child)}
84 |
85 | );
86 | });
87 | return (
88 |
94 | {items}
95 |
96 | );
97 | }
98 |
99 | private renderLayout(layout: WorkspaceLayoutNode) {
100 | if (layout.type === WorkspaceLayoutType.Row) {
101 | return this.renderAccordion({
102 | children: layout.children,
103 | direction: "horizontal",
104 | animationDuration: layout.animationDuration,
105 | });
106 | }
107 | if (layout.type === WorkspaceLayoutType.Column) {
108 | return this.renderAccordion({
109 | children: layout.children,
110 | direction: "vertical",
111 | animationDuration: layout.animationDuration,
112 | });
113 | }
114 | if (layout.type === WorkspaceLayoutType.Component) {
115 | return React.Children.only(layout.content);
116 | }
117 | return null;
118 | }
119 |
120 | render() {
121 | const { layout } = this.props;
122 | return this.renderLayout(layout);
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/src/graph-explorer/workspace/resizableSidebar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { DraggableHandle } from "./draggableHandle";
4 |
5 | export interface Props {
6 | className?: string;
7 | dockSide?: DockSide;
8 | defaultLength?: number;
9 | minLength?: number;
10 | maxLength?: number;
11 | isOpen?: boolean;
12 | onOpenOrClose?: (open: boolean) => void;
13 | onStartResize: () => void;
14 | children?: React.ReactNode;
15 | }
16 |
17 | export enum DockSide {
18 | Left = 1,
19 | Right,
20 | Top,
21 | Bottom,
22 | }
23 |
24 | export interface State {
25 | readonly open?: boolean;
26 | readonly length?: number;
27 | }
28 |
29 | const CLASS_NAME = "graph-explorer-drag-resizable-column";
30 |
31 | export class ResizableSidebar extends React.Component {
32 | static readonly defaultProps: Partial = {
33 | dockSide: DockSide.Left,
34 | minLength: 0,
35 | maxLength: 500,
36 | defaultLength: 275,
37 | isOpen: true,
38 | };
39 |
40 | private originWidth: number;
41 |
42 | constructor(props: Props) {
43 | super(props);
44 | this.state = {
45 | open: this.props.isOpen,
46 | length: this.defaultWidth(),
47 | };
48 | }
49 |
50 | componentDidUpdate(nextProps: Props) {
51 | if (this.state.open !== nextProps.isOpen) {
52 | this.toggle({ open: nextProps.isOpen });
53 | }
54 | }
55 |
56 | private defaultWidth() {
57 | const { defaultLength, maxLength } = this.props;
58 | return Math.min(defaultLength, maxLength);
59 | }
60 |
61 | private getSideClass() {
62 | switch (this.props.dockSide) {
63 | case DockSide.Left:
64 | return `${CLASS_NAME}--docked-left`;
65 | case DockSide.Right:
66 | return `${CLASS_NAME}--docked-right`;
67 | case DockSide.Top:
68 | return `${CLASS_NAME}--docked-top`;
69 | case DockSide.Bottom:
70 | return `${CLASS_NAME}--docked-bottom`;
71 | default:
72 | return "docked-right";
73 | }
74 | }
75 |
76 | private get isHorizontal(): boolean {
77 | return (
78 | this.props.dockSide === DockSide.Top ||
79 | this.props.dockSide === DockSide.Bottom
80 | );
81 | }
82 |
83 | render() {
84 | const { open, length } = this.state;
85 |
86 | const className =
87 | `${CLASS_NAME} ` +
88 | `${this.getSideClass()} ` +
89 | `${CLASS_NAME}--${open ? "opened" : "closed"} ` +
90 | `${this.props.className || ""}`;
91 |
92 | const style: any = {};
93 | style[this.isHorizontal ? "height" : "width"] = open ? length : 0;
94 | return (
95 |
(this._element = element)}
108 | style={style}
109 | >
110 | {
132 | this.setState({ resizing: true });
133 | onBeginDragHandle();
134 | }}
135 | onDragHandle={(_e, x, y) => onDragHandle(x, y)}
136 | onEndDragHandle={(_e) => {
137 | this.setState({ resizing: false });
138 | onEndDragHandle();
139 | }}
140 | />
141 | ) : null}
142 | {this.renderToggleButton()}
143 |
144 | );
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/graph-explorer/workspace/draggableHandle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export interface Props extends React.HTMLAttributes
111 | {heading ? (
112 |
128 | {shouldRenderHandle ? (
129 | (this._header = header)}
115 | onClick={() => this.props.onChangeCollapsed(!collapsed)}
116 | >
117 | {heading}
118 |
119 | ) : null}
120 |
121 | {children && isMounted ? (
122 | children
123 | ) : (
124 |
125 | )}
126 |
127 |
24 | {this.props.children}
25 |
26 | );
27 | }
28 |
29 | componentWillUnmount() {
30 | this.removeListeners();
31 | }
32 |
33 | private onHandleMouseDown = (e: React.MouseEvent
96 | {open ? this.props.children : null}
97 |
102 |
107 |
108 | );
109 | }
110 |
111 | private onBeginDragHandle = () => {
112 | this.originWidth = this.state.open ? this.state.length : 0;
113 | this.props.onStartResize();
114 | };
115 |
116 | private onDragHandle = (e: MouseEvent, dx: number, dy: number) => {
117 | let difference = this.isHorizontal ? dy : dx;
118 | if (this.props.dockSide === DockSide.Right) {
119 | difference = -difference;
120 | }
121 | const newWidth = this.originWidth + difference;
122 | const clampedWidth = Math.max(
123 | Math.min(newWidth, this.props.maxLength),
124 | this.props.minLength
125 | );
126 | const isOpen =
127 | this.props.minLength > 0 || clampedWidth > this.props.minLength;
128 | this.toggle({ open: isOpen, newWidth: clampedWidth });
129 | };
130 |
131 | private toggle(params: { open: boolean; newWidth?: number }) {
132 | const { open, newWidth } = params;
133 | const openChanged = open !== this.state.open;
134 | const onStateChanged = () => {
135 | if (openChanged && this.props.onOpenOrClose) {
136 | this.props.onOpenOrClose(open);
137 | }
138 | };
139 |
140 | const useDefaultWidth =
141 | open && this.state.length === 0 && newWidth === undefined;
142 | if (useDefaultWidth) {
143 | this.setState({ open, length: this.defaultWidth() }, onStateChanged);
144 | } else {
145 | this.setState(
146 | newWidth === undefined ? { open } : { open, length: newWidth },
147 | onStateChanged
148 | );
149 | }
150 | }
151 | }
152 |
--------------------------------------------------------------------------------
/src/graph-explorer/workspace/workspaceContext.ts:
--------------------------------------------------------------------------------
1 | import { PropTypes } from "../viewUtils/react";
2 | import { EditorController } from "../editor/editorController";
3 |
4 | export type WorkspaceEventHandler = (key: WorkspaceEventKey) => void;
5 | export enum WorkspaceEventKey {
6 | searchUpdateCriteria = "search:updateCriteria",
7 | searchQueryItem = "search:queryItems",
8 | connectionsLoadLinks = "connections:loadLinks",
9 | connectionsExpandLink = "connections:expandLink",
10 | connectionsLoadElements = "connections:loadElements",
11 | editorChangeSelection = "editor:changeSelection",
12 | editorToggleDialog = "editor:toggleDialog",
13 | editorAddElements = "editor:addElements",
14 | }
15 |
16 | export interface WorkspaceContextWrapper {
17 | workspace: WorkspaceContext;
18 | }
19 |
20 | export interface WorkspaceContext {
21 | editor: EditorController;
22 | triggerWorkspaceEvent: WorkspaceEventHandler;
23 | }
24 |
25 | export const WorkspaceContextTypes: {
26 | [K in keyof WorkspaceContextWrapper]: any;
27 | } = {
28 | workspace: PropTypes.anything,
29 | };
30 |
--------------------------------------------------------------------------------
/styles/diagram/_elementLayer.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-overlayed-element {
2 | cursor: move;
3 | outline: none;
4 | }
5 |
6 | .graph-explorer-overlayed-element,
7 | .graph-explorer-exported-element {
8 | // set defaults for all inherited properties
9 | box-sizing: border-box;
10 | color: black;
11 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
12 | font-size: 14px;
13 | line-height: 1.42857143;
14 |
15 | // http://stackoverflow.com/questions/6664460/line-height-affects-images
16 | img { vertical-align: middle; }
17 | }
18 |
19 | .graph-explorer-exported-element {
20 | *, *:before, *:after {
21 | box-sizing: inherit;
22 | }
23 | }
24 |
25 | .graph-explorer-overlayed-element--blurred {
26 | filter: grayscale(100%);
27 | opacity: 0.5;
28 | }
29 |
--------------------------------------------------------------------------------
/styles/diagram/_linkLayer.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-link {
2 | &__wrap {
3 | stroke-width: 12px;
4 | stroke-linejoin: round;
5 | stroke-linecap: round;
6 | stroke: transparent;
7 | fill: none;
8 | }
9 | &:hover &__wrap {
10 | stroke: rgba(140, 140, 140, 0.44);
11 | }
12 |
13 | &__vertex {
14 | cursor: all-scroll;
15 | }
16 | &:not(:hover) &__vertex {
17 | fill: transparent;
18 | }
19 |
20 | &__vertex-tools {
21 | opacity: 0;
22 | cursor: pointer;
23 | > circle { fill: gray; }
24 | > path { stroke: white; }
25 | &:hover {
26 | > circle { fill: black; }
27 | }
28 | }
29 | &:hover &__vertex-tools {
30 | opacity: 0.8;
31 | }
32 |
33 | &--blurred {
34 | opacity: 0.5;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/styles/diagram/_paperArea.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-paper-area {
2 | flex: auto;
3 | width: 0;
4 | display: flex;
5 | position: relative;
6 | cursor: default;
7 | background: #fff;
8 |
9 | &__area {
10 | flex: auto;
11 | overflow: hidden;
12 | }
13 |
14 | &__widgets {
15 | position: absolute;
16 | left: 0;
17 | top: 0;
18 | }
19 |
20 | &__watermark {
21 | background-size: cover;
22 | width: 8%;
23 | max-width: 130px;
24 | min-width: 50px;
25 | position: absolute;
26 | top: 15px;
27 | right: 25px;
28 | cursor: pointer;
29 | opacity: 0.3;
30 | transition: opacity 0.3s;
31 |
32 | &:hover {
33 | opacity: 0.5;
34 | }
35 | }
36 |
37 | &--hide-scrollbars {
38 | overflow: hidden;
39 | }
40 | }
41 |
42 | .graph-explorer-paper {
43 | position: relative;
44 | }
45 |
46 | .graph-explorer-exported-watermark {
47 | opacity: 0.3;
48 | transition: opacity 0.3s;
49 | }
50 |
--------------------------------------------------------------------------------
/styles/diagram/animation.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-paper-area--animated {
2 | .graph-explorer-overlayed-element {
3 | transition: transform 0.5s ease-in-out;
4 | }
5 | .graph-explorer-link-layer, .graph-explorer-paper-area__widgets {
6 | transition: none;
7 | opacity: 0;
8 | }
9 | }
10 |
11 | .graph-explorer-link-layer, .graph-explorer-paper-area__widgets {
12 | transition: opacity 0.5s ease-in-out;
13 | }
14 |
--------------------------------------------------------------------------------
/styles/editor/_authoringState.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-authoring-state {
2 | &__item-error {
3 | align-self: flex-end;
4 | margin: 0px 5px;
5 | display: flex;
6 | align-items: center;
7 | cursor: help;
8 | }
9 |
10 | &__item-error-icon {
11 | background: url("../images/font-awesome/exclamation-triangle.svg");
12 | height: 15px;
13 | width: 17px;
14 | }
15 |
16 | &__state-label {
17 | font-weight: bold;
18 | margin-right: 5px;
19 | }
20 |
21 | &__state-cancel {
22 | color: #3f87a6;
23 | cursor: pointer;
24 | &:hover {
25 | text-decoration: underline;
26 | }
27 | }
28 |
29 | &__state-indicator {
30 | position: absolute;
31 | }
32 | &__state-indicator-container {
33 | position: relative;
34 | }
35 | &__state-indicator-body {
36 | position: absolute;
37 | white-space: nowrap;
38 | display: flex;
39 | align-items: center;
40 | bottom: 0;
41 | background: rgba(255, 255, 255, 0.7);
42 | border-radius: 5px;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/styles/editor/_loadingWidget.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-loading-widget {
2 | left: 0;
3 | right: 0;
4 | top: 0;
5 | bottom: 0;
6 | margin: auto;
7 | position: absolute;
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | background: rgba(255, 255, 255, 0.9);
12 | z-index: 10;
13 | }
14 |
--------------------------------------------------------------------------------
/styles/main.scss:
--------------------------------------------------------------------------------
1 | @use "viewUtils/spinner";
2 | @use "viewUtils/clearfix";
3 | @use "viewUtils/label";
4 | @use "viewUtils/btn";
5 | @use "viewUtils/btn-group";
6 | @use "viewUtils/form-control";
7 | @use "viewUtils/input-group";
8 | @use "viewUtils/list-group";
9 | @use "viewUtils/badge";
10 |
11 | @use "diagram/elementLayer";
12 | @use "diagram/linkLayer";
13 | @use "diagram/paperArea";
14 | @use "diagram/animation";
15 |
16 | @use "editor/loadingWidget";
17 | @use "editor/authoringState";
18 |
19 | @use "widgets/authoringTools";
20 | @use "widgets/classTree";
21 | @use "widgets/connectionsMenu";
22 | @use "widgets/dialog";
23 | @use "widgets/editForm";
24 | @use "widgets/halo";
25 | @use "widgets/haloLink";
26 | @use "widgets/instancesSearch";
27 | @use "widgets/linksToolbox";
28 | @use "widgets/listElementView";
29 | @use "widgets/navigator";
30 | @use "widgets/progressBar";
31 | @use "widgets/searchResults";
32 |
33 | @use "workspace/accordion";
34 | @use "workspace/resizableSidebar";
35 | @use "workspace/tutorial";
36 | @use "workspace/toolbar";
37 | @use "workspace/workspace";
38 |
39 | @use "templates/icons";
40 | @use "templates/defaultElement";
41 | @use "templates/group";
42 | @use "templates/standard";
43 |
--------------------------------------------------------------------------------
/styles/templates/_defaultElement.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-default-template {
2 | max-width: 450px;
3 | float: left;
4 | border-radius: 12px;
5 | border-style: solid;
6 | border-width: 1px;
7 |
8 | &__thumbnail {
9 | text-align: center;
10 | > img {
11 | max-width: 200px;
12 | }
13 | }
14 |
15 | &[data-expanded='true'] &__thumbnail > img {
16 | max-width: 350px;
17 | }
18 | }
19 |
20 | .graph-explorer-default-template_type-line {
21 | padding: 0px 7px;
22 | color: white;
23 | height: 18px;
24 | margin-bottom: 2px;
25 | overflow: hidden;
26 | display: flex;
27 | align-items: baseline;
28 | margin-top: -3px;
29 | }
30 |
31 | div.graph-explorer-default-template_type-line__icon {
32 | position: inherit !important;
33 | margin-right: 4px;
34 | }
35 |
36 | .graph-explorer-default-template_type-line_text-container {
37 | flex-grow: 1;
38 | overflow: hidden;
39 | text-overflow: ellipsis;
40 | width: 0;
41 | }
42 | .graph-explorer-default-template_type-line_text-container__text {
43 | display: inline;
44 | white-space: nowrap;
45 | font-size: 12px;
46 | }
47 |
48 | .graph-explorer-default-template_body {
49 | border-bottom-left-radius: 12px;
50 | border-bottom-right-radius: 12px;
51 | border-top-style: solid;
52 | border-top-width: 1px;
53 | background: white;
54 | padding: 7px 10px 8px 10px;
55 | overflow: hidden;
56 | display: flex;
57 | flex-direction: column;
58 | }
59 |
60 | .graph-explorer-default-template_body__label {
61 | font-size: 19px;
62 | font-weight: 100;
63 | overflow: hidden;
64 | text-overflow: ellipsis;
65 | margin-bottom: 0;
66 | white-space: nowrap;
67 | word-wrap: break-word;
68 | }
69 |
70 | .graph-explorer-default-template_body_expander {
71 | width: 100%;
72 | overflow: hidden;
73 | display: flex;
74 | }
75 |
76 | .graph-explorer-default-template_body_expander__iri_label {
77 | font-size: 12px;
78 | font-weight: 100;
79 | margin-right: 15px;
80 | color: #b6b6b6;
81 | }
82 |
83 | .graph-explorer-default-template_body_expander_iri {
84 | font-size: 12px;
85 | width: 100%;
86 | overflow: hidden;
87 | white-space: nowrap;
88 | text-overflow: ellipsis;
89 | }
90 |
91 | .graph-explorer-default-template_body_expander_iri__link {
92 | color: #b6b6b6;
93 | }
94 |
95 | .graph-explorer-default-template_body_expander__hr {
96 | margin: 5px 0px 5px 0px;
97 | }
98 |
99 | .graph-explorer-default-template_body_expander_property-table {
100 | font-size: 15px;
101 | font-weight: 100;
102 | margin-bottom: 5px;
103 | max-height: 200px;
104 | overflow-y: scroll;
105 | overflow-x: hidden;
106 | }
107 |
108 | .graph-explorer-default-template_body_expander_property-table_row {
109 | white-space: nowrap;
110 | }
111 |
112 | .graph-explorer-default-template_body_expander_property-table_row__key {
113 | display: inline-block;
114 | width: 50%;
115 | text-overflow: ellipsis;
116 | overflow: hidden;
117 | vertical-align: top;
118 | }
119 |
120 | .graph-explorer-default-template_body_expander_property-table_row_key {
121 | display: inline-block;
122 | width: 50%;
123 | text-overflow: ellipsis;
124 | overflow: hidden;
125 | vertical-align: top;
126 | }
127 |
128 | .graph-explorer-default-template_body_expander_property-table_row_key_values {
129 | display: inline-block;
130 | width: 50%;
131 | text-overflow: ellipsis;
132 | overflow: hidden;
133 | }
134 |
135 | .graph-explorer-default-template_body_expander_property-table_row_key_values__value {
136 | width: 100%;
137 | overflow: hidden;
138 | text-overflow: ellipsis;
139 | white-space: initial;
140 | padding-right: 10px;
141 | }
142 |
--------------------------------------------------------------------------------
/styles/templates/_group.scss:
--------------------------------------------------------------------------------
1 | @use "./defaultElement";
2 |
3 | .graph-explorer-group-template {
4 | overflow: hidden;
5 |
6 | &__wrap {
7 | @extend .graph-explorer-default-template;
8 | max-width: none;
9 | }
10 |
11 | &__type-line {
12 | @extend .graph-explorer-default-template_type-line;
13 | }
14 |
15 | &__type-line-icon {
16 | @extend .graph-explorer-default-template_type-line__icon;
17 | }
18 |
19 | &__type-line-text-container {
20 | @extend .graph-explorer-default-template_type-line_text-container;
21 | }
22 |
23 | &__type-line-text {
24 | @extend .graph-explorer-default-template_type-line_text-container__text;
25 | }
26 |
27 | &__body {
28 | @extend .graph-explorer-default-template_body;
29 | overflow: visible;
30 | }
31 |
32 | &__label {
33 | @extend .graph-explorer-default-template_body__label;
34 | }
35 |
36 | &__embedded-layer {
37 | margin-top: 7px;
38 | }
39 |
40 | .graph-explorer-paper__canvas {
41 | border-color: #fff;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/styles/templates/_icons.scss:
--------------------------------------------------------------------------------
1 | .jstree-icon.jstree-themeicon.jstree-themeicon-custom {
2 | background-size: contain !important; // HACK: override background-size to fit in custom icons
3 | }
4 |
--------------------------------------------------------------------------------
/styles/templates/_standard.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-standard-template {
2 | min-width: 180px;
3 | max-width: 400px;
4 | float: left;
5 |
6 | &__main {
7 | border-radius: 2px;
8 | border: 1px solid;
9 | }
10 |
11 | &__body {
12 | margin-left: 8px;
13 | border-radius: 0 2px 2px 0;
14 | border-left: 1px solid;
15 | padding: 3px 0;
16 | background: #fafaf9;
17 | }
18 |
19 | &__body-horizontal {
20 | display: flex;
21 | align-items: center;
22 | justify-content: space-between;
23 | overflow: hidden;
24 | }
25 |
26 | &__body-content {
27 | flex-grow: 1;
28 | min-width: 0;
29 | margin-right: 12px;
30 | }
31 |
32 | &__label {
33 | font-size: 19px;
34 | white-space: nowrap;
35 | overflow: hidden;
36 | text-overflow: ellipsis;
37 | }
38 |
39 | &__thumbnail {
40 | font-size: 26px;
41 | margin: 5px 10px;
42 | flex-shrink: 0;
43 | width: 50px;
44 | height: 50px;
45 | display: flex;
46 | justify-content: center;
47 | align-items: center;
48 | }
49 |
50 | &__thumbnail-image {
51 | max-height: 100%;
52 | max-width: 100%;
53 | }
54 |
55 | &__thumbnail-icon {
56 | max-height: 26px;
57 | max-width: 26px;
58 | }
59 |
60 | &__photo {
61 | border-bottom: 1px solid;
62 | }
63 |
64 | &__photo-image {
65 | width: 100%;
66 | border-radius: 2px 2px 0 0;
67 | }
68 |
69 | &__type {
70 | white-space: nowrap;
71 | overflow: hidden;
72 | text-overflow: ellipsis;
73 | font-size: 11px;
74 | font-style: italic;
75 | color: #999;
76 | display: flex;
77 | }
78 |
79 | &__type-value {
80 | width: 0;
81 | flex-grow: 1;
82 | overflow: hidden;
83 | text-overflow: ellipsis;
84 | }
85 |
86 | &__iri {
87 | width: 100%;
88 | overflow: hidden;
89 | display: flex;
90 | }
91 |
92 | &__iri-key {
93 | font-size: 12px;
94 | margin-right: 4px;
95 | color: #b6b6b6;
96 | }
97 |
98 | &__iri-value {
99 | font-size: 12px;
100 | width: 100%;
101 | overflow: hidden;
102 | white-space: nowrap;
103 | text-overflow: ellipsis;
104 | }
105 |
106 | &__iri-value a {
107 | color: #b6b6b6;
108 | }
109 |
110 | &__hr {
111 | margin: 5px 0;
112 | }
113 |
114 | &__properties {
115 | font-size: 15px;
116 | max-height: 200px;
117 | overflow-y: scroll;
118 | overflow-x: hidden;
119 | }
120 |
121 | &__propertites-row {
122 | white-space: nowrap;
123 | }
124 |
125 | &__properties-key {
126 | display: inline-block;
127 | width: 50%;
128 | text-overflow: ellipsis;
129 | overflow: hidden;
130 | vertical-align: top;
131 | }
132 |
133 | &__properties-values {
134 | display: inline-block;
135 | width: 50%;
136 | text-overflow: ellipsis;
137 | overflow: hidden;
138 | }
139 |
140 | &__properties-value {
141 | width: 100%;
142 | overflow: hidden;
143 | text-overflow: ellipsis;
144 | white-space: initial;
145 | padding-right: 10px;
146 | }
147 |
148 | &__pinned-props {
149 | border-top: 1px solid;
150 | margin: 0 5px;
151 | }
152 |
153 | &__dropdown {
154 | border-radius: 2px;
155 | background-color: white;
156 | margin-top: 5px;
157 | border: 1px solid;
158 | }
159 |
160 | &__dropdown-content {
161 | width: 100%;
162 | padding: 9px;
163 | }
164 |
165 | &__actions {
166 | display: flex;
167 | justify-content: space-between;
168 | button {
169 | padding: 5px;
170 | min-width: 60px;
171 | }
172 | }
173 | }
174 |
--------------------------------------------------------------------------------
/styles/viewUtils/_badge.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-badge {
2 | display: inline-block;
3 | min-width: 10px;
4 | font-size: 12px;
5 | font-weight: 700;
6 | line-height: 1;
7 | color: rgb(255, 255, 255);
8 | text-align: center;
9 | white-space: nowrap;
10 | vertical-align: middle;
11 | background-color: rgb(119, 119, 119);
12 | padding: 3px 7px;
13 | border-radius: 10px;
14 | }
15 |
--------------------------------------------------------------------------------
/styles/viewUtils/_btn-group.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-btn-group {
2 | position: relative;
3 | display: inline-block;
4 | vertical-align: middle;
5 |
6 | > .graph-explorer-btn, > .graph-explorer-btn-group {
7 | position: relative;
8 | float: left;
9 | }
10 |
11 | > .graph-explorer-btn:hover,
12 | > .graph-explorer-btn:focus,
13 | > .graph-explorer-btn.active,
14 | > .graph-explorer-btn.active:hover {
15 | z-index: 2;
16 | }
17 |
18 | .graph-explorer-btn + .graph-explorer-btn,
19 | .graph-explorer-btn + .graph-explorer-btn-group,
20 | .graph-explorer-btn-group + .graph-explorer-btn,
21 | .graph-explorer-btn-group + .graph-explorer-btn-group {
22 | margin-left: -1px;
23 | }
24 |
25 | > .graph-explorer-btn:first-child {
26 | margin-left: 0;
27 | }
28 |
29 | &-sm > .graph-explorer-btn {
30 | font-size: 12px;
31 | line-height: 1.5;
32 | padding: 5px 10px;
33 | }
34 |
35 | &-xs > .graph-explorer-btn {
36 | font-size: 12px;
37 | line-height: 1.5;
38 | padding: 1px 5px;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/styles/viewUtils/_btn.scss:
--------------------------------------------------------------------------------
1 | @use "sass:color";
2 | .graph-explorer-btn {
3 | display: inline-block;
4 | padding: 6px 12px;
5 | margin-bottom: 0;
6 | font-size: 14px;
7 | font-weight: 400;
8 | line-height: 1.42857143;
9 | text-align: center;
10 | white-space: nowrap;
11 | vertical-align: middle;
12 | touch-action: manipulation;
13 | cursor: pointer;
14 | user-select: none;
15 | background-image: none;
16 | border: 1px solid transparent;
17 | text-transform: none;
18 | transition: background-color 0.3s;
19 |
20 | &[disabled] {
21 | cursor: not-allowed;
22 | opacity: .65;
23 | }
24 | }
25 |
26 |
27 | .graph-explorer-btn-default {
28 | background-color: #fff;
29 | border-color: #ccc;
30 | color: #333;
31 |
32 | &:hover {
33 | background-color: #e0e0e0;
34 | }
35 |
36 | &.active {
37 | background-color: #e0e0e0;
38 | border-color: #dbdbdb;
39 | }
40 |
41 | &.active:hover {
42 | background-color: #d4d4d4;
43 | border-color: #8c8c8c;
44 | }
45 |
46 | &[disabled], &[disabled]:hover, &[disabled].active, &[disabled].active:hover {
47 | background-color: #e0e0e0;
48 | }
49 | }
50 |
51 | .graph-explorer-btn-primary {
52 | color: rgb(255, 255, 255);
53 | background-color: rgb(51, 122, 183);
54 | border-color: #245580;
55 |
56 | &:hover, &:focus, &:active {
57 | background-color: #265a88;
58 | }
59 |
60 | &:hover, &:focus {
61 | border-color: #204d74;
62 | }
63 |
64 | &.active {
65 | border-color: #245580;
66 | }
67 |
68 | &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active, &[disabled].active {
69 | background-color: #265a88;
70 | }
71 | }
72 |
73 | .graph-explorer-btn-success {
74 | background-color: #5cb85c;
75 | border-color: #5cb85c;
76 | color: #fff;
77 | transition: 0.3s;
78 |
79 | &:hover {
80 | background: color.adjust(#5cb85c, $lightness: -8%);
81 | }
82 | }
83 |
84 | .graph-explorer-btn-danger {
85 | background-color: #c9302c;
86 | border-color: #c9302c;
87 | color: #fff;
88 | transition: 0.3s;
89 |
90 | &:hover {
91 | background: color.adjust(#c9302c, $lightness: -8%);
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/styles/viewUtils/_clearfix.scss:
--------------------------------------------------------------------------------
1 | .clearfix {
2 |
3 | &:before, &:after {
4 | display: table;
5 | content: "";
6 | }
7 |
8 | &:after {
9 | clear: both;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/styles/viewUtils/_form-control.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-form-control {
2 | display: block;
3 | width: 100%;
4 | height: 34px;
5 | margin: 0;
6 | padding: 6px 12px;
7 | font-size: 14px;
8 | line-height: 1.42857143;
9 | color: #555;
10 | background: #fff;
11 | border: 1px solid #ccc;
12 | transition: border-color ease-in-out .15s;
13 |
14 | &:focus {
15 | border-color: #66afe9;
16 | outline: 0;
17 | }
18 |
19 | &:disabled {
20 | background-color: #eee;
21 | cursor: not-allowed;
22 | opacity: 0.6;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/styles/viewUtils/_input-group.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-input-group {
2 | position: relative;
3 | display: table;
4 | border-collapse: separate;
5 |
6 | .graph-explorer-form-control {
7 | display: table-cell;
8 | position: relative;
9 | z-index: 2;
10 | float: left;
11 | width: 100%;
12 | margin-bottom: 0;
13 | }
14 |
15 | .graph-explorer-form-control:first-child {
16 | border-top-right-radius: 0;
17 | border-bottom-right-radius: 0;
18 | }
19 | }
20 |
21 | .graph-explorer-input-group-btn {
22 | display: table-cell;
23 | width: 1%;
24 | vertical-align: middle;
25 | position: relative;
26 | font-size: 0;
27 | white-space: nowrap;
28 |
29 | &:last-child > .graph-explorer-btn {
30 | border-top-left-radius: 0;
31 | border-bottom-left-radius: 0;
32 | z-index: 2;
33 | margin-left: -1px;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/styles/viewUtils/_label.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-label {
2 | display: inline-block;
3 | max-width: 100%;
4 | margin-bottom: 5px;
5 | font-weight: 700;
6 | }
7 |
--------------------------------------------------------------------------------
/styles/viewUtils/_list-group.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-list-group {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | .graph-explorer-list-group-item:last-child {
7 | margin-bottom: 0;
8 | }
9 |
10 | .graph-explorer-list-group-item {
11 | position: relative;
12 | display: block;
13 | padding: 10px 15px;
14 | margin-bottom: -1px;
15 | background-color: #fff;
16 | border: 1px solid #ddd;
17 | }
18 |
--------------------------------------------------------------------------------
/styles/viewUtils/_spinner.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-spinner {
2 | &__arrow {
3 | animation-name: graph-explorer-spinner-rotation;
4 | animation-duration: 1.5s;
5 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
6 | animation-iteration-count: infinite;
7 | }
8 |
9 | &[data-error='true'] &__arrow {
10 | animation-iteration-count: 1;
11 | }
12 | }
13 |
14 | @keyframes graph-explorer-spinner-rotation {
15 | 0% { transform: rotate(0deg); }
16 | 100% { transform: rotate(360deg); }
17 | }
18 |
--------------------------------------------------------------------------------
/styles/widgets/_authoringTools.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-authoring-tools {
2 | margin: 10px;
3 |
4 | &__create-entity {
5 | display: flex;
6 | flex-wrap: wrap;
7 | align-items: center;
8 | justify-content: center;
9 | width: 100%;
10 | white-space: normal;
11 | }
12 |
13 | &__type-label {
14 | color: black;
15 | border: black 1px dashed;
16 | background: rgb(255, 210, 33);
17 | padding: 0 .5em 0 .5em;
18 | word-wrap: break-word;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/styles/widgets/_classTree.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-class-tree {
2 | flex: auto;
3 | display: flex;
4 | flex-direction: column;
5 |
6 | &__filter {
7 | flex-shrink: 0;
8 | margin: 10px 0 10px 0;
9 | }
10 |
11 | &__filter-group {
12 | margin-left: 10px;
13 | margin-right: 10px;
14 | }
15 |
16 | &__only-creatable {
17 | display: block;
18 | margin-top: 5px;
19 | }
20 |
21 | &__tree {
22 | border-top: 1px solid rgb(221, 221, 221);
23 | }
24 |
25 | &__spinner {
26 | align-self: center;
27 | /* center vertically in flexbox */
28 | margin: auto;
29 | }
30 | }
31 |
32 | .graph-explorer-class-leaf {
33 | margin: 1px 0;
34 |
35 | &__row {
36 | display: flex;
37 | align-items: center;
38 | white-space: nowrap;
39 | user-select: none;
40 | > * { flex-shrink: 0; }
41 | }
42 |
43 | &__body {
44 | display: flex;
45 | align-items: center;
46 | text-decoration: none;
47 | font-size: 15px;
48 | padding: 1px;
49 | border: 1px solid;
50 | border-color: transparent;
51 | &:hover {
52 | background: #dcebff91;
53 | border-color: #ccefff;
54 | cursor: pointer;
55 | }
56 | &--selected {
57 | background-color: #beebff;
58 | border-color: #8edcff;
59 | }
60 | }
61 |
62 | &__icon-container {
63 | height: 20px;
64 | }
65 |
66 | &__icon {
67 | display: block;
68 | height: 100%;
69 | }
70 |
71 | &__label {
72 | margin-left: 5px;
73 | color: black;
74 | }
75 |
76 | &__highlighted-term {
77 | font-weight: bold;
78 | }
79 |
80 | &__count {
81 | margin-left: 5px;
82 | }
83 |
84 | &__children {
85 | margin-left: 20px;
86 | }
87 |
88 | &__no-toggle {
89 | display: inline-block;
90 | width: 22px;
91 | height: 22px;
92 | }
93 |
94 | &__toggle {
95 | display: inline-block;
96 | width: 12px;
97 | height: 12px;
98 | margin: 5px;
99 | &:hover:not(:empty) {
100 | background: #dcebff91;
101 | cursor: pointer;
102 | }
103 | }
104 |
105 | &__toggle-icon {
106 | display: block;
107 | height: 100%;
108 | }
109 |
110 | &__create {
111 | margin-left: 5px;
112 | > button {
113 | cursor: move;
114 | }
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/styles/widgets/_dialog.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-dialog {
2 | background: #fff;
3 | border: 1px solid #333;
4 | box-shadow: 0 4px 15px 7px rgba(51, 51, 51, 0.05);
5 | position: absolute;
6 |
7 | &__caption {
8 | font-weight: bold;
9 | position: absolute;
10 | top: -11px;
11 | left: 10px;
12 | background: white;
13 | padding-left: 3px;
14 | padding-right: 3px;
15 | border-radius: 6px;
16 | }
17 |
18 | &__close-button {
19 | background: transparent url("../images/font-awesome/times-circle-regular.svg");
20 | background-size: contain;
21 | border: 0 none;
22 | cursor: pointer;
23 | display: block;
24 | outline: none;
25 | padding: 0;
26 | position: absolute;
27 | top: -22px;
28 | right: -22px;
29 | height: 20px;
30 | width: 20px;
31 |
32 | opacity: 0.5;
33 | transition: 0.3s;
34 |
35 | &:hover {
36 | opacity: 1;
37 | }
38 | }
39 | }
40 |
41 | .graph-explorer-dialog__bottom-right-handle {
42 | position: absolute;
43 | bottom: 0;
44 | right: 0;
45 | width: 0;
46 | height: 0;
47 | border-style: solid;
48 | border-width: 0 0 10px 10px;
49 | border-color: transparent transparent rgba(0, 0, 0, 0.38) transparent;
50 | cursor: nwse-resize;
51 |
52 | &::before {
53 | content: "";
54 | position: absolute;
55 | bottom: -10px;
56 | right: 0;
57 | width: 0;
58 | height: 0;
59 | border-style: solid;
60 | border-width: 0 0 5px 5px;
61 | border-color: transparent transparent rgba(0, 0, 0, 0.38) transparent;
62 | }
63 |
64 | &:hover {
65 | border-color: transparent transparent rgba(0, 0, 0, 0.5) transparent;
66 | }
67 | }
68 |
69 | .graph-explorer-dialog__bottom-handle, .graph-explorer-dialog__right-handle {
70 | position: absolute;
71 | opacity: 0;
72 | background-color: black;
73 |
74 | &:hover {
75 | opacity: 0.1;
76 | }
77 | }
78 |
79 | .graph-explorer-dialog__bottom-handle {
80 | bottom: 0;
81 | width: 100%;
82 | height: 5px;
83 | cursor: ns-resize;
84 | }
85 |
86 | .graph-explorer-dialog__right-handle {
87 | top: 0;
88 | right: 0;
89 | width: 5px;
90 | height: 100%;
91 | cursor: ew-resize;
92 | }
93 |
--------------------------------------------------------------------------------
/styles/widgets/_editForm.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-edit-form {
2 | height: 100%;
3 | display: flex;
4 | flex-direction: column;
5 |
6 | &__body {
7 | overflow: auto;
8 | padding: 10px;
9 | flex: 1 1 100%;
10 | display: flex;
11 | flex-direction: column;
12 | position: relative;
13 | }
14 |
15 | &__controls {
16 | border-top: 1px solid #ccc;
17 | padding: 10px;
18 | text-align: right;
19 | flex: 0 0 auto;
20 | }
21 |
22 | &__apply-button {
23 | margin-right: 5px;
24 | }
25 |
26 | &__form-row {
27 | display: block;
28 | margin-bottom: 10px;
29 | }
30 |
31 | &__element-selector {
32 | flex-grow: 1;
33 | display: flex;
34 | flex-direction: column;
35 | }
36 |
37 | &__search {
38 | flex-shrink: 0;
39 | position: relative;
40 | }
41 |
42 | &__search-icon {
43 | opacity: 0.6;
44 | position: absolute;
45 | top: 50%;
46 | left: 10px;
47 | margin-top: -7px;
48 | }
49 |
50 | &__search-input {
51 | padding-left: 33px;
52 | }
53 |
54 | &__existing-elements-list {
55 | flex: 1 1 0;
56 | margin-top: 7px;
57 | padding-right: 10px;
58 | overflow-y: scroll;
59 | }
60 |
61 | &__separator {
62 | margin: 7px 0;
63 | overflow: hidden;
64 | text-align: center;
65 | }
66 |
67 | &__separator-text {
68 | color: #555;
69 | display: inline-block;
70 | font-size: 13px;
71 | position: relative;
72 |
73 | &:before, &:after {
74 | content: "";
75 | border-top: 1px solid;
76 | position: absolute;
77 | top: 50%;
78 | margin: 0 10px;
79 | width: 500px;
80 | }
81 |
82 | &:before {
83 | left: 100%;
84 | }
85 |
86 | &:after {
87 | right: 100%;
88 | }
89 | }
90 |
91 | &__progress {
92 | position: absolute;
93 | bottom: 0;
94 | left: 0;
95 | right: 0;
96 | }
97 |
98 | &__control-row {
99 | position: relative;
100 | padding-bottom: 18px;
101 | }
102 |
103 | &__control-error {
104 | color: red;
105 | position: absolute;
106 | bottom: 0;
107 | left: 0;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/styles/widgets/_halo.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-halo {
2 | position: absolute;
3 | pointer-events: none;
4 |
5 | border: 1.5px dashed #d8956d;
6 | border-radius: 2px;
7 | box-shadow: 0 0 5px 0 #d8956d inset;
8 |
9 | $buttonWidth: 20px;
10 | $buttonHeight: 20px;
11 | $buttonMargin: 2px;
12 |
13 | @mixin halo-button {
14 | position: absolute;
15 | background-color: transparent;
16 | background-size: contain;
17 | background-repeat: no-repeat;
18 | background-position: center;
19 | border: 0 none;
20 | cursor: pointer;
21 | outline: none;
22 | padding: 0;
23 | pointer-events: auto;
24 | width: $buttonWidth;
25 | height: $buttonHeight;
26 |
27 | opacity: 0.5;
28 | transition: opacity 0.3s;
29 | &:hover {
30 | opacity: 1;
31 | }
32 |
33 | &[disabled] {
34 | cursor: not-allowed;
35 | opacity: 0.2;
36 | }
37 | }
38 |
39 | @mixin spinner {
40 | position: absolute;
41 | width: $buttonWidth;
42 | height: $buttonHeight;
43 | }
44 |
45 | @mixin n-docked {
46 | top: -($buttonHeight + $buttonMargin);
47 | left: 50%;
48 | margin-left: -(calc($buttonWidth / 2));
49 | }
50 |
51 | @mixin nw-docked {
52 | top: -($buttonHeight + $buttonMargin);
53 | left: -($buttonWidth + $buttonMargin);
54 | }
55 |
56 | @mixin ne-docked {
57 | top: -($buttonHeight + $buttonMargin);
58 | right: -($buttonWidth + $buttonMargin);
59 | }
60 |
61 | @mixin e-docked {
62 | top: 50%;
63 | margin-top: -(calc($buttonHeight / 2));
64 | right: -($buttonWidth + $buttonMargin);
65 | }
66 |
67 | @mixin w-docked {
68 | top: 50%;
69 | margin-top: -(calc($buttonHeight / 2));
70 | left: -($buttonWidth + $buttonMargin);
71 | }
72 |
73 | @mixin s-docked {
74 | bottom: -($buttonHeight + $buttonMargin);
75 | left: 50%;
76 | margin-left: -(calc($buttonWidth / 2));
77 | }
78 |
79 | @mixin sw-docked {
80 | bottom: -($buttonHeight + $buttonMargin);
81 | left: -($buttonWidth + $buttonMargin);
82 | }
83 |
84 | @mixin se-docked {
85 | bottom: -($buttonHeight + $buttonMargin);
86 | right: -($buttonWidth + $buttonMargin);
87 | }
88 |
89 | &__navigate {
90 | @include halo-button;
91 | @include e-docked;
92 |
93 | &--open {
94 | background-image: url("../images/connections.svg");
95 | }
96 |
97 | &--closed {
98 | background-image: url("../images/close-connections.svg");
99 | }
100 | }
101 |
102 | &__folow {
103 | @include halo-button;
104 | @include w-docked;
105 |
106 | background-image: url("../images/link.svg");
107 | }
108 |
109 | &__remove {
110 | @include halo-button;
111 | @include ne-docked;
112 | background-image: url("../images/delete.svg");
113 | }
114 |
115 | &__expand {
116 | @include halo-button;
117 | @include s-docked;
118 |
119 | &--open {
120 | background-image: url("../images/expand-properties.png");
121 | }
122 |
123 | &--closed {
124 | background-image: url("../images/collapse-properties.png");
125 | }
126 | }
127 |
128 | &__add-to-filter {
129 | @include halo-button;
130 | @include se-docked;
131 | background-image: url("../images/add-to-filter.png");
132 | }
133 |
134 | &__revert {
135 | @include halo-button;
136 | @include n-docked;
137 | background-image: url("../images/font-awesome/undo-solid.svg");
138 | }
139 |
140 | &__establish-connection {
141 | @include halo-button;
142 | @include sw-docked;
143 | background-image: url("../images/font-awesome/plug.svg");
144 | }
145 |
146 | &__establish-connection-spinner {
147 | @include spinner;
148 | @include sw-docked;
149 | }
150 | }
151 |
--------------------------------------------------------------------------------
/styles/widgets/_haloLink.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-halo-link {
2 |
3 | &__button {
4 | background: transparent;
5 | border: 0 none;
6 | cursor: pointer;
7 | padding: 0;
8 | position: absolute;
9 | opacity: 0.8;
10 | outline: none;
11 | transition: opacity 0.3s;
12 |
13 | &:hover {
14 | opacity: 1;
15 | }
16 |
17 | &[disabled] {
18 | cursor: not-allowed;
19 | opacity: 0.5;
20 | }
21 | }
22 |
23 | @mixin button {
24 | background-color: #ccc;
25 | background-position: 50%;
26 | background-repeat: no-repeat;
27 | background-size: 60%;
28 | border-radius: 10px;
29 | height: 20px;
30 | width: 20px;
31 | }
32 |
33 | &__edit {
34 | @include button;
35 | background-image: url("../images/font-awesome/edit.svg");
36 | }
37 |
38 | &__delete {
39 | @include button;
40 | background-image: url("../images/font-awesome/trash-alt.svg");
41 | }
42 |
43 | &__spinner {
44 | position: absolute;
45 | }
46 |
47 | &__edit-label-button {
48 | background: transparent url("../images/font-awesome/pen-square-solid.svg") no-repeat;
49 | background-size: cover;
50 | border: 0 none;
51 | cursor: pointer;
52 | padding: 0;
53 | position: absolute;
54 | margin-left: 5px;
55 | outline: none;
56 | opacity: 0.5;
57 | transition: opacity 0.3s;
58 |
59 | &:hover {
60 | opacity: 1;
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/styles/widgets/_instancesSearch.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-instances-search {
2 | flex: auto;
3 | display: flex;
4 | flex-direction: column;
5 |
6 | &__criteria {
7 | flex-shrink: 0;
8 | margin: 10px 0 10px 0;
9 | }
10 |
11 | &__criterions {
12 | padding-left: 15px;
13 | margin-bottom: 10px;
14 | &:empty { margin-bottom: 0; }
15 | }
16 |
17 | &__criterion {
18 | display: block;
19 | position: relative;
20 | width: 100%;
21 | }
22 |
23 | &__criterion-class {
24 | border: black 1px dashed;
25 | background: rgb(255, 210, 33);
26 | padding: 0 .5em 0 .5em;
27 | word-wrap: break-word;
28 | }
29 |
30 | &__criterion-element {
31 | border: black 1px dashed;
32 | background: rgb(255, 131, 92);
33 | padding: 0 .5em 0 .5em;
34 | word-wrap: break-word;
35 | }
36 |
37 | &__criterion-link-type {
38 | border: black 1px dashed;
39 | background: rgb(202, 255, 206);
40 | padding: 0 .5em 0 .5em;
41 | word-wrap: break-word;
42 | }
43 |
44 | &__link-direction {
45 | height: 1em;
46 | opacity: 0.5;
47 | }
48 |
49 | &__criterion-remove {
50 | float: right;
51 | margin: 0 10px 4px 4px;
52 | }
53 |
54 | &__text-criteria { margin: 0 10px; }
55 |
56 | &__rest {
57 | padding: 10px 10px 0 10px;
58 | border-top: 1px solid rgb(221, 221, 221);
59 | }
60 |
61 | &__results {
62 | padding-left: 0;
63 | padding-top: 10px;
64 | margin: 0 10px 0 10px;
65 | outline: none;
66 | }
67 |
68 | &[data-state='finished'] &__results:empty:before {
69 | content: 'No items correspond to the specified criteria.';
70 | font-style: italic;
71 | }
72 |
73 | &__rest-end { margin: 5px 0 10px 0; }
74 | &__load-more {
75 | width: 100%;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/styles/widgets/_linksToolbox.scss:
--------------------------------------------------------------------------------
1 | .link-types-toolbox {
2 | flex: auto;
3 | display: flex;
4 | flex-direction: column;
5 | margin-bottom: 0;
6 |
7 | &__heading {
8 | padding: 10px;
9 | }
10 |
11 | &__searching-box {
12 | display: flex;
13 | align-items: center;
14 | }
15 |
16 | &__clearSearch {
17 | margin-left: -25px;
18 | -webkit-appearance: none;
19 | padding: 0;
20 | cursor: pointer;
21 | background: 0 0;
22 | border: 0;
23 | }
24 |
25 | &__switch-all {
26 | margin-top: 5px;
27 | }
28 |
29 | &__rest {
30 | border-top: 1px solid #dddddd;
31 | flex: auto;
32 | display: flex;
33 | flex-direction: column;
34 | }
35 | }
36 |
37 | .link-types-toolbox .panel-heading {
38 | flex-shrink: 0;
39 | -webkit-flex-shrink: 0; /* safari 8 */
40 | }
41 |
42 | .link-types-toolbox ul {
43 | margin-bottom: 0;
44 | }
45 | .link-types-toolbox .links-heading {
46 | margin-left: .4em;
47 | }
48 | .link-types-toolbox .links-heading span {
49 | border: black 1px dashed;
50 | background: rgb(255, 131, 92);
51 | padding: 0 .5em 0 .5em;
52 | word-wrap: break-word;
53 | line-height: 1.3;
54 | }
55 |
56 | .link-types-toolbox__heading .link-types-toolbox-controls {
57 | padding: 5px 15px;
58 | font-size: 14px;
59 | font-style: italic;
60 | }
61 | .link-types-toolbox__heading .link-types-toolbox-controls > span {
62 | padding-left: .3em;
63 | }
64 |
65 | .graph-explorer-list-group .linkInToolBox {
66 | padding: 0 0 0 5px;
67 | word-break: break-word;
68 | }
69 |
70 | .linkInToolBox {
71 | & > div { display: inline; }
72 |
73 | &__new-tag {
74 | margin-left: .5em;
75 | white-space: normal;
76 | word-wrap: normal;
77 | border-radius: 2px;
78 | padding: 0 5px;
79 | background: orange;
80 | }
81 |
82 | .graph-explorer-badge {
83 | display: none;
84 | margin-left: .5em;
85 | white-space: normal;
86 | word-wrap: normal;
87 | }
88 |
89 | .link-title {
90 | font-size: 16px;
91 | color: black;
92 | display: inline;
93 | }
94 |
95 | .graph-explorer-btn-group {
96 | float: left;
97 | margin-top: 2px;
98 | margin-right: 6px;
99 | margin-bottom: 2px;
100 | }
101 |
102 | .graph-explorer-btn.graph-explorer-btn-default {
103 | border-color: rgb(195, 195, 195);
104 | }
105 |
106 | &__filter-button {
107 | display: none;
108 | float: right;
109 | background-image: url("../images/add-to-filter.png");
110 | background-size: 20px 20px;
111 | width: 20px;
112 | height: 20px;
113 | margin: 3px;
114 | cursor: pointer;
115 | opacity: 0.4;
116 | transition: opacity 200ms 0ms;
117 | }
118 | &:hover &__filter-button {
119 | opacity: 1.0;
120 | transition: opacity 200ms 0ms;
121 | }
122 | }
123 |
124 | .connected-links .linkInToolBox .graph-explorer-badge {
125 | /* show connection count badge only in "Connected to Element" list */
126 | display: inline;
127 | }
128 | .connected-links .linkInToolBox__filter-button {
129 | /* show filter button only in "Connected to Element" list */
130 | display: inline;
131 | }
132 |
--------------------------------------------------------------------------------
/styles/widgets/_listElementView.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-list-element-view {
2 | position: relative;
3 | display: block;
4 | background: #808080;
5 | padding: 1px 1px 1px 10px;
6 | border-radius: 2px;
7 | margin: 0 0 2px 0;
8 | opacity: 1.0;
9 | cursor: move;
10 | user-select: none;
11 |
12 | &--disabled {
13 | opacity: 0.4;
14 | cursor: default;
15 | }
16 |
17 | &__label {
18 | background: white;
19 | border-radius: 0 2px 2px 0;
20 | font-family: "Andale Mono", sans-serif;
21 | font-size: 15px;
22 | min-height: 1.3em;
23 | padding-left: 7px;
24 | padding-right: 5px;
25 | overflow-wrap: break-word;
26 | }
27 | }
28 |
29 | .graph-explorer-text-highlight {
30 | font-weight: bold;
31 | }
32 |
--------------------------------------------------------------------------------
/styles/widgets/_navigator.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-navigator {
2 | display: block;
3 | position: absolute;
4 | bottom: 25px;
5 | right: 25px;
6 | overflow: hidden;
7 |
8 | // increase specificity to override default box-sizing,
9 | // so border size won't be included into total size
10 | .graph-explorer & {
11 | box-sizing: content-box;
12 | }
13 |
14 | background: #fff;
15 | border: 1px solid #ddd;
16 | box-shadow: 0 4px 15px 7px rgba(51, 51, 51, 0.05);
17 |
18 | $transition: 0.3s;
19 | transition: width $transition, height $transition;
20 |
21 | &--collapsed {
22 | width: 26px;
23 | height: 26px;
24 | }
25 |
26 | > canvas {
27 | transition: opacity $transition;
28 | }
29 | &--expanded > canvas { opacity: 1; }
30 | &--collapsed > canvas { opacity: 0; }
31 |
32 | &__toggle {
33 | position: absolute;
34 | background: transparent;
35 | border: none;
36 | outline: none;
37 | padding: 4px;
38 |
39 | opacity: 0.5;
40 | transition: opacity 0.3s;
41 |
42 | &:hover {
43 | // background: lightgray;
44 | opacity: 1;
45 | }
46 | }
47 | &--expanded &__toggle {
48 | top: 5px;
49 | left: 5px;
50 | }
51 | &--collapsed &__toggle {
52 | top: 0px;
53 | left: 0px;
54 | }
55 |
56 | &__toggle-icon {
57 | width: 18px;
58 | height: 18px;
59 | background-size: 18px 18px;
60 | background-repeat: no-repeat;
61 | }
62 | &--expanded &__toggle-icon {
63 | background-image: url('../images/font-awesome/minus-square-regular.svg');
64 | }
65 | &--collapsed &__toggle-icon {
66 | background-image: url('../images/font-awesome/plus-square-regular.svg');
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/styles/widgets/_progressBar.scss:
--------------------------------------------------------------------------------
1 | @keyframes graph-explorer-progress-bar-stripes {
2 | from {
3 | background-position: 40px 0;
4 | }
5 | to {
6 | background-position: 0 0;
7 | }
8 | }
9 |
10 | .graph-explorer-progress-bar {
11 | flex-shrink: 0;
12 | -webkit-flex-shrink: 0; /* safari 8 */
13 | width: 100%;
14 |
15 | background-color: #f5f5f5;
16 | background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
17 | background-repeat: repeat-x;
18 | overflow: hidden;
19 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
20 |
21 | &__bar {
22 | float: left;
23 | height: 100%;
24 | font-size: 12px;
25 | line-height: 20px;
26 | color: #fff;
27 | text-align: center;
28 | transition: width .6s ease;
29 |
30 | background-color: #337ab7;
31 | background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
32 | background-repeat: repeat-x;
33 | background-size: 40px 40px;
34 |
35 | animation: graph-explorer-progress-bar-stripes 2s linear infinite;
36 | }
37 |
38 | &--error &__bar {
39 | background-color: #E72F2F;
40 | }
41 |
42 | &--loading,
43 | &--error {
44 | /* property name | duration | delay */
45 | transition: height 300ms 300ms;
46 | }
47 |
48 | &--completed {
49 | /* property name | duration | delay */
50 | transition: height 200ms 0ms;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/styles/widgets/_searchResults.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-search-results {
2 | margin: 0;
3 | padding: 0;
4 | outline: none;
5 | }
6 |
--------------------------------------------------------------------------------
/styles/workspace/_accordion.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-accordion {
2 | flex: auto;
3 | display: flex;
4 | height: 100%;
5 | width: 100%;
6 |
7 | &--scrollable {
8 | overflow: auto;
9 | }
10 |
11 | &--vertical {
12 | flex-direction: column;
13 | }
14 |
15 | &--vertical:not(&--resizing) > .graph-explorer-accordion-item {
16 | transition: height 0.3s ease-in-out;
17 | }
18 | }
19 |
20 | .graph-explorer-accordion-item {
21 | display: flex;
22 | position: relative;
23 | flex: auto;
24 |
25 | &--resizing > &__handle, &__handle:hover {
26 | background: rgba(0, 0, 0, 0.1);
27 | }
28 |
29 | &--vertical {
30 | border-top: 1px solid lightgray;
31 |
32 | &:first-child {
33 | border-top-width: 0;
34 | }
35 | }
36 |
37 | &--horizontal {
38 | border-right: 1px solid lightgray;
39 |
40 | &:last-child {
41 | border-right-width: 0;
42 | }
43 | }
44 |
45 | &__handle {
46 | position: absolute;
47 | z-index: 2;
48 | }
49 |
50 | &__handle-vertical {
51 | height: 5px;
52 | bottom: -2.5px;
53 | left: 0;
54 | width: 100%;
55 | cursor: ns-resize;
56 | }
57 |
58 | &__handle-horizontal {
59 | height: 100%;
60 | top: 0;
61 | right: -2.5px;
62 | width: 5px;
63 | cursor: ew-resize;
64 | }
65 |
66 | &__handle-btn {
67 | background: #fff;
68 | border: 2px solid #17b;
69 | box-shadow: 0 0 0 1px rgba(9, 30, 66, 0.08), 0 2px 4px 1px rgba(9, 30, 66, 0.08);
70 | border-radius: 10px;
71 | cursor: pointer;
72 | height: 20px;
73 | position: absolute;
74 | top: 50%;
75 | margin-top: -10px;
76 | width: 20px;
77 | z-index: 20;
78 | transition: 0.3s;
79 |
80 | &::before {
81 | background-position: 0 0;
82 | background-repeat: no-repeat;
83 | background-size: cover;
84 | content: "";
85 | height: 8px;
86 | position: absolute;
87 | top: 50%;
88 | left: 50%;
89 | margin-top: -4px;
90 | margin-left: -4px;
91 | width: 8px;
92 | transition: background 0.3s;
93 | }
94 |
95 | &:hover {
96 | background: #17b;
97 | }
98 | }
99 |
100 | &__handle-btn-left {
101 | left: 100%;
102 | margin-left: -10px;
103 | &:before { background-image: url("../images/arrow-left.png"); }
104 | &:hover:before { background-image: url("../images/arrow-left1.png"); }
105 | }
106 |
107 | &__handle-btn-right {
108 | right: 100%;
109 | margin-right: -10px;
110 | &:before { background-image: url("../images/arrow-right.png"); }
111 | &:hover:before { background-image: url("../images/arrow-right1.png"); }
112 | }
113 |
114 | &--collapsed &__handle-btn:before {
115 | transform: rotate(180deg);
116 | }
117 |
118 | &__inner {
119 | flex: auto;
120 | display: flex;
121 | flex-direction: column;
122 | overflow: hidden;
123 | }
124 |
125 | &__body {
126 | flex: 1 1 0px; // IE 11 requires a unit to be added to the third argument
127 | display: flex;
128 | flex-direction: column;
129 | }
130 |
131 | &__header {
132 | padding-left: 20px;
133 | position: relative;
134 |
135 | flex-shrink: 0;
136 | font-size: 16px;
137 | background: #E4E4E4;
138 | cursor: default;
139 | /* unselectable */
140 | -webkit-touch-callout: none;
141 | -webkit-user-select: none;
142 | -moz-user-select: none;
143 | -ms-user-select: none;
144 | user-select: none;
145 |
146 | &:before {
147 | border-top: 6px solid #555555;
148 | border-left: 3.5px solid transparent;
149 | border-right: 3.5px solid transparent;
150 | content: "";
151 | position: absolute;
152 | top: 50%;
153 | left: 7px;
154 | margin-top: -3px;
155 |
156 | -webkit-transition: 0.1s;
157 | -moz-transition: 0.1s;
158 | transition: 0.1s;
159 | }
160 | }
161 |
162 | &--collapsed &__header:before {
163 | -webkit-transform: rotate(-90deg);
164 | -moz-transform: rotate(-90deg);
165 | -ms-transform: rotate(-90deg);
166 | transform: rotate(-90deg);
167 | }
168 |
169 | &--collapsed &__body {
170 | display: none;
171 | }
172 | }
173 |
--------------------------------------------------------------------------------
/styles/workspace/_resizableSidebar.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer-drag-resizable-column.graph-explorer-drag-resizable-column--docked-bottom,
2 | .graph-explorer-drag-resizable-column.graph-explorer-drag-resizable-column--docked-top {
3 | .graph-explorer-drag-resizable-column__handle {
4 | height: 8px;
5 | width: 100%;
6 | top: initial;
7 | left: 0;
8 | cursor: ns-resize;
9 | }
10 |
11 | .graph-explorer-drag-resizable-column__handle-btn {
12 | height: 100%;
13 | width: 40px;
14 | top: 0;
15 | left: 50%;
16 | margin-left: -20px;
17 | margin-top: 0px;
18 | }
19 | }
20 |
21 | .graph-explorer-drag-resizable-column {
22 | display: flex;
23 | flex-direction: column;
24 | position: relative;
25 |
26 | &__handle {
27 | background: #fff url("../images/resizable-column-handle.png") repeat;
28 | width: 8px;
29 | height: 100%;
30 | position: absolute;
31 | top: 0;
32 | left: initial;
33 | z-index: 2;
34 | -webkit-transition: 0.3s;
35 | -moz-transition: 0.3s;
36 | transition: 0.3s;
37 | cursor: ew-resize;
38 | }
39 |
40 | &__handle-btn {
41 | background: #eee;
42 | cursor: pointer;
43 | height: 40px;
44 | position: absolute;
45 | top: 50%;
46 | left: 0;
47 | margin-top: -20px;
48 | width: 100%;
49 | z-index: 1;
50 | -webkit-transition: 0.3s;
51 | -moz-transition: 0.3s;
52 | transition: 0.3s;
53 |
54 | &::before {
55 | background-position: 0 0 ;
56 | background-repeat: no-repeat;
57 | background-size: cover;
58 | content: "";
59 | height: 6px;
60 | position: absolute;
61 | top: 50%;
62 | left: 50%;
63 | margin-top: -3px;
64 | margin-left: -3px;
65 | width: 6px;
66 | -webkit-transition: 0.3s;
67 | -moz-transition: 0.3s;
68 | transition: 0.3s;
69 | }
70 |
71 | &:hover {
72 | background: #b3b3b3;
73 | transform: scale(1.2);
74 | }
75 | }
76 |
77 | &--closed &__handle-btn {
78 | &::before { transform: rotate(180deg); }
79 | }
80 |
81 | &--docked-left { margin-right: 8px; }
82 | &--docked-left &__handle { right: -8px; }
83 | &--docked-left &__handle-btn {
84 | &::before { background-image: url("../images/arrow-left.png"); }
85 | &:hover::before { background-image: url("../images/arrow-left1.png"); }
86 | }
87 |
88 | &--docked-right { margin-left: 8px; }
89 | &--docked-right &__handle { left: -8px; }
90 | &--docked-right &__handle-btn {
91 | &::before { background-image: url("../images/arrow-right.png"); }
92 | &:hover::before { background-image: url("../images/arrow-right1.png"); }
93 | }
94 |
95 | &--docked-top { margin-bottom: 8px; }
96 | &--docked-top &__handle { bottom: -8px; }
97 | &--docked-top &__handle-btn {
98 | &::before { background-image: url("../images/arrow-top.png"); }
99 | &:hover::before { background-image: url("../images/arrow-top1.png"); }
100 | }
101 |
102 | &--docked-bottom { margin-top: 8px; }
103 | &--docked-bottom &__handle { top: -8px; }
104 | &--docked-bottom &__handle-btn {
105 | &::before { background-image: url("../images/arrow-bottom.png"); }
106 | &:hover::before { background-image: url("../images/arrow-bottom1.png"); }
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/styles/workspace/_toolbar.scss:
--------------------------------------------------------------------------------
1 | $toolbarHeight: 30px;
2 |
3 | .graph-explorer-toolbar {
4 | &__language-selector {
5 | margin-left: 5px;
6 | margin-right: 5px;
7 |
8 | > label {
9 | margin-right: 5px;
10 | > span { vertical-align: middle; }
11 | }
12 |
13 | > select {
14 | height: $toolbarHeight;
15 | }
16 | }
17 |
18 | &__toggle {
19 | line-height: 1;
20 | }
21 |
22 | &__toggle:after {
23 | background-position: 0 0;
24 | background-repeat: no-repeat;
25 | content: '';
26 | display: block;
27 | height: 12px;
28 | margin: 3px 0;
29 | width: 12px;
30 | }
31 |
32 | &__toggle-left:after {
33 | background-image: url('../images/left-panel.svg');
34 | }
35 |
36 | &__toggle-right:after {
37 | background-image: url('../images/right-panel.svg');
38 | }
39 |
40 | &__toggle.active {
41 | border-color: #c3c3c3;
42 | }
43 |
44 | &__toggle-left.active:after {
45 | background-image: url('../images/left-panel-active.svg');
46 | }
47 |
48 | &__toggle-right.active:after {
49 | background-image: url('../images/right-panel-active.svg');
50 | }
51 |
52 | &__layout-group {
53 | float: left;
54 | margin-left: 5px;
55 | height: $toolbarHeight;
56 |
57 | > label {
58 | margin-right: 5px;
59 | }
60 |
61 | .btn-group,button {
62 | height: 100%;
63 | }
64 | }
65 | }
66 |
67 | .graph-explorer-toolbar .graph-explorer-toolbar__undo,
68 | .graph-explorer-toolbar .graph-explorer-toolbar__redo {
69 | display: none;
70 | }
71 |
72 |
--------------------------------------------------------------------------------
/styles/workspace/_tutorial.scss:
--------------------------------------------------------------------------------
1 | .introjs-tooltiptext {
2 | color: #333;
3 | font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
4 | font-size: 14px;
5 | line-height: 1.42857;
6 | }
7 |
--------------------------------------------------------------------------------
/styles/workspace/_workspace.scss:
--------------------------------------------------------------------------------
1 | .graph-explorer {
2 | display: flex;
3 | flex-direction: column;
4 | height: 100%;
5 | // defaults for inheritable properties
6 | box-sizing: border-box;
7 | white-space: initial;
8 | color: #333;
9 | font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
10 | font-size: 14px;
11 | line-height: 1.42857;
12 |
13 | *, *:before, *:after {
14 | box-sizing: inherit;
15 | }
16 |
17 | &__toolbar-widget {
18 | position: absolute;
19 | left: 10px;
20 | top: 10px;
21 | }
22 |
23 | &__workspace {
24 | display: flex;
25 | flex: auto;
26 | overflow: hidden;
27 | flex-direction: column;
28 | }
29 |
30 | &__main-panel {
31 | display: flex;
32 | flex: auto;
33 | overflow: hidden;
34 | width: 0;
35 | }
36 |
37 | &--unselectable {
38 | -webkit-touch-callout: none;
39 | -webkit-user-select: none;
40 | -moz-user-select: none;
41 | -ms-user-select: none;
42 | user-select: none;
43 | }
44 |
45 | &--horizontal-resizing * { cursor: ew-resize !important; }
46 | &--vertical-resizing * { cursor: ns-resize !important; }
47 |
48 | h4 {
49 | font-size: 18px;
50 | font-weight: 500;
51 | line-height: 1.1;
52 | margin-top: 10px;
53 | margin-bottom: 10px;
54 | }
55 |
56 | select {
57 | color: inherit;
58 | margin: 0;
59 | font: inherit;
60 | line-height: inherit;
61 | text-transform: none;
62 | }
63 |
64 | hr {
65 | border: 0;
66 | border-top: 1px solid #eee;
67 | height: 0;
68 | }
69 | }
70 |
71 | .graph-explorer-scrollable {
72 | flex: 1 1 0px; // IE 11 requires a unit to be added to the third argument
73 | overflow-y: scroll;
74 | }
75 |
76 | // fixes the bug in Chrome with redrawing children in scrollable elements
77 | .graph-explorer-scrollable > * {
78 | position: relative;
79 | }
80 |
--------------------------------------------------------------------------------
/thirdparty.txt:
--------------------------------------------------------------------------------
1 | Third Party Libraries
2 |
3 | MIT License:
4 | - Twitter Bootstrap (modified CSS styles): https://github.com/twbs/bootstrap
5 |
6 | CC BY 4.0
7 | - Font Awesome Free (unmodified SVG icons): https://fontawesome.com/license
8 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "jsx": "react",
6 | "lib": ["dom", "es2015"],
7 | "importHelpers": true,
8 | "strict": true,
9 | "strictNullChecks": false
10 | },
11 | "include": [
12 | "./examples/**/*.ts",
13 | "./examples/**/*.tsx",
14 | "./src/**/*.ts",
15 | "./src/**/*.tsx",
16 | "./typings/typings.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "declaration": true,
5 | "emitDeclarationOnly": true,
6 | "skipLibCheck": true,
7 | "outDir": "./dist/temp/dts"
8 | },
9 | "include": ["./src/**/*.ts", "./src/**/*.tsx", "./typings/typings.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/typings/local/file-saverjs/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'file-saverjs' {
2 | const saveAs: {
3 | (file: Blob, fileName: string): void;
4 | };
5 | export = saveAs;
6 | }
7 |
--------------------------------------------------------------------------------
/typings/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/triple-slash-reference */
2 | /// this.toggle({ open: !this.state.open })}
105 | >
106 |