Object Table 위젯

Object Table은 한 객체 유형 또는 여러 유형의 데이터를 표로 표시합니다. 속성, 연결 객체, URL, 시계열과 함수 기반 열을 배치하고 정렬, 선택, 셀 편집 및 행별 액션을 구성할 수 있습니다.

입력과 열

Object set에 기존 객체 집합 변수를 연결하거나 새 변수를 만듭니다. 입력을 지정하면 해당 유형의 속성을 Columns에서 선택할 수 있습니다. 연결 객체, 매개변수를 사용하는 URL, 시계열과 함수 기반 속성도 열로 추가할 수 있습니다.

열의 표시 이름은 추가할 때 객체 속성의 이름을 기본값으로 갖는 별도 텍스트입니다. 나중에 온톨로지의 속성 이름을 바꾸어도 표의 제목은 자동으로 바뀌지 않습니다.

사용자는 열 제목 옆 화살표의 Configure columns에서 열과 순서를 선택할 수 있습니다. 사용자 선택을 상태 저장에 포함하려면 Static String Array에 Variable-backed visibility and order를 연결하고 external ID 및 State saving을 켭니다. 배열은 처음에 비어 있어도 됩니다.

선택과 이벤트

자동 선택은 보통 위젯이 표시될 때 발생합니다. 접힌 섹션 안에 있으면 펼칠 때까지 선택하지 않습니다. Eagerly mount 또는 Never unmount를 사용하면 시각적으로 숨겨진 상태에서도 선택이 발생할 수 있으므로 위젯 생명주기를 함께 확인합니다.

표시와 서식

이미지 URL을 가진 속성에 hubble:icon 유형 클래스를 지정하면 객체 유형의 기본 아이콘 대신 그 이미지를 표시할 수 있습니다.

내보내기와 행 메뉴

내보내기 버튼을 제공하는 설정과 사용자의 데이터 및 다운로드 권한은 별도로 적용됩니다.

함수 기반 열의 계약

함수의 입력에는 ObjectSet<ObjectType>가 있어야 하며 추가 입력을 받을 수도 있습니다. ObjectType[] 입력도 사용할 수 있지만 먼저 객체 배열을 로드하는 비용이 있어 집합 입력을 권장합니다.

결과는 각 입력 객체를 값 또는 custom type에 대응시키는 map입니다.

함수와 custom type을 정의하여 게시한 뒤 열에 연결합니다. 수식, 모델 결과, 연결 객체의 속성이나 다른 사용자 입력에 반응하는 값을 계산할 수 있습니다. TypeScript v2의 키는 객체의 $objectSpecifier를 사용하며 기본 키 문자열을 임의로 조립하지 않습니다.

예: 지연 시간으로 Urgency 계산

FlightAlertWorkshopTutorial의 timeOfDelayHours로 긴급도를 계산하는 예입니다. 이 예제의 업무 규칙은 4시간 초과를 High, 2시간 초과 4시간 이하를 Medium, 2시간 이하를 Low로 분류합니다. 정확히 2시간이면 Low, 4시간이면 Medium입니다.

지연값이 없으면 그 객체의 결과 항목을 만들지 않아 해당 셀을 값 없음으로 남깁니다. 누락을 낮은 긴급도로 분류하지 않습니다. 각 언어 코드는 별도의 함수 파일 예이며 실제 유형과 속성이 생성 SDK에 있어야 합니다.

TypeScript v1

import { Function, FunctionsMap } from "@foundry/functions-api";
import { FlightAlertWorkshopTutorial, ObjectSet } from "@foundry/ontology-api";

export class UrgencyFunctions {
    @Function()
    public flightAlertCalculateUrgency(
        flightAlerts: ObjectSet<FlightAlertWorkshopTutorial>,
    ): FunctionsMap<FlightAlertWorkshopTutorial, string> {
        const result = new FunctionsMap<FlightAlertWorkshopTutorial, string>();
        for (const alert of flightAlerts.all()) {
            const hours = alert.timeOfDelayHours;
            if (hours == null) continue;
            result.set(alert, hours > 4 ? "High" : hours > 2 ? "Medium" : "Low");
        }
        return result;
    }
}

TypeScript v2

