@jupytergis/base 0.15.0 → 0.16.0-alpha.0

package/lib/features/story/types/types.d.ts

@@ -0,0 +1,38 @@
+import type { IStorySegmentLayer } from '@jupytergis/schema';
+export type StorySegmentDisplayMode = 'map' | 'markdown';
+/** Active handoff between two segments while scrolling the virtual track. */
+export interface IListStorySegmentTransition {
+    /** 0–1 across the handoff span (outgoing segment + gap + incoming segment). */
+    progress: number;
+    fromIndex: number;
+    toIndex: number;
+    fromMode: StorySegmentDisplayMode;
+    toMode: StorySegmentDisplayMode;
+}
+export interface IStorySegmentViewItem {
+    id: string;
+    index: number;
+    layerName: string;
+    activeSlide: IStorySegmentLayer['parameters'] | undefined;
+}
+export interface IListStoryMarkdownSegment {
+    id: string;
+    index: number;
+    markdown: string;
+}
+export interface IListStoryScrollTrackSegment {
+    id: string;
+    index: number;
+    contentMode: StorySegmentDisplayMode;
+    height: number;
+    measured: boolean;
+    /** Inclusive start in scroller content coordinates. */
+    start: number;
+    /** Exclusive end in scroller content coordinates. */
+    end: number;
+}
+export interface IListStoryScrollTrackLayout {
+    segments: IListStoryScrollTrackSegment[];
+    /** Sum of segment heights and handoff gaps (virtual track height). */
+    scrollTrackHeight: number;
+}

package/lib/features/story/types/types.js

@@ -0,0 +1 @@
+export {};

package/lib/features/story/utils/computeListStoryScrollState.d.ts

@@ -0,0 +1,12 @@
+import type { IListStorySegmentTransition, IListStoryScrollTrackSegment } from "../types/types";
+export interface IListStoryScrollState {
+    activeIndex: number;
+    segmentTransition: IListStorySegmentTransition | null;
+}
+interface IComputeListStoryScrollInput {
+    scrollTop: number;
+    viewportHeight: number;
+    segments: IListStoryScrollTrackSegment[];
+}
+export declare function computeListStoryScrollState({ scrollTop, viewportHeight, segments, }: IComputeListStoryScrollInput): IListStoryScrollState | null;
+export {};

package/lib/features/story/utils/computeListStoryScrollState.js

@@ -0,0 +1,70 @@
+function clamp01(value) {
+    return Math.min(1, Math.max(0, value));
+}
+function findSegmentAtScrollCenter(scrollCenter, segments) {
+    if (scrollCenter < segments[0].start) {
+        return segments[0];
+    }
+    for (const segment of segments) {
+        if (scrollCenter >= segment.start && scrollCenter < segment.end) {
+            return segment;
+        }
+    }
+    return segments[segments.length - 1];
+}
+function computePairTransition(scrollTop, fromSegment, toSegment) {
+    if (scrollTop < fromSegment.start || scrollTop >= toSegment.end) {
+        return null;
+    }
+    const handoffEndScrollTop = toSegment.start;
+    const handoffSpan = handoffEndScrollTop - fromSegment.start;
+    if (handoffSpan <= 0) {
+        return null;
+    }
+    if (scrollTop >= handoffEndScrollTop) {
+        return null;
+    }
+    const progress = clamp01((scrollTop - fromSegment.start) / handoffSpan);
+    return {
+        progress,
+        activeIndex: progress >= 0.5 ? toSegment.index : fromSegment.index,
+    };
+}
+function buildSegmentTransitionPayload(fromSegment, toSegment, progress) {
+    return {
+        progress,
+        fromIndex: fromSegment.index,
+        toIndex: toSegment.index,
+        fromMode: fromSegment.contentMode,
+        toMode: toSegment.contentMode,
+    };
+}
+export function computeListStoryScrollState({ scrollTop, viewportHeight, segments, }) {
+    if (!segments.length) {
+        return null;
+    }
+    if (segments.length === 1) {
+        return {
+            activeIndex: segments[0].index,
+            segmentTransition: null,
+        };
+    }
+    for (let i = 0; i < segments.length - 1; i++) {
+        const fromSegment = segments[i];
+        const toSegment = segments[i + 1];
+        const pairTransition = computePairTransition(scrollTop, fromSegment, toSegment);
+        if (!pairTransition) {
+            continue;
+        }
+        return {
+            activeIndex: pairTransition.activeIndex,
+            segmentTransition: buildSegmentTransitionPayload(fromSegment, toSegment, pairTransition.progress),
+        };
+    }
+    const scrollCenter = scrollTop + viewportHeight / 2;
+    const activeSegment = findSegmentAtScrollCenter(scrollCenter, segments);
+    return {
+        activeIndex: activeSegment.index,
+        segmentTransition: null,
+    };
+}

