オントロジー SDK アプリケーション間のドラッグアンドドロップ

Palantir は、オントロジー SDK と統合できる React ↗ ライブラリを提供しています。このライブラリを使用すると、カスタムアプリケーション間でドラッグアンドドロップ機能を作成、実装できます。@palantir/dnd-osdk-react ライブラリは、型安全なコンポーネントとフックを提供します。これらを使用してドラッグアンドドロップゾーンを設定し、アプリケーション内の異なる部分と、Workshop、Object Explorer、Gaia などのほかの Palantir プラットフォームアプリケーションとの間で、オブジェクトやオブジェクトセットを転送できます。

Object Explorer の結果のドラッグゾーンと Gaia のマップのドロップゾーンのインターフェースが表示されています。

ライブラリの主要機能と重要な概念

オントロジー SDK との統合： Palantir のオントロジー SDK 専用に構築されており、オブジェクトセットのハイドレーションとメタデータの処理を自動で行います。
柔軟なデータサポートとシリアライズ： 同じドロップゾーンで、オントロジー SDK のオブジェクトとオブジェクトセット、およびカスタムデータ型を受け入れます。また、このライブラリはすべてのオブジェクトとオブジェクトセットのデータをシリアライズします。
パフォーマンスの最適化： 深い比較に基づくメモ化を使用し、不要なバックエンド呼び出しを防ぎます。
カスタマイズ可能な視覚的フィードバック： ドラッグの状態に基づいてドロップゾーンのスタイルを設定するための、カスタマイズ可能なサポートが組み込まれています。
オブジェクトタイプの定義： ドラッグアンドドロップゾーンが受け入れるオブジェクトタイプを定義できます。

オブジェクトタイプ別のドラッグアンドドロップ

オブジェクトセットへの変換と転送： ドロップされたすべてのオブジェクトは自動的にオブジェクトセットに変換され、アプリケーションの境界を越えて一貫した処理が行われます。
クライアント統合： メタデータの取得とオブジェクトセットの操作を有効にするには、オントロジー SDK クライアントを生成する必要があります。

ライブラリを Code Workspaces に追加する

オントロジー SDK と @palantir/dnd-osdk-react ライブラリを使った開発をはじめるには、Code Workspaces に移動し、リポジトリの種類を React にして、新しい VS Code ワークスペースを作成します。

Code Workspaces の種類選択メニューに React リポジトリの種類が表示されています。

ワークスペースのライブラリパネルで @palantir/dnd-osdk-react ライブラリを検索し、選択します。Code Workspaces でライブラリが見つからない場合は、Palantir サポートにお問い合わせください。

ワークスペースのライブラリパネルにドラッグアンドドロップライブラリが表示されています。

ライブラリをワークスペースに追加すると、そのフックとコンポーネントを使用して、カスタムのオントロジー SDK アプリケーションと Palantir プラットフォームアプリケーションにまたがるドラッグアンドドロップのワークフローを処理できます。はじめる際は、以下の例を参考にしてください。

例：ドラッグゾーンを作成する

OsdkObjectDragZone コンポーネントを使用して、オントロジー SDK のオブジェクトデータをドラッグ可能な状態で表示します。アプリケーションのユーザーがコンテンツをドラッグすると、関連するオブジェクトデータがドラッグのペイロードに自動的に含まれます。

オブジェクトセットを使用してドラッグゾーンを作成するには、以下のコードサンプルを参照できます。このサンプルでは、次の処理を行います。

生成したオントロジー SDK から特定のオブジェクトタイプをインポートします。これらは、ドラッグゾーン用のオブジェクトセットまたは単一のオブジェクトを構築するために使用します。
生成したオントロジー SDK クライアントを使用して、クエリまたはオブジェクトの集まりを表すオブジェクトセットを作成します。または、以前に取得したオブジェクトのインスタンスを使用できます。
関連する JSX ↗ コンテンツを OsdkObjectDragZone コンポーネント内に配置して、コンテンツをドラッグ可能にします。
生成したオントロジー SDK クライアントを参照するように client を設定し、ドラッグのペイロードに含める objectSet を設定します。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { MyObjectType } from "@my-osdk-lib/sdk"; // オブジェクトタイプをインポートします
import { OsdkObjectDragZone } from "@palantir/dnd-osdk-react";
import client from "./client";
import { ObjectSet } from "@osdk/api";

// MyObjectType からオブジェクトセットを作成します
const objectSet = client(MyObjectType);

function ObjectSetDragExample() {
    return (
        <div>
            <OsdkObjectDragZone client={client} objectSets={objectSet}>
                <p>Drag me!</p>
            </OsdkObjectDragZone>
        </div>
    );
}

export default ObjectSetDragExample;

例：ドロップゾーンを作成する

OsdkObjectDropZone コンポーネントを使用して、オントロジー SDK のオブジェクトデータをドロップ可能な状態で表示します。アプリケーションのユーザーがコンテンツをドロップすると、コンポーネントはオブジェクトデータのデシリアライズを自動的に処理し、ドロップされたオブジェクトデータを提供します。