import { ObjectSet, ObjectSpecifier } from "@osdk/client";
import { FlightAlertWorkshopTutorial } from "@ontology/sdk";

export default async function flightAlertCalculateUrgency(
    flightAlerts: ObjectSet<FlightAlertWorkshopTutorial>,
): Promise<Record<ObjectSpecifier<FlightAlertWorkshopTutorial>, string>> {
    const result: Record<ObjectSpecifier<FlightAlertWorkshopTutorial>, string> = {};
    for await (const alert of flightAlerts.asyncIter({ $select: ["timeOfDelayHours"] })) {
        const hours = alert.timeOfDelayHours;
        if (hours == null) continue;
        result[alert.$objectSpecifier] = hours > 4 ? "High" : hours > 2 ? "Medium" : "Low";
    }
    return result;
}

Python

from functions.api import function
from ontology_sdk.ontology.objects import FlightAlertWorkshopTutorial
from ontology_sdk.ontology.object_sets import FlightAlertWorkshopTutorialObjectSet


@function
def flight_alert_calculate_urgency(
    flight_alerts: FlightAlertWorkshopTutorialObjectSet,
) -> dict[FlightAlertWorkshopTutorial, str]:
    result: dict[FlightAlertWorkshopTutorial, str] = {}
    for alert in flight_alerts.iterate():
        hours = alert.time_of_delay_hours
        if hours is None:
            continue
        result[alert] = "High" if hours > 4 else "Medium" if hours > 2 else "Low"
    return result

열에 연결

Add column에서 Function-backed property를 선택합니다.

열의 fx 아이콘에서 flightAlertCalculateUrgency 함수를 고릅니다.

함수 버전을 확인하고 입력을 연결합니다. Use a runtime input은 현재 표에 표시할 객체를 전달하여 계산량을 줄입니다. Use a variable input은 지정한 객체 집합 변수 전체를 전달하므로 더 많은 계산과 로드가 필요할 수 있습니다.

열 표시 이름을 Urgency로 바꿉니다.

예: 한 함수에서 공항의 세 열 반환

예제에서는 경고의 departureAirport 링크가 AirportObject를 가리키고, 경고의 departureAirportCode가 공항의 고유 조회 키 iata와 대응한다고 가정합니다. 연결된 공항을 먼저 모아 조회표를 만들고 각 경고에 airport, city와 country를 대응시킵니다.

매핑할 코드나 공항이 없으면 해당 경고의 결과를 생략합니다. 공항의 개별 속성이 없는 경우를 표현하기 위해 custom type의 세 필드는 선택 값으로 선언합니다. 조회나 권한 오류를 빈 값으로 삼키지는 않으며 SDK 호출 오류는 함수 실패로 전달됩니다.

TypeScript v1

import { Function, FunctionsMap } from "@foundry/functions-api";
import { FlightAlertWorkshopTutorial, ObjectSet } from "@foundry/ontology-api";

interface LinkedDepartureAirportProperties {
    airport?: string;
    city?: string;
    country?: string;
}

export class AirportColumnFunctions {
    @Function()
    public getColumnsFromLinkedDepartureAirport(
        flightAlerts: ObjectSet<FlightAlertWorkshopTutorial>,
    ): FunctionsMap<FlightAlertWorkshopTutorial, LinkedDepartureAirportProperties> {
        const airports = new Map<string, LinkedDepartureAirportProperties>();
        for (const airport of flightAlerts.searchAroundDepartureAirport().all()) {
            if (airport.iata == null) continue;
            airports.set(airport.iata, {
                airport: airport.airport,
                city: airport.city,
                country: airport.country,
            });
        }
        const result = new FunctionsMap<FlightAlertWorkshopTutorial, LinkedDepartureAirportProperties>();
        for (const alert of flightAlerts.all()) {
            if (alert.departureAirportCode == null) continue;
            const fields = airports.get(alert.departureAirportCode);
            if (fields !== undefined) result.set(alert, fields);
        }
        return result;
    }
}

TypeScript v2

import { ObjectSet, ObjectSpecifier } from "@osdk/client";
import { FlightAlertWorkshopTutorial } from "@ontology/sdk";

