Commit 06b4add6 authored by Lennart Holzenkamp's avatar Lennart Holzenkamp
Browse files

UX improvements

parent ca50a23d
......@@ -48,6 +48,8 @@ const state = reactive<{
};
cluster_count_limit: number;
cluster_count_val_arr: Array<number>;
clustering_loading: boolean;
object_properties_loading: boolean;
}>({
object_type: {
values: Array<API_Object_Type>(0),
......@@ -80,6 +82,8 @@ const state = reactive<{
},
cluster_count_limit: 2,
cluster_count_val_arr: Array<number>(2),
clustering_loading: false,
object_properties_loading: false,
});
async function load_object_types() {
......@@ -115,11 +119,13 @@ async function load_attributes(object_type: string) {
weights[CFLOW_COL_NAME] = 1.0;
console.log(weights);
state.attributes.weights = weights;
state.attributes.loading = false;
}
}
async function load_instance_count(object_type: string) {
if (object_type != null && props.ocel_file != null) {
state.object_properties_loading = true;
const response = await api_call(
"/ocel-cluster/" +
props.ocel_file.id +
......@@ -133,8 +139,16 @@ async function load_instance_count(object_type: string) {
await response.json()
).data.attributes.count;
refresh_max_cluster_limit();
refresh_cluster_count_val_arr();
await Promise.all([
refresh_max_cluster_limit(),
refresh_cluster_count_val_arr(),
]);
let tmp_max_cluster_count = Math.floor(
Math.log2(state.object_type.instance_count)
);
if (tmp_max_cluster_count < 2) tmp_max_cluster_count = 2;
state.max_cluster_count.selected = tmp_max_cluster_count
state.object_properties_loading = false;
}
}
......@@ -154,11 +168,14 @@ function create_clustering_param_body(): JSON {
async function apply_clustering() {
if (props.ocel_file != null && state.object_type.selected != null) {
/* const response = */ await api_call(
state.clustering_loading = true;
const response = await api_call(
"/ocel-cluster/" + props.ocel_file?.id,
"POST",
create_clustering_param_body()
);
console.log(response);
state.clustering_loading = false;
}
}
......@@ -218,8 +235,8 @@ watch(
<template>
<div class="row">
<h5>Define parameters</h5>
<div class="col-12 mb-2">
<h5>Algorithm parmeters</h5>
<div class="col-12 col-md-6 mb-2">
<div class="form-floating">
<select
class="form-select"
......@@ -238,93 +255,146 @@ watch(
</select>
<label for="object-type-selector">Object Type</label>
</div>
<p v-if="!state.object_type.loading" class="mb-0">
<template v-if="state.object_properties_loading">
<p class="fst-italic">
Loading details for object-type
<span class="fw-bold">{{ state.object_type.selected }}</span
>...
</p>
</template>
<template v-else>
<span class="fw-bold">{{ state.object_type.instance_count }}</span>
instances of object-type
<span class="fw-bold">{{ state.object_type.selected }}</span> found.
</template>
</p>
</div>
<div class="col-12 mb-2">
<div class="form-floating">
<select
class="form-select"
id="mode-selector"
aria-label="mode-selection"
v-model="state.mode.selected"
>
<option v-for="mode of state.mode.values" :key="mode" :value="mode">
{{ mode }}
</option>
</select>
<label for="mode-selector">Mode</label>
</div>
</div>
<template v-if="state.object_type.loading">
<div class="col-12">Object types loading...</div>
</template>
<div class="col-12">
<h6>Attribute definition (only non-nan attributes)</h6>
<div
class="form-floating mb-3"
v-for="attribute in state.attributes.values"
:key="attribute.id"
>
<input
type="number"
class="form-control"
:id="'input-' + attribute.id"
v-model="state.attributes.weights[attribute.id]"
/>
<label for="floatingInput">{{ attribute.id }}</label>
<template v-if="!state.object_type.loading">
<div class="col-12 col-md-6 mb-2">
<div class="form-floating">
<select
class="form-select"
id="mode-selector"
aria-label="mode-selection"
v-model="state.mode.selected"
>
<option v-for="mode of state.mode.values" :key="mode" :value="mode">
{{ mode }}
</option>
</select>
<label for="mode-selector">Mode</label>
</div>
</div>
<div class="form-floating mb-3">
<input
type="number"
class="form-control"
:id="'input-' + CFLOW_COL_NAME"
v-model="state.attributes.weights[CFLOW_COL_NAME]"
/>
<label for="floatingInput">{{ CFLOW_COL_NAME }}</label>
<div class="col-12 mb-2">
<h6>Attribute definition (only non-nan attributes)</h6>
<div class="row g-1">
<div
class="col-12 col-sm-6 col-md-3 col-lg-2"
v-for="attribute in state.attributes.values"
:key="attribute.id"
>
<div class="form-floating">
<input
type="number"
class="form-control"
:id="'input-' + attribute.id"
v-model="state.attributes.weights[attribute.id]"
:disabled="state.attributes.loading"
/>
<label for="floatingInput">{{ attribute.id }}</label>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-2">
<div class="form-floating">
<input
type="number"
class="form-control"
:id="'input-' + CFLOW_COL_NAME"
v-model="state.attributes.weights[CFLOW_COL_NAME]"
:disabled="state.attributes.loading"
/>
<label for="floatingInput">{{ CFLOW_COL_NAME }}</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 mb-2">
<h6>Other optional parameters</h6>
<div class="form-floating">
<select
class="form-select"
id="cluster-count-selector"
aria-label="cluster-count-selection"
v-model="c_cluster_count"
>
<option value="-1">auto</option>
<option
v-for="num in state.cluster_count_val_arr"
:key="num"
:value="num"
<div class="col-12 col-md-6 mb-2">
<div class="form-floating">
<select
class="form-select"
id="cluster-count-selector"
aria-label="cluster-count-selection"
v-model="c_cluster_count"
:disabled="state.object_properties_loading"
>
{{ num }}
</option>
</select>
<label for="cluster-count-selector">cluster-count</label>
<option value="-1">auto</option>
<option
v-for="num in state.cluster_count_val_arr"
:key="num"
:value="num"
>
{{ num }}
</option>
</select>
<label for="cluster-count-selector">cluster-count</label>
</div>
</div>
<div class="form-floating">
<select
class="form-select"
id="max-cluster-count-selector"
aria-label="max-cluster-count-selection"
v-model="c_max_cluster_count"
>
<option value="-1">auto</option>
<option
v-for="num in state.cluster_count_val_arr"
:key="num"
:value="num"
<div class="col-12 col-md-6 mb-2">
<div class="form-floating">
<select
class="form-select"
id="max-cluster-count-selector"
aria-label="max-cluster-count-selection"
v-model="c_max_cluster_count"
:disabled="state.object_properties_loading"
>
{{ num }}
</option>
</select>
<label for="max-cluster-count-selector">max-cluster-count</label>
<option value="-1">auto</option>
<option
v-for="num in state.cluster_count_val_arr"
:key="num"
:value="num"
>
{{ num }}
</option>
</select>
<label for="max-cluster-count-selector">max-cluster-count</label>
</div>
<p>
<span class="text-uppercase fw-bold">Attention: </span>This parameter
drastically affects the runtime. The suggested value is
⌊log₂(instance_count)⌋. If you are using auto on a large
instance_count you may encouter timeouts or other runtime problems.
</p>
</div>
</div>
<div class="col-12">
<button @click="apply_clustering" class="btn btn-primary btn-block">Cluster!</button>
</div>
<div class="col-12 d-grid">
<button
@click="apply_clustering"
class="btn btn-primary btn-block"
:disabled="state.clustering_loading"
>
<template v-if="!state.clustering_loading"
>Apply Clustering algorithm
</template>
<template v-else>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
</template>
</button>
</div>
</template>
</div>
</template>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment