@ocelescope/variants 0.7.0 → 0.9.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.
Files changed (2) hide show
  1. package/dist/index.js +76 -24
  2. package/package.json +16 -15
package/dist/index.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { defineModule, defineModuleRoute, useCurrentOcel, useDownloadVariantFlatLog } from "@ocelescope/core";
2
- import { DownloadIcon, WaypointsIcon } from "lucide-react";
3
- import "@r4pm/components/styles.css";
4
- import { Box, Button, LoadingOverlay, Tabs } from "@mantine/core";
2
+ import { DownloadIcon, SearchIcon, WaypointsIcon } from "lucide-react";
3
+ import { ActionIcon, Autocomplete, Box, Button, Group, LoadingOverlay, Popover, Scroller, Tabs } from "@mantine/core";
4
+ import { useDisclosure } from "@mantine/hooks";
5
5
  import { useObjectTypes, useObjectVariants } from "@ocelescope/api-base";
6
- import { LogVariants, Theme } from "@r4pm/components";
7
- import { useMemo, useState } from "react";
6
+ import dynamic from "next/dynamic.js";
7
+ import { useEffect, useMemo, useState } from "react";
8
8
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
9
  //#region src/pages/variants.tsx
10
+ const LogVariants = dynamic(() => import("@r4pm/components").then((m) => m.LogVariants), { ssr: false });
10
11
  const ObjectTypeVariants = ({ ocelId, objectType }) => {
11
12
  const { data, isPending } = useObjectVariants(ocelId, { object_type: objectType });
12
13
  const { download } = useDownloadVariantFlatLog();
@@ -32,7 +33,7 @@ const ObjectTypeVariants = ({ ocelId, objectType }) => {
32
33
  };
33
34
  return /* @__PURE__ */ jsxs(Box, {
34
35
  pos: "relative",
35
- mih: 200,
36
+ h: "100%",
36
37
  children: [/* @__PURE__ */ jsx(LoadingOverlay, { visible: isPending || !data || !variants }), data && variants && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LogVariants, {
37
38
  variants,
38
39
  numEvents: data.event_count,
@@ -61,18 +62,68 @@ const ObjectTypeVariants = ({ ocelId, objectType }) => {
61
62
  const VariantsPage = () => {
62
63
  const { id } = useCurrentOcel();
63
64
  const { data: objectTypes } = useObjectTypes(id, void 0, { query: { enabled: !!id } });
64
- if (!id || !objectTypes) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
65
- const [firstObjectType, ...otherObjectTypes] = objectTypes;
66
- if (!firstObjectType) return null;
67
- return /* @__PURE__ */ jsx(Theme, { children: otherObjectTypes.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
68
- defaultValue: firstObjectType,
65
+ const [activeTab, setActiveTab] = useState(null);
66
+ const [searchOpened, { close: closeSearch, toggle: toggleSearch }] = useDisclosure(false);
67
+ useEffect(() => {
68
+ if (objectTypes && (!activeTab || !objectTypes?.includes(activeTab))) setActiveTab(objectTypes?.[0] ?? null);
69
+ }, [
70
+ id,
71
+ objectTypes,
72
+ activeTab
73
+ ]);
74
+ if (!activeTab || !objectTypes || !id) return /* @__PURE__ */ jsx(LoadingOverlay, { visible: true });
75
+ return objectTypes.length > 0 ? /* @__PURE__ */ jsxs(Tabs, {
69
76
  keepMounted: false,
70
- children: [/* @__PURE__ */ jsx(Tabs.List, { children: objectTypes.map((objectType) => /* @__PURE__ */ jsx(Tabs.Tab, {
77
+ h: "100%",
78
+ style: {
79
+ display: "flex",
80
+ flexDirection: "column"
81
+ },
82
+ value: activeTab,
83
+ onChange: setActiveTab,
84
+ children: [/* @__PURE__ */ jsxs(Group, {
85
+ wrap: "nowrap",
86
+ gap: "0",
87
+ style: { flexShrink: 0 },
88
+ children: [/* @__PURE__ */ jsxs(Popover, {
89
+ width: 300,
90
+ position: "bottom-start",
91
+ withArrow: true,
92
+ shadow: "md",
93
+ opened: searchOpened,
94
+ onChange: closeSearch,
95
+ trapFocus: true,
96
+ returnFocus: true,
97
+ children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
98
+ size: "lg",
99
+ h: "100%",
100
+ onClick: toggleSearch,
101
+ "aria-label": "Search object types",
102
+ bdrs: 0,
103
+ children: /* @__PURE__ */ jsx(SearchIcon, { size: 16 })
104
+ }) }), /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsx(Autocomplete, {
105
+ data: objectTypes,
106
+ "aria-label": "Object type",
107
+ placeholder: "Search object types",
108
+ selectFirstOptionOnChange: true,
109
+ comboboxProps: { withinPortal: false },
110
+ onOptionSubmit: (value) => {
111
+ setActiveTab(value);
112
+ closeSearch();
113
+ }
114
+ }) })]
115
+ }), /* @__PURE__ */ jsx(Tabs.List, {
116
+ flex: 1,
117
+ miw: 0,
118
+ children: /* @__PURE__ */ jsx(Scroller, { children: objectTypes.map((objectType) => /* @__PURE__ */ jsx(Tabs.Tab, {
119
+ value: objectType,
120
+ children: objectType
121
+ }, objectType)) })
122
+ })]
123
+ }), objectTypes.map((objectType) => /* @__PURE__ */ jsx(Tabs.Panel, {
71
124
  value: objectType,
72
- children: objectType
73
- }, objectType)) }), objectTypes.map((objectType) => /* @__PURE__ */ jsx(Tabs.Panel, {
74
- value: objectType,
75
- pt: "md",
125
+ flex: 1,
126
+ mih: 0,
76
127
  children: /* @__PURE__ */ jsx(ObjectTypeVariants, {
77
128
  ocelId: id,
78
129
  objectType
@@ -80,9 +131,15 @@ const VariantsPage = () => {
80
131
  }, objectType))]
81
132
  }) : /* @__PURE__ */ jsx(ObjectTypeVariants, {
82
133
  ocelId: id,
83
- objectType: firstObjectType
84
- }) });
134
+ objectType: activeTab
135
+ });
85
136
  };
137
+ var variants_default = defineModuleRoute({
138
+ component: VariantsPage,
139
+ label: "Variants",
140
+ name: "variants",
141
+ requiresOcel: true
142
+ });
86
143
  //#endregion
87
144
  //#region src/index.ts
88
145
  var src_default = defineModule({
@@ -90,12 +147,7 @@ var src_default = defineModule({
90
147
  description: "Explore object trace variants and their per-variant event and case counts.",
91
148
  label: "Variants",
92
149
  authors: [{ name: "Öztürk, Görkem-Emre" }],
93
- routes: [defineModuleRoute({
94
- component: VariantsPage,
95
- label: "Variants",
96
- name: "variants",
97
- requiresOcel: true
98
- })],
150
+ routes: [variants_default],
99
151
  icon: WaypointsIcon
100
152
  });
101
153
  //#endregion
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ocelescope/variants",
3
3
  "type": "module",
4
- "version": "0.7.0",
4
+ "version": "0.9.0",
5
5
  "description": "Ocelescope module for exploring object trace variants: the distinct activity sequences objects of each type follow, with per-variant event and case counts.",
6
6
  "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
7
7
  "license": "MIT",
@@ -28,28 +28,29 @@
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@mantine/core": "^9.5.1",
31
+ "@mantine/hooks": "^9.5.1",
31
32
  "@marko19907/string-to-color": "*",
33
+ "@ocelescope/api-base": "^0.9.0",
34
+ "@ocelescope/core": "^0.9.0",
35
+ "@ocelescope/resources": "^0.9.0",
32
36
  "@tanstack/react-query": "^5.90.21",
33
- "dayjs": "^1.11.19",
37
+ "dayjs": "^1.11.23",
34
38
  "lucide-react": "^1.0.0",
35
39
  "mantine-datatable": "^9.4.0",
36
- "react": "^19.2.8",
37
- "react-dom": "^19.2.8",
38
- "@ocelescope/api-base": "^0.7.0",
39
- "@ocelescope/core": "^0.7.0",
40
- "@ocelescope/resources": "^0.7.0"
40
+ "next": "16.3.6",
41
+ "react": "^19.3.0",
42
+ "react-dom": "^19.3.0",
43
+ "@r4pm/components": "^0.3.2"
41
44
  },
42
45
  "devDependencies": {
43
- "@tsdown/css": "^0.22.14",
44
- "@types/node": "^26.2.0",
45
- "@types/react": "^19.2.18",
46
- "@types/react-dom": "^19.2.4",
47
- "tsdown": "^0.22.14",
46
+ "@tsdown/css": "^0.23.0",
47
+ "@types/node": "^26.6.1",
48
+ "@types/react": "^19.3.0",
49
+ "@types/react-dom": "^19.3.0",
50
+ "tsdown": "^0.23.0",
48
51
  "typescript": "^6.0.3"
49
52
  },
50
- "dependencies": {
51
- "@r4pm/components": "^0.2.0"
52
- },
53
+ "dependencies": {},
53
54
  "scripts": {
54
55
  "build": "tsdown",
55
56
  "dev": "tsdown --watch ./src",