interface LinkedDepartureAirportProperties {
    airport?: string;
    city?: string;
    country?: string;
}

export default async function getColumnsFromLinkedDepartureAirport(
    flightAlerts: ObjectSet<FlightAlertWorkshopTutorial>,
): Promise<Record<ObjectSpecifier<FlightAlertWorkshopTutorial>, LinkedDepartureAirportProperties>> {
    const airports = new Map<string, LinkedDepartureAirportProperties>();
    for await (const airport of flightAlerts.pivotTo("departureAirport").asyncIter({
        $select: ["iata", "airport", "city", "country"],
    })) {
        if (airport.iata == null) continue;
        airports.set(airport.iata, {
            airport: airport.airport,
            city: airport.city,
            country: airport.country,
        });
    }
    const result: Record<ObjectSpecifier<FlightAlertWorkshopTutorial>, LinkedDepartureAirportProperties> = {};
    for await (const alert of flightAlerts.asyncIter({ $select: ["departureAirportCode"] })) {
        if (alert.departureAirportCode == null) continue;
        const fields = airports.get(alert.departureAirportCode);
        if (fields !== undefined) result[alert.$objectSpecifier] = fields;
    }
    return result;
}

Python

from dataclasses import dataclass
from typing import Optional
from functions.api import function
from ontology_sdk.ontology.objects import FlightAlertWorkshopTutorial
from ontology_sdk.ontology.object_sets import FlightAlertWorkshopTutorialObjectSet


@dataclass
class LinkedDepartureAirportProperties:
    airport: Optional[str]
    city: Optional[str]
    country: Optional[str]


@function
def get_columns_from_linked_departure_airport(
    flight_alerts: FlightAlertWorkshopTutorialObjectSet,
) -> dict[FlightAlertWorkshopTutorial, LinkedDepartureAirportProperties]:
    airports: dict[str, LinkedDepartureAirportProperties] = {}
    for airport in flight_alerts.search_around_departure_airport().iterate():
        if airport.iata is None:
            continue
        airports[airport.iata] = LinkedDepartureAirportProperties(
            airport=airport.airport,
            city=airport.city,
            country=airport.country,
        )
    result: dict[FlightAlertWorkshopTutorial, LinkedDepartureAirportProperties] = {}
    for alert in flight_alerts.iterate():
        if alert.departure_airport_code is None:
            continue
        fields = airports.get(alert.departure_airport_code)
        if fields is not None:
            result[alert] = fields
    return result

함수를 게시한 뒤 Function-backed property에서 getColumnsFromLinkedDepartureAirport를 선택합니다. 여러 필드를 한 함수에서 반환하면 관련 계산을 묶고 반복 실행을 줄일 수 있습니다.

이 함수에도 Use a runtime input으로 현재 표의 경고 집합을 넘기거나 Use a variable input으로 전체 지정 집합을 넘길 수 있습니다.

반환한 필드를 Departure Airport, Departure City와 Departure Country 열에 표시하고 제목과 순서를 정합니다.

함수 기반 열의 정렬

Column configuration에 함수 기반 열을 추가한 뒤 Default sort(s)에서 Function-backed column을 선택합니다. 함수 기반 정렬에서는 대상 행의 함수 계산이 끝날 때까지 표시를 기다립니다.

• 함수 기반 정렬과 기본 속성 정렬을 함께 사용할 수 없습니다.
• 객체가 10,000개를 넘으면 사용자가 함수 기반 열로 정렬할 수 없습니다.
• 10,000개가 넘는 표에 함수 기반 기본 정렬을 지정하면 경고를 표시하고 로드하는 페이지 안에서만 정렬합니다.
• 정렬 대상 함수 열은 Column configuration에 포함되어 있어야 합니다. 화면에서는 숨기려면 Variable-backed visibility and order의 String Array에 보여 줄 열의 API 이름만 넣습니다. 빈 배열은 모든 열을 표시하므로 숨기기용 배열은 구체적으로 구성합니다.

시계열 열

일반 속성과 시계열 속성, 변환으로 계산한 시계열을 함께 보여 줄 수 있습니다. Country 예제에서는 Name, 일별 New Cases 및 그 시계열에서 계산한 Case Acceleration, Weekly Cases와 Total Cases를 표시합니다. 각 시계열 열의 왼쪽에는 가장 최근 관측값을, 오른쪽에는 이력을 나타내는 sparkline을 보여 줍니다.

