@ocelescope/core 0.10.1 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/ActivityPicker-CtFSu1YR.js +31 -0
- package/dist/{AreaChart-DoD3LM50.js → AreaChart-BSwN1fMp.js} +6 -6
- package/dist/AttributePicker-Cq7luTEi.js +94 -0
- package/dist/{BarChart-Cixo5Okd.js → BarChart-CyMePf1z.js} +6 -6
- package/dist/E2ORelationPicker-C8EmrbFx.js +45 -0
- package/dist/EventAttributePicker-BgEdydek.js +26 -0
- package/dist/EventPicker-D5uNOTw1.js +38 -0
- package/dist/HistogramChart-CJwvvDUu.js +86 -0
- package/dist/{LineChart-CVz-dkJI.js → LineChart-Cbxnm338.js} +6 -6
- package/dist/O2ORelationPicker-CryAxxUo.js +43 -0
- package/dist/ObjectAttributePicker-D_I3LQsY.js +26 -0
- package/dist/ObjectPicker-D-ksQveT.js +38 -0
- package/dist/ObjectTypePicker-Bw8Fsktx.js +45 -0
- package/dist/{OcelChart-DvGTjJXo.js → OcelChart-DJNM5peW.js} +3 -4
- package/dist/OptionPicker-DQ-WYFQZ.js +344 -0
- package/dist/{PieChart-DBiASngC.js → PieChart-BmMoI0TY.js} +6 -6
- package/dist/{ScatterChart-jIQOjQes.js → ScatterChart-CASPRlZU.js} +6 -6
- package/dist/{SqlChart-bwDArK2l.js → SqlChart-cxKpWkyh.js} +34 -35
- package/dist/{SunburstChart-D6FhYBHI.js → SunburstChart-Ddx9EaL-.js} +5 -5
- package/dist/attributeOptions-COiWnKUS.js +36 -0
- package/dist/{cartesian-5TPNWjl_.js → cartesian-CtdS2iZb.js} +2 -3
- package/dist/index.d.ts +228 -209
- package/dist/index.js +83 -172
- package/dist/relationOptions-hEEsEQrx.js +32 -0
- package/dist/{rolldown-runtime-D7D4PA-g.js → rolldown-runtime-D8jQpDG7.js} +1 -2
- package/dist/{series-BBXVjHHY.js → series-Bx0HVnSy.js} +2 -3
- package/dist/style.css +630 -745
- package/dist/{Plot-CxHHyXot.js → useChart-BK4pjGal.js} +29 -5
- package/dist/{useCurrentOCEL-BeBa7K0g.js → useCurrentOCEL-BUH5XGje.js} +2 -4
- package/dist/useOcelId-BEC6_yRa.js +8 -0
- package/dist/{useOcelQuery-D1QM-Zgv.js → useOcelQuery-6vtgZNzz.js} +2 -3
- package/dist/useSearch-CdXjjv-a.js +18 -0
- package/package.json +25 -26
- package/dist/ActivityPicker-DbrGeiC_.js +0 -18
- package/dist/EventAttributePicker-Cf2vVKv5.js +0 -27
- package/dist/NamePicker-Be-qmr1x.js +0 -43
- package/dist/ObjectAttributePicker-CL43EsYt.js +0 -27
- package/dist/ObjectTypePicker-CKmszS0y.js +0 -18
- package/dist/useOcelId-BSU0-Srk.js +0 -6
package/README.md
CHANGED
|
@@ -137,7 +137,7 @@ ranges:
|
|
|
137
137
|
series="measure"
|
|
138
138
|
yAxes="independent"
|
|
139
139
|
sql={measurements}
|
|
140
|
-
|
|
140
|
+
/>;
|
|
141
141
|
```
|
|
142
142
|
|
|
143
143
|
Charts are r4pm viewers. Colours come from the ambient `ViewerConfig` when a
|
|
@@ -149,7 +149,7 @@ clicks report a `ViewerTarget` to `onSelect`; and a chart inside a
|
|
|
149
149
|
<ViewerExportFrame filename="activities">
|
|
150
150
|
<OcelChart title="Events per activity" sql={events} />
|
|
151
151
|
<OcelChart title="Objects per type" sql={objects} series="type" stacked />
|
|
152
|
-
</ViewerExportFrame
|
|
152
|
+
</ViewerExportFrame>;
|
|
153
153
|
```
|
|
154
154
|
|
|
155
155
|
## About
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { useEventCounts } from "@ocelescope/api-base";
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { useColorOf } from "@r4pm/components";
|
|
7
|
+
// src/components/Pickers/ActivityPicker.tsx
|
|
8
|
+
/** The log's activities, by how many events each has. */
|
|
9
|
+
const ActivityPicker = ({ ocelId, ocelVersion = "filtered", viewId, ...picker }) => {
|
|
10
|
+
const id = useOcelId(ocelId);
|
|
11
|
+
const colorOf = useColorOf("activity");
|
|
12
|
+
const { data, isPending, error } = useEventCounts(id, {
|
|
13
|
+
ocel_version: ocelVersion,
|
|
14
|
+
view_id: viewId
|
|
15
|
+
}, { query: { enabled: id != null } });
|
|
16
|
+
const options = useMemo(() => Object.entries(data ?? {}).map(([name, count]) => ({
|
|
17
|
+
value: name,
|
|
18
|
+
label: name,
|
|
19
|
+
count,
|
|
20
|
+
color: colorOf(name)
|
|
21
|
+
})), [data, colorOf]);
|
|
22
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
23
|
+
options,
|
|
24
|
+
loading: isPending,
|
|
25
|
+
error,
|
|
26
|
+
placeholder: "Choose an activity…",
|
|
27
|
+
emptyText: "The log has no events",
|
|
28
|
+
...picker
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
export { ActivityPicker };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { t as __exportAll } from "./rolldown-runtime-
|
|
2
|
-
import {
|
|
3
|
-
import { n as traceCount, t as cartesian } from "./cartesian-
|
|
1
|
+
import { t as __exportAll } from "./rolldown-runtime-D8jQpDG7.js";
|
|
2
|
+
import { a as measureOf, n as Plot, r as axis, t as useChart } from "./useChart-BK4pjGal.js";
|
|
3
|
+
import { n as traceCount, t as cartesian } from "./cartesian-CtdS2iZb.js";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
|
|
5
|
+
// src/components/charts/AreaChart.tsx
|
|
6
6
|
var AreaChart_exports = /* @__PURE__ */ __exportAll({ AreaChart: () => AreaChart });
|
|
7
7
|
/** A line with the ground beneath it filled in, for totals over time. */
|
|
8
|
-
const AreaChart = ({ xRange, ...
|
|
8
|
+
const AreaChart = ({ xRange, ...given }) => {
|
|
9
|
+
const props = useChart(given);
|
|
9
10
|
const measure = measureOf(props.y);
|
|
10
11
|
return /* @__PURE__ */ jsx(Plot, {
|
|
11
12
|
traces: cartesian(props, {
|
|
@@ -32,5 +33,4 @@ const AreaChart = ({ xRange, ...props }) => {
|
|
|
32
33
|
}
|
|
33
34
|
});
|
|
34
35
|
};
|
|
35
|
-
//#endregion
|
|
36
36
|
export { AreaChart_exports as n, AreaChart as t };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { n as attributeOptions, t as attributeDefaults } from "./attributeOptions-COiWnKUS.js";
|
|
4
|
+
import { useE2o, useEventAttributes, useObjectAttributes } from "@ocelescope/api-base";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { useColorOf } from "@r4pm/components";
|
|
8
|
+
// src/components/Pickers/AttributePicker.tsx
|
|
9
|
+
const attributeId = (ref) => JSON.stringify(ref.target === "event" ? [
|
|
10
|
+
"event",
|
|
11
|
+
ref.activity,
|
|
12
|
+
ref.name
|
|
13
|
+
] : [
|
|
14
|
+
"object",
|
|
15
|
+
ref.objectType,
|
|
16
|
+
ref.name
|
|
17
|
+
]);
|
|
18
|
+
/**
|
|
19
|
+
* Attributes around an activity: those its events carry, and those of the
|
|
20
|
+
* object types its events relate to, grouped by where they come from.
|
|
21
|
+
*/
|
|
22
|
+
const AttributePicker = ({ activity, objectTypes, onlyUniquelyRelated = false, valueTypes, ocelId, ocelVersion = "filtered", ...picker }) => {
|
|
23
|
+
const id = useOcelId(ocelId);
|
|
24
|
+
const activityColor = useColorOf("activity");
|
|
25
|
+
const objectTypeColor = useColorOf("objectType");
|
|
26
|
+
const enabled = id != null && activity !== void 0;
|
|
27
|
+
const events = useEventAttributes(id, {
|
|
28
|
+
ocel_version: ocelVersion,
|
|
29
|
+
names: activity ? [activity] : []
|
|
30
|
+
}, { query: { enabled } });
|
|
31
|
+
const relations = useE2o(id, {
|
|
32
|
+
source_types: activity ? [activity] : [],
|
|
33
|
+
ocel_version: ocelVersion,
|
|
34
|
+
page_size: 1e3
|
|
35
|
+
}, { query: { enabled } });
|
|
36
|
+
const relatedTypes = useMemo(() => {
|
|
37
|
+
const rows = (relations.data?.response ?? []).filter((row) => row.source === activity);
|
|
38
|
+
const isUnique = (type) => {
|
|
39
|
+
const [row, ...rest] = rows.filter((r) => r.target === type);
|
|
40
|
+
return row !== void 0 && rest.length === 0 && row.min_count === 1 && row.max_count === 1;
|
|
41
|
+
};
|
|
42
|
+
return [...new Set(rows.map((row) => row.target))].filter((type) => !objectTypes || objectTypes.includes(type)).filter((type) => !onlyUniquelyRelated || isUnique(type));
|
|
43
|
+
}, [
|
|
44
|
+
relations.data,
|
|
45
|
+
activity,
|
|
46
|
+
objectTypes,
|
|
47
|
+
onlyUniquelyRelated
|
|
48
|
+
]);
|
|
49
|
+
const objects = useObjectAttributes(id, {
|
|
50
|
+
ocel_version: ocelVersion,
|
|
51
|
+
names: relatedTypes
|
|
52
|
+
}, { query: { enabled: enabled && relatedTypes.length > 0 } });
|
|
53
|
+
const options = useMemo(() => {
|
|
54
|
+
if (activity === void 0) return [];
|
|
55
|
+
return [...attributeOptions(events.data, valueTypes, (name) => ({
|
|
56
|
+
target: "event",
|
|
57
|
+
activity,
|
|
58
|
+
name
|
|
59
|
+
}), {
|
|
60
|
+
label: activity,
|
|
61
|
+
color: activityColor(activity),
|
|
62
|
+
caption: "event attributes"
|
|
63
|
+
}), ...relatedTypes.flatMap((objectType) => attributeOptions(objects.data?.filter((a) => a.entity_type === objectType), valueTypes, (name) => ({
|
|
64
|
+
target: "object",
|
|
65
|
+
objectType,
|
|
66
|
+
name
|
|
67
|
+
}), {
|
|
68
|
+
label: objectType,
|
|
69
|
+
color: objectTypeColor(objectType),
|
|
70
|
+
caption: "object attributes"
|
|
71
|
+
}))];
|
|
72
|
+
}, [
|
|
73
|
+
activity,
|
|
74
|
+
events.data,
|
|
75
|
+
objects.data,
|
|
76
|
+
relatedTypes,
|
|
77
|
+
valueTypes,
|
|
78
|
+
activityColor,
|
|
79
|
+
objectTypeColor
|
|
80
|
+
]);
|
|
81
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
82
|
+
options,
|
|
83
|
+
idOf: attributeId,
|
|
84
|
+
labelOf: (ref) => ref.name,
|
|
85
|
+
loading: events.isPending || relations.isPending || relatedTypes.length > 0 && objects.isPending,
|
|
86
|
+
error: events.error ?? relations.error ?? objects.error,
|
|
87
|
+
missing: activity === void 0 ? "Choose an activity first" : void 0,
|
|
88
|
+
placeholder: "Choose an attribute…",
|
|
89
|
+
emptyText: "No attributes to choose from",
|
|
90
|
+
...attributeDefaults,
|
|
91
|
+
...picker
|
|
92
|
+
});
|
|
93
|
+
};
|
|
94
|
+
export { AttributePicker };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { t as __exportAll } from "./rolldown-runtime-
|
|
2
|
-
import {
|
|
3
|
-
import { n as traceCount, t as cartesian } from "./cartesian-
|
|
1
|
+
import { t as __exportAll } from "./rolldown-runtime-D8jQpDG7.js";
|
|
2
|
+
import { a as measureOf, n as Plot, r as axis, t as useChart } from "./useChart-BK4pjGal.js";
|
|
3
|
+
import { n as traceCount, t as cartesian } from "./cartesian-CtdS2iZb.js";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
|
|
5
|
+
// src/components/charts/BarChart.tsx
|
|
6
6
|
var BarChart_exports = /* @__PURE__ */ __exportAll({ BarChart: () => BarChart });
|
|
7
7
|
/** Counts as bars, one per category. */
|
|
8
|
-
const BarChart = ({ stacked = false, horizontal = false, xRange, ...
|
|
8
|
+
const BarChart = ({ stacked = false, horizontal = false, xRange, ...given }) => {
|
|
9
|
+
const props = useChart(given);
|
|
9
10
|
const measure = measureOf(props.y);
|
|
10
11
|
const count = props.rows.length;
|
|
11
12
|
const traces = cartesian(props, {
|
|
@@ -65,5 +66,4 @@ const withStackShare = (traces, horizontal, measure) => {
|
|
|
65
66
|
};
|
|
66
67
|
});
|
|
67
68
|
};
|
|
68
|
-
//#endregion
|
|
69
69
|
export { BarChart_exports as n, BarChart as t };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { n as relationLabel, r as relationOptions, t as relationId } from "./relationOptions-hEEsEQrx.js";
|
|
4
|
+
import { useE2o } from "@ocelescope/api-base";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { useColorOf } from "@r4pm/components";
|
|
8
|
+
// src/components/Pickers/E2ORelationPicker.tsx
|
|
9
|
+
/**
|
|
10
|
+
* How events relate to objects: one choice per object type and qualifier,
|
|
11
|
+
* with how many objects an event relates to.
|
|
12
|
+
*/
|
|
13
|
+
const E2ORelationPicker = ({ activity, ocelId, ocelVersion = "filtered", ...picker }) => {
|
|
14
|
+
const id = useOcelId(ocelId);
|
|
15
|
+
const activityColor = useColorOf("activity");
|
|
16
|
+
const objectTypeColor = useColorOf("objectType");
|
|
17
|
+
const { data, isPending, error } = useE2o(id, {
|
|
18
|
+
...activity ? { source_types: [activity] } : {},
|
|
19
|
+
ocel_version: ocelVersion,
|
|
20
|
+
page_size: 1e3
|
|
21
|
+
}, { query: { enabled: id != null } });
|
|
22
|
+
const options = useMemo(() => relationOptions({
|
|
23
|
+
rows: data?.response ?? [],
|
|
24
|
+
source: activity,
|
|
25
|
+
unit: "event",
|
|
26
|
+
sourceColor: activityColor,
|
|
27
|
+
targetColor: objectTypeColor
|
|
28
|
+
}), [
|
|
29
|
+
data,
|
|
30
|
+
activity,
|
|
31
|
+
activityColor,
|
|
32
|
+
objectTypeColor
|
|
33
|
+
]);
|
|
34
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
35
|
+
options,
|
|
36
|
+
idOf: relationId,
|
|
37
|
+
labelOf: relationLabel,
|
|
38
|
+
loading: isPending,
|
|
39
|
+
error,
|
|
40
|
+
placeholder: "Choose a relation…",
|
|
41
|
+
emptyText: activity ? "Events of this type relate to no objects" : "Events relate to no objects",
|
|
42
|
+
...picker
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
export { E2ORelationPicker };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { n as attributeOptions, t as attributeDefaults } from "./attributeOptions-COiWnKUS.js";
|
|
4
|
+
import { useEventAttributes } from "@ocelescope/api-base";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
// src/components/Pickers/EventAttributePicker.tsx
|
|
8
|
+
/** The attributes events carry, by name. */
|
|
9
|
+
const EventAttributePicker = ({ activity, valueTypes, ocelId, ocelVersion = "filtered", ...picker }) => {
|
|
10
|
+
const id = useOcelId(ocelId);
|
|
11
|
+
const { data, isPending, error } = useEventAttributes(id, {
|
|
12
|
+
ocel_version: ocelVersion,
|
|
13
|
+
...activity ? { names: [activity] } : {}
|
|
14
|
+
}, { query: { enabled: id != null } });
|
|
15
|
+
const options = useMemo(() => attributeOptions(data, valueTypes, (name) => name), [data, valueTypes]);
|
|
16
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
17
|
+
options,
|
|
18
|
+
loading: isPending,
|
|
19
|
+
error,
|
|
20
|
+
placeholder: "Choose an event attribute…",
|
|
21
|
+
emptyText: activity ? "Events of this type carry no attributes" : "Events carry no attributes",
|
|
22
|
+
...attributeDefaults,
|
|
23
|
+
...picker
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
export { EventAttributePicker };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { t as useSearch } from "./useSearch-CdXjjv-a.js";
|
|
4
|
+
import { useEventCounts, useEventIds } from "@ocelescope/api-base";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
// src/components/Pickers/EventPicker.tsx
|
|
8
|
+
/** Events of the log, found by typing part of an id. */
|
|
9
|
+
const EventPicker = ({ ocelId, ocelVersion = "filtered", limit = 50, ...picker }) => {
|
|
10
|
+
const id = useOcelId(ocelId);
|
|
11
|
+
const { search, setSearch, debounced } = useSearch();
|
|
12
|
+
const { data, isFetching, error } = useEventIds(id, {
|
|
13
|
+
search: debounced,
|
|
14
|
+
size: limit,
|
|
15
|
+
ocel_version: ocelVersion
|
|
16
|
+
}, { query: { enabled: id != null } });
|
|
17
|
+
const counts = useEventCounts(id, { ocel_version: ocelVersion }, { query: { enabled: id != null } });
|
|
18
|
+
const total = useMemo(() => Object.values(counts.data ?? {}).reduce((sum, n) => sum + n, 0), [counts.data]);
|
|
19
|
+
const options = useMemo(() => (data?.response ?? []).map((eventId) => ({
|
|
20
|
+
value: eventId,
|
|
21
|
+
label: eventId
|
|
22
|
+
})), [data]);
|
|
23
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
24
|
+
options,
|
|
25
|
+
search,
|
|
26
|
+
onSearch: setSearch,
|
|
27
|
+
total: counts.data ? total : void 0,
|
|
28
|
+
loading: isFetching,
|
|
29
|
+
error,
|
|
30
|
+
placeholder: "Search for an event…",
|
|
31
|
+
emptyText: "No event matches",
|
|
32
|
+
sort: "name",
|
|
33
|
+
counts: false,
|
|
34
|
+
bars: false,
|
|
35
|
+
...picker
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
export { EventPicker };
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { t as __exportAll } from "./rolldown-runtime-D8jQpDG7.js";
|
|
2
|
+
import { a as measureOf, n as Plot, r as axis, t as useChart } from "./useChart-BK4pjGal.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { useViewerConfig } from "@r4pm/components";
|
|
5
|
+
// src/components/charts/HistogramChart.tsx
|
|
6
|
+
var HistogramChart_exports = /* @__PURE__ */ __exportAll({ HistogramChart: () => HistogramChart });
|
|
7
|
+
/**
|
|
8
|
+
* A distribution as bins along a numeric axis.
|
|
9
|
+
*
|
|
10
|
+
* The rows are the bins, already counted: a histogram of a whole log is
|
|
11
|
+
* computed where the log is, not from every value sent to the browser. Bars
|
|
12
|
+
* touch and are as wide as their bin, so unequal bins and gaps where nothing
|
|
13
|
+
* fell read as what they are.
|
|
14
|
+
*/
|
|
15
|
+
const HistogramChart = ({ xEnd, ...given }) => {
|
|
16
|
+
const props = useChart(given);
|
|
17
|
+
const { format } = useViewerConfig({});
|
|
18
|
+
const measure = measureOf(props.y);
|
|
19
|
+
const number = format?.number ?? defaultNumber;
|
|
20
|
+
const bins = props.rows.map((row) => ({
|
|
21
|
+
from: edge(row[props.x]),
|
|
22
|
+
to: edge(row[xEnd]),
|
|
23
|
+
count: Number(row[measure] ?? 0)
|
|
24
|
+
}));
|
|
25
|
+
const typical = median(bins.flatMap((bin) => bin.from !== void 0 && bin.to !== void 0 ? [bin.to - bin.from] : []));
|
|
26
|
+
const bars = bins.flatMap(({ from, to, count }) => {
|
|
27
|
+
if (from === void 0 && to === void 0) return [];
|
|
28
|
+
let start = from ?? to - typical;
|
|
29
|
+
let end = to ?? from + typical;
|
|
30
|
+
if (end === start) {
|
|
31
|
+
start -= typical / 2;
|
|
32
|
+
end += typical / 2;
|
|
33
|
+
}
|
|
34
|
+
return [{
|
|
35
|
+
center: (start + end) / 2,
|
|
36
|
+
width: end - start,
|
|
37
|
+
count,
|
|
38
|
+
open: from === void 0 || to === void 0,
|
|
39
|
+
label: from === void 0 ? `< ${number(to)}` : to === void 0 ? `> ${number(from)}` : from === to ? number(from) : `${number(from)} – ${number(to)}`
|
|
40
|
+
}];
|
|
41
|
+
});
|
|
42
|
+
const color = props.colorOf?.(props.x);
|
|
43
|
+
return /* @__PURE__ */ jsx(Plot, {
|
|
44
|
+
traces: [{
|
|
45
|
+
type: "bar",
|
|
46
|
+
x: bars.map((bar) => bar.center),
|
|
47
|
+
y: bars.map((bar) => bar.count),
|
|
48
|
+
width: bars.map((bar) => bar.width),
|
|
49
|
+
customdata: bars.map((bar) => bar.label),
|
|
50
|
+
hovertemplate: `<b>%{customdata}</b><br>${measure}: %{y}<extra></extra>`,
|
|
51
|
+
marker: {
|
|
52
|
+
...color && { color },
|
|
53
|
+
line: {
|
|
54
|
+
color: "rgba(128,128,128,0.45)",
|
|
55
|
+
width: 1
|
|
56
|
+
},
|
|
57
|
+
pattern: {
|
|
58
|
+
shape: bars.map((bar) => bar.open ? "/" : ""),
|
|
59
|
+
fillmode: "overlay"
|
|
60
|
+
},
|
|
61
|
+
opacity: bars.map((bar) => bar.open ? .55 : 1)
|
|
62
|
+
}
|
|
63
|
+
}],
|
|
64
|
+
readName: (point) => String(point.x ?? ""),
|
|
65
|
+
onSelect: props.onSelect,
|
|
66
|
+
layout: {
|
|
67
|
+
bargap: 0,
|
|
68
|
+
hovermode: "closest",
|
|
69
|
+
xaxis: axis(props.x),
|
|
70
|
+
yaxis: axis(measure)
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
/** A bin edge: a number, or nothing where the bin is open-ended. */
|
|
75
|
+
const edge = (value) => {
|
|
76
|
+
if (value == null || value === "") return void 0;
|
|
77
|
+
const number = Number(value);
|
|
78
|
+
return Number.isFinite(number) ? number : void 0;
|
|
79
|
+
};
|
|
80
|
+
/** The middle width, or 1 where no bin has one to go by. */
|
|
81
|
+
const median = (values) => {
|
|
82
|
+
const sorted = values.filter((value) => value > 0).sort((a, b) => a - b);
|
|
83
|
+
return sorted[Math.floor(sorted.length / 2)] ?? 1;
|
|
84
|
+
};
|
|
85
|
+
const defaultNumber = (value) => new Intl.NumberFormat(void 0, { maximumSignificantDigits: 4 }).format(value);
|
|
86
|
+
export { HistogramChart_exports as n, HistogramChart as t };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { t as __exportAll } from "./rolldown-runtime-
|
|
2
|
-
import {
|
|
3
|
-
import { n as toSeries, t as paint } from "./series-
|
|
1
|
+
import { t as __exportAll } from "./rolldown-runtime-D8jQpDG7.js";
|
|
2
|
+
import { a as measureOf, n as Plot, r as axis, t as useChart } from "./useChart-BK4pjGal.js";
|
|
3
|
+
import { n as toSeries, t as paint } from "./series-Bx0HVnSy.js";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
|
|
5
|
+
// src/components/charts/LineChart.tsx
|
|
6
6
|
var LineChart_exports = /* @__PURE__ */ __exportAll({ LineChart: () => LineChart });
|
|
7
7
|
/** Lines through ordered values, optionally with one scale per line. */
|
|
8
|
-
const LineChart = ({ step = false, yAxes = "shared", xRange, ...
|
|
8
|
+
const LineChart = ({ step = false, yAxes = "shared", xRange, ...given }) => {
|
|
9
|
+
const props = useChart(given);
|
|
9
10
|
const groups = toSeries(props);
|
|
10
11
|
const independent = yAxes === "independent" && groups.length > 1;
|
|
11
12
|
const colors = groups.map((group) => {
|
|
@@ -60,5 +61,4 @@ const LineChart = ({ step = false, yAxes = "shared", xRange, ...props }) => {
|
|
|
60
61
|
}
|
|
61
62
|
});
|
|
62
63
|
};
|
|
63
|
-
//#endregion
|
|
64
64
|
export { LineChart_exports as n, LineChart as t };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { n as relationLabel, r as relationOptions, t as relationId } from "./relationOptions-hEEsEQrx.js";
|
|
4
|
+
import { useO2o } from "@ocelescope/api-base";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
import { useColorOf } from "@r4pm/components";
|
|
8
|
+
// src/components/Pickers/O2ORelationPicker.tsx
|
|
9
|
+
/**
|
|
10
|
+
* How objects relate to objects: one choice per object type and qualifier,
|
|
11
|
+
* with how many objects an object relates to.
|
|
12
|
+
*/
|
|
13
|
+
const O2ORelationPicker = ({ objectType, ocelId, ocelVersion = "filtered", ...picker }) => {
|
|
14
|
+
const id = useOcelId(ocelId);
|
|
15
|
+
const objectTypeColor = useColorOf("objectType");
|
|
16
|
+
const { data, isPending, error } = useO2o(id, {
|
|
17
|
+
...objectType ? { source_types: [objectType] } : {},
|
|
18
|
+
ocel_version: ocelVersion,
|
|
19
|
+
page_size: 1e3
|
|
20
|
+
}, { query: { enabled: id != null } });
|
|
21
|
+
const options = useMemo(() => relationOptions({
|
|
22
|
+
rows: data?.response ?? [],
|
|
23
|
+
source: objectType,
|
|
24
|
+
unit: "object",
|
|
25
|
+
sourceColor: objectTypeColor,
|
|
26
|
+
targetColor: objectTypeColor
|
|
27
|
+
}), [
|
|
28
|
+
data,
|
|
29
|
+
objectType,
|
|
30
|
+
objectTypeColor
|
|
31
|
+
]);
|
|
32
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
33
|
+
options,
|
|
34
|
+
idOf: relationId,
|
|
35
|
+
labelOf: relationLabel,
|
|
36
|
+
loading: isPending,
|
|
37
|
+
error,
|
|
38
|
+
placeholder: "Choose a relation…",
|
|
39
|
+
emptyText: objectType ? "Objects of this type relate to no objects" : "Objects relate to no objects",
|
|
40
|
+
...picker
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
export { O2ORelationPicker };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { n as attributeOptions, t as attributeDefaults } from "./attributeOptions-COiWnKUS.js";
|
|
4
|
+
import { useObjectAttributes } from "@ocelescope/api-base";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
// src/components/Pickers/ObjectAttributePicker.tsx
|
|
8
|
+
/** The attributes objects carry, by name. */
|
|
9
|
+
const ObjectAttributePicker = ({ objectType, valueTypes, ocelId, ocelVersion = "filtered", ...picker }) => {
|
|
10
|
+
const id = useOcelId(ocelId);
|
|
11
|
+
const { data, isPending, error } = useObjectAttributes(id, {
|
|
12
|
+
ocel_version: ocelVersion,
|
|
13
|
+
...objectType ? { names: [objectType] } : {}
|
|
14
|
+
}, { query: { enabled: id != null } });
|
|
15
|
+
const options = useMemo(() => attributeOptions(data, valueTypes, (name) => name), [data, valueTypes]);
|
|
16
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
17
|
+
options,
|
|
18
|
+
loading: isPending,
|
|
19
|
+
error,
|
|
20
|
+
placeholder: "Choose an object attribute…",
|
|
21
|
+
emptyText: objectType ? "Objects of this type carry no attributes" : "Objects carry no attributes",
|
|
22
|
+
...attributeDefaults,
|
|
23
|
+
...picker
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
export { ObjectAttributePicker };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { t as useSearch } from "./useSearch-CdXjjv-a.js";
|
|
4
|
+
import { useObjectCounts, useObjectIds } from "@ocelescope/api-base";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
// src/components/Pickers/ObjectPicker.tsx
|
|
8
|
+
/** Objects of the log, found by typing part of an id. */
|
|
9
|
+
const ObjectPicker = ({ ocelId, ocelVersion = "filtered", limit = 50, ...picker }) => {
|
|
10
|
+
const id = useOcelId(ocelId);
|
|
11
|
+
const { search, setSearch, debounced } = useSearch();
|
|
12
|
+
const { data, isFetching, error } = useObjectIds(id, {
|
|
13
|
+
search: debounced,
|
|
14
|
+
size: limit,
|
|
15
|
+
ocel_version: ocelVersion
|
|
16
|
+
}, { query: { enabled: id != null } });
|
|
17
|
+
const counts = useObjectCounts(id, { ocel_version: ocelVersion }, { query: { enabled: id != null } });
|
|
18
|
+
const total = useMemo(() => Object.values(counts.data ?? {}).reduce((sum, n) => sum + n, 0), [counts.data]);
|
|
19
|
+
const options = useMemo(() => (data?.response ?? []).map((objectId) => ({
|
|
20
|
+
value: objectId,
|
|
21
|
+
label: objectId
|
|
22
|
+
})), [data]);
|
|
23
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
24
|
+
options,
|
|
25
|
+
search,
|
|
26
|
+
onSearch: setSearch,
|
|
27
|
+
total: counts.data ? total : void 0,
|
|
28
|
+
loading: isFetching,
|
|
29
|
+
error,
|
|
30
|
+
placeholder: "Search for an object…",
|
|
31
|
+
emptyText: "No object matches",
|
|
32
|
+
sort: "name",
|
|
33
|
+
counts: false,
|
|
34
|
+
bars: false,
|
|
35
|
+
...picker
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
export { ObjectPicker };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { t as useOcelId } from "./useOcelId-BEC6_yRa.js";
|
|
2
|
+
import { OptionPicker } from "./OptionPicker-DQ-WYFQZ.js";
|
|
3
|
+
import { useE2o, useObjectCounts } from "@ocelescope/api-base";
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { useColorOf } from "@r4pm/components";
|
|
7
|
+
// src/components/Pickers/ObjectTypePicker.tsx
|
|
8
|
+
/** The log's object types, by how many objects each has. */
|
|
9
|
+
const ObjectTypePicker = ({ activity, ocelId, ocelVersion = "filtered", viewId, ...picker }) => {
|
|
10
|
+
const id = useOcelId(ocelId);
|
|
11
|
+
const colorOf = useColorOf("objectType");
|
|
12
|
+
const { data, isPending, error } = useObjectCounts(id, {
|
|
13
|
+
ocel_version: ocelVersion,
|
|
14
|
+
view_id: viewId
|
|
15
|
+
}, { query: { enabled: id != null } });
|
|
16
|
+
const relations = useE2o(id, {
|
|
17
|
+
source_types: activity ? [activity] : [],
|
|
18
|
+
ocel_version: ocelVersion,
|
|
19
|
+
view_id: viewId,
|
|
20
|
+
page_size: 1e3
|
|
21
|
+
}, { query: { enabled: id != null && activity !== void 0 } });
|
|
22
|
+
const options = useMemo(() => {
|
|
23
|
+
const related = activity === void 0 ? void 0 : new Set((relations.data?.response ?? []).filter((row) => row.source === activity).map((row) => row.target));
|
|
24
|
+
return Object.entries(data ?? {}).filter(([name]) => !related || related.has(name)).map(([name, count]) => ({
|
|
25
|
+
value: name,
|
|
26
|
+
label: name,
|
|
27
|
+
count,
|
|
28
|
+
color: colorOf(name)
|
|
29
|
+
}));
|
|
30
|
+
}, [
|
|
31
|
+
data,
|
|
32
|
+
colorOf,
|
|
33
|
+
activity,
|
|
34
|
+
relations.data
|
|
35
|
+
]);
|
|
36
|
+
return /* @__PURE__ */ jsx(OptionPicker, {
|
|
37
|
+
options,
|
|
38
|
+
loading: isPending || activity !== void 0 && relations.isPending,
|
|
39
|
+
error: error ?? relations.error,
|
|
40
|
+
placeholder: "Choose an object type…",
|
|
41
|
+
emptyText: "The log has no objects",
|
|
42
|
+
...picker
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
export { ObjectTypePicker };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { t as useOcelQuery } from "./useOcelQuery-
|
|
2
|
-
import { SqlChart } from "./SqlChart-
|
|
1
|
+
import { t as useOcelQuery } from "./useOcelQuery-6vtgZNzz.js";
|
|
2
|
+
import { SqlChart } from "./SqlChart-cxKpWkyh.js";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { AsyncBoundary, EmptyState } from "@r4pm/components";
|
|
5
|
-
|
|
5
|
+
// src/components/charts/OcelChart.tsx
|
|
6
6
|
/**
|
|
7
7
|
* A chart of the current OCEL: give it SQL, get a chart.
|
|
8
8
|
*
|
|
@@ -37,5 +37,4 @@ const OcelChart = ({ sql, parameters, ocelVersion = "filtered", enabled = true,
|
|
|
37
37
|
})
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
|
-
//#endregion
|
|
41
40
|
export { OcelChart };
|