オブジェクトセットを使用してドロップゾーンを作成するには、以下のコードサンプルを参照できます。このサンプルは、上記のドラッグの例と同様に、オブジェクトタイプと生成したオントロジー SDK クライアントをインポートします。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { MyObjectType } from "@my-osdk-lib/sdk"; // オブジェクトタイプをインポートします
import { OsdkObjectDropZone } from "@palantir/dnd-osdk-react";
import client from "./client";
import { ObjectSet } from "@osdk/api";

// MyObjectType のみを受け入れるようにドロップゾーンを制限します
const acceptedObjectTypes = [MyObjectType];

// オブジェクトがドロップされたときに実行されるアクションを定義します
const handleObjectSetsDrop = React.useCallback<
  OnOsdkObjectSetsDrop<[MyObjectType]>
>(async (objectSetsByApiName) => {
  // API名でドロップされたオブジェクトセットにアクセスします
  const myObjectObjectSets = objectSetsByApiName.MyObjectType;
  ...
}, []);

次に、ドロップゾーンコンポーネントを設定します。

Copied!1
2
3
4
5
6
7
8
9
10
11
import styles from "./DropZoneExample.module.css";

<OsdkObjectDropZone
    client={client} // オントロジー SDK のクライアントインスタンス
    acceptedObjectTypes={acceptedObjectTypes} // 受け入れるオブジェクトタイプを定義します
    onObjectSetsDrop={handleObjectSetsDrop} // ドロップハンドラー関数として機能します
    className={styles.dropZone} // ドロップゾーンの基本スタイルを設定します
    acceptedClassName={styles.dropZoneAccepted} // ドラッグペイロードが受け入れられたときのドロップゾーンのスタイルを設定します
>
    <p>Drop objects here!</p>
</OsdkObjectDropZone>;

以下の完全な例では、MyObjectType オブジェクトタイプのオブジェクトとオブジェクトセットを受け入れるドロップゾーンを作成します。オブジェクトがドロップされると、このゾーンはドロップされたオブジェクトセットから最初の100個のオブジェクトを取得し、クリアボタンとともにリストに表示します。この例では、クリアボタンなど、すべてのユーザーインターフェースコンポーネントに @blueprintjs/core ライブラリを使用しています。

Copied!1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import {
    OnOsdkObjectSetsDrop,
    OsdkInstanceObjects,
    OsdkObjectDropZone,
} from "@palantir/dnd-osdk-react";
import { MyObjectType } from "@my-osdk-lib/sdk";
import React from "react";
import client from "./client";
import { Button, Card, CardList } from "@blueprintjs/core";
import styles from "./DropZoneExample.module.css";

// Accept only MyObjectTypes
const acceptedObjectTypes = [MyObjectType];

export function MyObjectTypeDropZoneExample() {
    const [loadedObjects, setLoadedObjects] = React.useState<
        OsdkInstanceObjects<[typeof MyObjectType]>
    >([]);

    const handleObjectSetsDrop = React.useCallback<
        OnOsdkObjectSetsDrop<[MyObjectType]>
    >(async (objectSetsByApiName) => {
        // Access dropped object sets by their API name
        const myCoolObjectObjectSets = objectSetsByApiName.MyObjectType;

        const firstObjectSet = myCoolObjectObjectSets?.[0];

        // If no object set was dropped, exit early
        if (firstObjectSet == null) {
            return;
        }

        // Fetch the first 100 objects from the dropped object set
        const objects = (
            await firstObjectSet.fetchPage({
                $pageSize: 100,
                $includeRid: true,
            })
        ).data;

        // Update state with the loaded objects
        setLoadedObjects(objects);
    }, []);

    const handleClear = React.useCallback(() => {
        // Clear the loaded objects when the clear button is clicked
        setLoadedObjects([]);
    }, []);

    return (
        <div>
            <h2>Drop Zone Example</h2>
            <div>
                <OsdkObjectDropZone
                    client={client} // OSDK client instance
                    className={styles.dropZone} // Base styling for the drop zone
                    acceptedClassName={styles.dropZoneAccepted} // Styling when drag payload is accepted
                    acceptedObjectTypes={acceptedObjectTypes} // Which object types to accept
                    onObjectSetsDrop={handleObjectSetsDrop} // Drop handler function
                >
                    <p>Drop MyObjectTypes here!</p>
                </OsdkObjectDropZone>

                <div>
                    {/* Conditionally render either a clear button or empty state message */}
                    {loadedObjects.length > 0 ? (
                        // If objects have been dropped and loaded, show a clear button with count
                        <Button onClick={handleClear} intent="primary">
                            Clear ({loadedObjects.length} objects)
                        </Button>
                    ) : (
                        // If no objects have been loaded yet, show instructional text
                        <div className={styles.emptyState}>
                            Dropped objects will appear here once you drop them
                            into the drop zone.
                        </div>
                    )}

                    {/* Render the list of dropped objects using Blueprint CardList */}
                    <CardList bordered={true}>
                        {loadedObjects.map((object) => (
                            <Card key={object.$rid} interactive={true}>
                                {/* Display the object's title using the $title property */}
                                <h4>{object.$title}</h4>
                            </Card>
                        ))}
                    </CardList>
                </div>
            </div>
        </div>
    );
}

カスタムのオントロジー SDK React アプリケーションの開発について詳しくはこちら。

←

PREVIOUS概要

NEXTドラッグアンドドロップ統合ポイントを作成する

→