Weekly Cases 예는 주간 평균 사례 수를 구성합니다.

Add transform에서 집계 변환을 추가하여 주간 평균 시계열을 만듭니다.

Single value summarizer로 마지막 주간 평균값을 고릅니다. Format Number에서 compact 표기를, Conditional Formatting에서 값이 100을 초과할 때 빨간색으로 표시하는 예제 규칙을 정합니다.

Sparkline에는 표시할 time range, 값에 따른 색과 비교용 baseline을 구성합니다.

표시 규칙은 값 서식을 따릅니다.

셀 단위 인라인 편집

액션을 연결하여 표에서 수정한 값을 제출합니다. 호환되는 액션은 다음 조건을 만족해야 합니다.

• 단일 Modify object 규칙 또는 함수 기반 액션입니다.
• 수정 속성은 from parameter로 정의합니다. 정적 값이나 객체 매개변수의 속성에서 직접 가져오는 규칙으로 매핑하지 않습니다.
• 수정 열에 대응하는 속성 매개변수는 Boolean, Integer나 String 같은 단일 원시형입니다. 객체 참조나 배열을 속성 입력으로 사용하는 방식은 지원하지 않습니다.
• 해당 속성 매개변수의 표시 상태를 Hidden으로 두지 않습니다.

열거형 선택값은 셀 dropdown에 반영하고 매개변수 및 액션의 검증 조건도 적용합니다. Text input과 Text area처럼 매개변수의 표시 형식은 인라인 편집에서 그대로 반영하지 않습니다. 매개변수 ID를 속성 ID와 맞추면 열 매핑이 쉬워집니다. Multipass 사용자 매개변수는 온톨로지의 Multipass 값 서식을 사용하는 속성에 연결합니다.

Column configuration의 Enable inline editing을 켜고 액션을 선택한 뒤 매개변수를 열에 매핑합니다. 사용자가 셀에서 입력하지 않을 매개변수는 모듈 변수로 제공할 수도 있습니다.

사용자는 표 아래의 Edit table로 편집 모드에 들어갑니다. Custom button text로 레이블을 바꾸거나 Enable edit mode by default로 처음부터 편집 모드를 사용할 수 있습니다.

함수 기반 액션은 한 번에 최대 20행, 그 외 액션은 최대 200행을 편집 대기 상태로 둘 수 있습니다. Undo로 아직 제출하지 않은 편집을 되돌립니다.

Submit을 누르고 확인창에서 다시 Submit하면 변경을 제출합니다. One-click submit을 켜면 이 확인창을 생략합니다.

액션 기반 인라인 편집의 일괄 검증 조건도 적용됩니다. 각 편집의 검증은 다른 대기 편집을 적용하기 전 상태를 기준으로 하므로 여러 행의 공유 집계나 서로의 변경을 읽는 액션에 그대로 사용하지 않습니다. 같은 객체를 여러 번 수정하거나 조인 테이블 링크를 편집하는 구성 등의 제한을 함께 확인합니다.

오른쪽 클릭 메뉴

Customize right-click menu를 켜고 현재 오른쪽 클릭한 객체를 받을 출력 변수를 만듭니다. Active object나 Selected objects와 별도로 메뉴의 대상 객체를 정하는 값입니다.

Add item으로 표시 정보를 구성하고 On click에서 액션 또는 이벤트를 선택합니다. 매개변수나 이벤트에는 앞서 만든 오른쪽 클릭 객체 변수를 사용할 수 있습니다.

시나리오

Scenario to load data from은 읽을 시나리오를 지정하며 표의 대상 객체와 순서에도 영향을 줍니다. Compare against Scenarios를 켜고 Scenario Array를 연결하면 변경이 있는 열에 각 시나리오의 값을 나란히 표시할 수 있습니다.

목록 형태의 화면은 Object List, 단일 객체의 자세한 화면은 Object View, 속성별 표시는 Property List를 사용할 수 있습니다. 연결 경로는 Links, 집합 요약은 Object Set Title에 설명합니다.