package/lib/features/story/utils/listStoryMeasureQueue.d.ts

@@ -0,0 +1,11 @@
+import type { IListStoryMarkdownSegment } from "../types/types";
+export declare const LIST_STORY_MEASURE_LOOKAHEAD = 2;
+interface IBuildPendingMeasureIdsParams {
+    markdownSegments: IListStoryMarkdownSegment[];
+    currentSegmentIndex: number;
+    heightsById: Readonly<Record<string, number>>;
+    measuringSegmentId: string | undefined;
+}
+/** Markdown segment ids near the active index that still need measurement. */
+export declare function buildPendingMeasureIds({ markdownSegments, currentSegmentIndex, heightsById, measuringSegmentId, }: IBuildPendingMeasureIdsParams): string[];
+export {};

package/lib/features/story/utils/listStoryMeasureQueue.js

@@ -0,0 +1,14 @@
+export const LIST_STORY_MEASURE_LOOKAHEAD = 2;
+/** Markdown segment ids near the active index that still need measurement. */
+export function buildPendingMeasureIds({ markdownSegments, currentSegmentIndex, heightsById, measuringSegmentId, }) {
+    const pending = markdownSegments
+        .filter(segment => Math.abs(segment.index - currentSegmentIndex) <=
+        LIST_STORY_MEASURE_LOOKAHEAD && heightsById[segment.id] === undefined)
+        .sort((a, b) => Math.abs(a.index - currentSegmentIndex) -
+        Math.abs(b.index - currentSegmentIndex))
+        .map(segment => segment.id);
+    if (!measuringSegmentId) {
+        return pending;
+    }
+    return pending.filter(id => id !== measuringSegmentId);
+}

package/lib/features/story/utils/listStoryScrollTrack.d.ts

@@ -0,0 +1,17 @@
+import type { IStorySegmentLayer } from '@jupytergis/schema';
+import type { IListStoryScrollTrackLayout, StorySegmentDisplayMode, IStorySegmentViewItem } from "../types/types";
+interface IBuildListStoryScrollTrackInput {
+    items: IStorySegmentViewItem[];
+    /** Story column scroller height (markdown estimates, scroll padding). */
+    viewportHeight: number;
+    /** Map stage height (`.jGIS-Mainview-Container`); defaults to viewportHeight. */
+    mapViewportHeight?: number;
+    heightsById?: Readonly<Record<string, number>>;
+}
+export declare function estimateMarkdownHeight(markdown: string, viewportHeight: number): number;
+export declare function estimateMapSegmentHeight(viewportHeight: number): number;
+export declare function getScrollTrackSegmentHeight(layout: IListStoryScrollTrackLayout | null, index: number): number | undefined;
+/** Builds cumulative segment ranges for the virtual list story scroll track. */
+export declare function buildListStoryScrollTrack({ items, viewportHeight, mapViewportHeight, heightsById, }: IBuildListStoryScrollTrackInput): IListStoryScrollTrackLayout | null;
+export declare function getSegmentDisplayMode(activeSlide: IStorySegmentLayer['parameters'] | undefined): StorySegmentDisplayMode;
+export {};

package/lib/features/story/utils/listStoryScrollTrack.js

@@ -0,0 +1,72 @@
+const MARKDOWN_LINE_HEIGHT_PX = 28;
+const MARKDOWN_CONTENT_PADDING_PX = 32;
+const MIN_MARKDOWN_VIEWPORT_RATIO = 0.5;
+export function estimateMarkdownHeight(markdown, viewportHeight) {
+    const lineCount = Math.max(1, markdown.split('\n').length);
+    const estimatedFromLines = lineCount * MARKDOWN_LINE_HEIGHT_PX + MARKDOWN_CONTENT_PADDING_PX;
+    const minHeight = viewportHeight * MIN_MARKDOWN_VIEWPORT_RATIO;
+    return Math.max(minHeight, estimatedFromLines);
+}
+export function estimateMapSegmentHeight(viewportHeight) {
+    return viewportHeight;
+}
+export function getScrollTrackSegmentHeight(layout, index) {
+    var _a;
+    return (_a = layout === null || layout === void 0 ? void 0 : layout.segments.find(segment => segment.index === index)) === null || _a === void 0 ? void 0 : _a.height;
+}
+function segmentHeightForItem(item, viewportHeight, mapViewportHeight, heightsById) {
+    var _a, _b, _c;
+    const mode = getSegmentDisplayMode(item.activeSlide);
+    if (mode === 'map') {
+        return {
+            height: estimateMapSegmentHeight(mapViewportHeight),
+            measured: mapViewportHeight > 0,
+        };
+    }
+    const measured = heightsById[item.id];
+    if (measured !== undefined && measured > 0) {
+        return { height: measured, measured: true };
+    }
+    const markdown = (_c = (_b = (_a = item.activeSlide) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.markdown) !== null && _c !== void 0 ? _c : '';
+    return {
+        height: estimateMarkdownHeight(typeof markdown === 'string' ? markdown : '', viewportHeight),
+        measured: false,
+    };
+}
+/** Builds cumulative segment ranges for the virtual list story scroll track. */
+export function buildListStoryScrollTrack({ items, viewportHeight, mapViewportHeight, heightsById = {}, }) {
+    if (!items.length || viewportHeight <= 0) {
+        return null;
+    }
+    const mapHeight = mapViewportHeight !== null && mapViewportHeight !== void 0 ? mapViewportHeight : viewportHeight;
+    const heights = items.map(item => segmentHeightForItem(item, viewportHeight, mapHeight, heightsById));
+    const handoffGap = mapHeight;
+    let offset = 0;
+    const segments = items.map((item, i) => {
+        const start = offset;
+        const height = heights[i].height;
+        const gapAfter = i < items.length - 1 ? handoffGap : 0;
+        const end = start + height + gapAfter;
+        offset = end;
+        return {
+            id: item.id,
+            index: item.index,
+            contentMode: getSegmentDisplayMode(item.activeSlide),
+            height,
+            measured: heights[i].measured,
+            start,
+            end,
+        };
+    });
+    return {
+        segments,
+        scrollTrackHeight: offset,
+    };
+}
+export function getSegmentDisplayMode(activeSlide) {
+    var _a;
+    if (((_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _a === void 0 ? void 0 : _a.contentMode) === 'markdown') {
+        return 'markdown';
+    }
+    return 'map';
+}

package/lib/features/story/utils/spectaPresentation.d.ts

@@ -0,0 +1,9 @@
+import type { IJGISStoryMap } from '@jupytergis/schema';
+import type { CSSProperties } from 'react';
+/** CSS variables (+ optional text color) for specta theming */
+export declare function getSpectaPresentationCssVars(story: IJGISStoryMap | null): CSSProperties;
+/**
+ * Full inline style for solid surfaces (e.g. mobile drawer).
+ * Do not use on `.jgis-specta-story-panel-container` — it overrides the gradient.
+ */
+export declare function getSpectaPresentationStyle(story: IJGISStoryMap | null): CSSProperties;

package/lib/features/story/utils/spectaPresentation.js

@@ -0,0 +1,37 @@
+import { STORY_TYPE } from "../../../types";
+/** CSS variables (+ optional text color) for specta theming */
+export function getSpectaPresentationCssVars(story) {
+    const isListMode = (story === null || story === void 0 ? void 0 : story.storyType) === STORY_TYPE.verticalScroll;
+    const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
+    const textColor = story === null || story === void 0 ? void 0 : story.presentationTextColor;
+    const style = {};
+    if (textColor) {
+        style['--jgis-specta-text-color'] = textColor;
+        style.color = textColor;
+    }
+    if (isListMode) {
+        style['--jgis-specta-panel-color'] =
+            'transparent';
+        if (bgColor) {
+            style['--jgis-specta-bg-color'] = bgColor;
+        }
+        return style;
+    }
+    if (bgColor) {
+        style['--jgis-specta-panel-color'] = bgColor;
+    }
+    return style;
+}
+/**
+ * Full inline style for solid surfaces (e.g. mobile drawer).
+ * Do not use on `.jgis-specta-story-panel-container` — it overrides the gradient.
+ */
+export function getSpectaPresentationStyle(story) {
+    const style = getSpectaPresentationCssVars(story);
+    const isListMode = (story === null || story === void 0 ? void 0 : story.storyType) === STORY_TYPE.verticalScroll;
+    const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
+    if (!isListMode && bgColor) {
+        style.backgroundColor = bgColor;
+    }
+    return style;
+}

package/lib/features/story/utils/storySegmentViewItems.d.ts

@@ -0,0 +1,5 @@
+import type { IJGISStoryMap, IJupyterGISModel } from '@jupytergis/schema';
+import type { IListStoryMarkdownSegment, IStorySegmentViewItem } from "../types/types";
+export declare function buildStorySegmentViewItems(model: IJupyterGISModel, storyData: IJGISStoryMap | null): IStorySegmentViewItem[];
+export declare function getStoryMarkdownFromSlide(activeSlide: IStorySegmentViewItem['activeSlide']): string;
+export declare function getListStoryMarkdownSegmentsFromItems(items: IStorySegmentViewItem[]): IListStoryMarkdownSegment[];

package/lib/features/story/utils/storySegmentViewItems.js

@@ -0,0 +1,30 @@
+import { getSegmentDisplayMode } from './listStoryScrollTrack';
+export function buildStorySegmentViewItems(model, storyData) {
+    var _a;
+    const segments = (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) !== null && _a !== void 0 ? _a : [];
+    const items = segments.map((segmentId, index) => {
+        var _a;
+        const layer = model.getLayer(segmentId);
+        return {
+            id: segmentId,
+            index,
+            layerName: (_a = layer === null || layer === void 0 ? void 0 : layer.name) !== null && _a !== void 0 ? _a : `Segment ${index + 1}`,
+            activeSlide: layer === null || layer === void 0 ? void 0 : layer.parameters,
+        };
+    });
+    return items;
+}
+export function getStoryMarkdownFromSlide(activeSlide) {
+    var _a;
+    const markdown = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _a === void 0 ? void 0 : _a.markdown;
+    return typeof markdown === 'string' ? markdown : '';
+}
+export function getListStoryMarkdownSegmentsFromItems(items) {
+    return items
+        .filter(item => getSegmentDisplayMode(item.activeSlide) === 'markdown')
+        .map(item => ({
+        id: item.id,
+        index: item.index,
+        markdown: getStoryMarkdownFromSlide(item.activeSlide),
+    }));
+}

package/lib/index.d.ts

@@ -1,14 +1,16 @@
-export * from './annotations';
+export * from './features/annotations';
+export * from './features/processing/serverProcessing';
 export * from './commands/index';
 export * from './constants';
-export * from './dialogs/layerCreationFormDialog';
-export * from './icons';
+export * from './features/layers/layerCreationFormDialog';
+export * from './shared/icons';
 export * from './mainview';
-export * from './menus';
-export * from './panelview';
-export * from './store';
-export * from './stacBrowser';
-export * from './toolbar';
+export * from './workspace/menus';
+export * from './workspace/panels';
+export * from './shared/store';
+export * from './features/stac-browser';
+export * from './features/objectproperties';
+export * from './workspace/toolbar';
 export * from './tools';
 export * from './types';
-export * from './widget';
+export * from './workspace/widget';

package/lib/index.js

@@ -1,14 +1,16 @@
-export * from './annotations';
+export * from './features/annotations';
+export * from './features/processing/serverProcessing';
 export * from './commands/index';
 export * from './constants';
-export * from './dialogs/layerCreationFormDialog';
-export * from './icons';
+export * from './features/layers/layerCreationFormDialog';
+export * from './shared/icons';
 export * from './mainview';
-export * from './menus';
-export * from './panelview';
-export * from './store';
-export * from './stacBrowser';
-export * from './toolbar';
+export * from './workspace/menus';
+export * from './workspace/panels';
+export * from './shared/store';
+export * from './features/stac-browser';
+export * from './features/objectproperties';
+export * from './workspace/toolbar';
 export * from './tools';
 export * from './types';
-export * from './widget';
+export * from './workspace/widget';

package/lib/keybindings.json

@@ -39,6 +39,11 @@
         "keys": ["F2"],
         "selector": ".data-jgis-keybinding"
     },
+    {
+        "command": "jupytergis:toggleDrawFeatures",
+        "keys": ["Accel Shift D"],
+        "selector": ".data-jgis-keybinding"
+    },
     {
         "command": "jupytergis:executeConsole",
         "keys": ["Shift Enter"],

package/lib/mainview/OpenEOTileLayer.d.ts

@@ -0,0 +1,49 @@
+import { Connection, Process } from '@openeo/js-client';
+import TileLayer from 'ol/layer/Tile';
+import { ProjectionLike } from 'ol/proj';
+import { XYZ as XYZSource } from 'ol/source';
+import { Options as XYZOptions } from 'ol/source/XYZ';
+export interface ISigninValues {
+    serverUrl: string;
+    username: string;
+    password: string;
+}
+export declare function connect(connectionInfo: IOpenEOConnectionInfo): Promise<Connection>;
+export interface IOpenEOConnectionInfo {
+    /**
+     * The url to the open-eo server.
+     */
+    url?: string;
+    /**
+     * The session bearer.
+     */
+    authBearer?: string;
+}
+export interface IOpenEOTileLayerOptions {
+    /**
+     * The tile size
+     */
+    projection?: ProjectionLike;
+}
+export declare class OpenEOTileLayer extends TileLayer {
+}
+export interface IOpenEOTileSourceOptions extends XYZOptions {
+    /**
+     * The process graph value.
+     */
+    processGraph: Process;
+    /**
+     * The connection info.
+     */
+    connectionInfo: IOpenEOConnectionInfo;
+}
+export declare class OpenEOTileSource extends XYZSource {
+    constructor(options: IOpenEOTileSourceOptions);
+    private _connect;
+    private _updateUrl;
+    private _url;
+    private _connection;
+    private _connected;
+    processGraph: Process;
+    connectionInfo: IOpenEOConnectionInfo;
+}

package/lib/mainview/OpenEOTileLayer.js

@@ -0,0 +1,179 @@
+import { showErrorMessage, Dialog, ReactWidget, showDialog, } from '@jupyterlab/apputils';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { OpenEO } from '@openeo/js-client';
+import TileLayer from 'ol/layer/Tile';
+import { XYZ as XYZSource } from 'ol/source';
+import React from 'react';
+const CONNECTIONS = {};
+class SigninWidget extends ReactWidget {
+    constructor(initialServerUrl = '') {
+        super();
+        this._username = '';
+        this._password = '';
+        this._serverUrl = initialServerUrl;
+    }
+    getValue() {
+        return {
+            serverUrl: this._serverUrl,
+            username: this._username,
+            password: this._password,
+        };
+    }
+    render() {
+        return (React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                minWidth: '320px',
+            } },
+            React.createElement("label", null,
+                React.createElement("div", { style: { marginBottom: '4px' } }, "Server URL"),
+                React.createElement("input", { className: "jp-mod-styled", type: "text", defaultValue: this._serverUrl, onChange: e => {
+                        this._serverUrl = e.target.value;
+                    }, style: { width: '100%' } })),
+            React.createElement("label", null,
+                React.createElement("div", { style: { marginBottom: '4px' } }, "Username"),
+                React.createElement("input", { className: "jp-mod-styled", type: "text", onChange: e => {
+                        this._username = e.target.value;
+                    }, style: { width: '100%' } })),
+            React.createElement("label", null,
+                React.createElement("div", { style: { marginBottom: '4px' } }, "Password"),
+                React.createElement("input", { className: "jp-mod-styled", type: "password", onChange: e => {
+                        this._password = e.target.value;
+                    }, style: { width: '100%' } }))));
+    }
+}
+async function showSigninDialog(serverUrl) {
+    const body = new SigninWidget(serverUrl);
+    const result = await showDialog({
+        title: 'Signin to OpenEO tile server',
+        body,
+        buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Sign In' })],
+    });
+    if (!result.button.accept) {
+        return null;
+    }
+    return body.getValue();
+}
+export async function connect(connectionInfo) {
+    let { url } = connectionInfo;
+    const { authBearer } = connectionInfo;
+    let signIn = null;
+    if (!url) {
+        signIn = await showSigninDialog(url);
+        if (!signIn) {
+            throw new Error('Needs credentials to connect to OpenEO server.');
+        }
+        url = signIn.serverUrl;
+    }
+    if (!url.match(/^https?:\/\//i)) {
+        url = `https://${url}`;
+    }
+    // Already connected to that server url
+    if (CONNECTIONS[url]) {
+        return CONNECTIONS[url];
+    }
+    const errorTitle = 'Failed to connect to the OpenEO server';
+    const parsedUrl = new URL(url);
+    if (window.location.protocol === 'https:' &&
+        parsedUrl.protocol !== 'https:') {
+        showErrorMessage(errorTitle, 'You are trying to connect to a server with HTTP instead of HTTPS, which is insecure and prohibited by web browsers. Please use HTTPS instead.');
+        throw new Error(errorTitle);
+    }
+    try {
+        const connection = await OpenEO.connect(url, {
+            addNamespaceToProcess: true,
+        });
+        const providers = await connection.listAuthProviders();
+        let providerType = 'basic';
+        let token = null;
+        if (authBearer) {
+            providerType = authBearer.split('/')[0];
+            token = authBearer.split('/')[2];
+        }
+        const authProvider = providers.find(provider => provider.type === providerType);
+        if (!authProvider) {
+            throw new Error(`Failed to get "${providerType}" OpenEO provider.`);
+        }
+        if (token) {
+            authProvider.setToken(token);
+        }
+        else {
+            if (!signIn) {
+                // TODO Add support for signin dialogs for OIDC?
+                signIn = await showSigninDialog(url);
+                if (!signIn) {
+                    throw new Error('Needs credentials to connect to OpenEO server.');
+                }
+            }
+            await authProvider.login(signIn.username, signIn.password);
+            const token = authProvider.getToken();
+            if (token) {
+                connectionInfo.authBearer = token;
+            }
+        }
+        const serviceTypes = await connection.listServiceTypes();
+        // TODO Support other services?
+        if (!serviceTypes['XYZ']) {
+            throw new Error('We need the OpenEO service to support XYZ tiling.');
+        }
+        CONNECTIONS[url] = connection;
+        return connection;
+    }
+    catch (error) {
+        showErrorMessage(errorTitle, `${error}`);
+        throw error;
+    }
+}
+export class OpenEOTileLayer extends TileLayer {
+}
+export class OpenEOTileSource extends XYZSource {
+    constructor(options) {
+        super(Object.assign(Object.assign({}, options), { url: '{z},{x},{y}', tileLoadFunction: async (tile, src) => {
+                await this._connected.promise;
+                let url = this._url;
+                if (!url) {
+                    throw new Error('XYZ URL undefined');
+                }
+                const [z, x, y] = tile.tileCoord;
+                url = url.replace('%7Bz%7D', z);
+                url = url.replace('%7By%7D', y);
+                url = url.replace('%7Bx%7D', x);
+                const res = await fetch(url, {
+                    method: 'GET',
+                });
+                const blob = await res.blob();
+                tile.getImage().src = URL.createObjectURL(blob);
+            } }));
+        this._url = null;
+        this._connection = null;
+        this._connected = new PromiseDelegate();
+        this._connect(options.connectionInfo, options.processGraph);
+    }
+    async _connect(connectionInfo, graph) {
+        this._connection = await connect(connectionInfo);
+        if (!this._connection) {
+            throw new Error('Failed to get OpenEO connection');
+        }
+        this._connected.resolve();
+        this._updateUrl(graph);
+    }
+    async _updateUrl(processGraph) {
+        await this._connected.promise;
+        if (!this._connection) {
+            throw new Error('Failed to get OpenEO service connection');
+        }
+        let service = null;
+        try {
+            service = await this._connection.createService(processGraph, 'XYZ');
+        }
+        catch (e) {
+            throw new Error(`Failed to connect to XYZ service ${e}`);
+        }
+        if (!service.url) {
+            throw new Error('Failed to connect to XYZ service');
+        }
+        this._url = service.url;
+        this.refresh();
+    }
+}