imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: insight path tabs

Browse Source
This commit is contained in:
Cindy Chang
2024-08-19 13:32:50 +08:00
parent 0950214f19
commit 1191d87f93
1 changed files with 53 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/Discover/Map/SidebarState.vue
View File

@@ -119,30 +119,39 @@
<div v-if="tab === 'insight'"> <div v-if="tab === 'insight'">
<div class="border-b-2 border-neutral-300 mb-4"> <div class="border-b-2 border-neutral-300 mb-4">
<p class="h2">Most Frequent</p> <p class="h2">Most Frequent</p>
<ul class="list-disc ml-6 mb-2 text-sm space-y-1"> <ul class="list-disc ml-6 mb-2 text-sm">
<li>Activity:&nbsp; <li class="leading-5">Activity:&nbsp;
<span class="text-primary break-words" v-for="(value, key) in insights.most_freq_tasks" :key="key">{{ value }}<span v-if="key !== insights.most_freq_tasks.length - 1" class="text-neutral-900">,&nbsp;</span> <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
insights.most_freq_tasks" :key="key">{{ value }}</span>
</li>
<li class="leading-5">Inbound connections:&nbsp;
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
insights.most_freq_in" :key="key">{{ value }}
</span> </span>
</li> </li>
<li>Inbound connections:&nbsp; <li class="leading-5">Outbound connections:&nbsp;
<span class="text-primary break-words" v-for="(value, key) in insights.most_freq_in" :key="key">{{ value }}<span v-if="key !== insights.most_freq_in.length - 1" class="text-neutral-900">,&nbsp;</span> <span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
</span> insights.most_freq_out" :key="key">{{ value }}
</li>
<li>Outbound connections:&nbsp;
<span class="text-primary break-words" v-for="(value, key) in insights.most_freq_out" :key="key">{{ value }}<span v-if="key !== insights.most_freq_out.length - 1" class="text-neutral-900">,&nbsp;</span>
</span> </span>
</li> </li>
</ul> </ul>
<p class="h2">Most Time-Consuming</p> <p class="h2">Most Time-Consuming</p>
<ul class="list-disc ml-6 mb-4 text-sm space-y-1"> <ul class="list-disc ml-6 mb-4 text-sm">
<li class="w-full">Activity:&nbsp; <li class="w-full leading-5">Activity:&nbsp;
<span class="text-primary break-words" v-for="(value, key) in insights.most_time_tasks" :key="key">{{ value }}<span v-if="key !== insights.most_time_tasks.length - 1" class="text-neutral-900">,&nbsp;</span> <span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key)
in insights.most_time_tasks" :key="key">{{ value }}
</span> </span>
</li> </li>
<li>Connection:&nbsp; <li class="w-full leading-5 mt-2">Connection:&nbsp;
<span class="text-primary break-words" v-for="(item, key) in insights.most_time_edges" :key="key"> <span class="text-primary break-words"
<span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub ">arrow_forward</span>&nbsp;</span> v-for="(item, key) in insights.most_time_edges" :key="key">
</span><span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">,&nbsp;</span> <span v-for="(value, index) in item" :key="index">
<span class="connection-text bg-[#F1F5F9] px-2 rounded">{{ value }}</span>
<span v-if="index !== item.length - 1">&nbsp;
<span class="material-symbols-outlined !text-lg align-sub ">arrow_forward</span>
&nbsp;</span>
</span>
<span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">,&nbsp;</span>
</span> </span>
</li> </li>
</ul> </ul>
@@ -159,7 +168,7 @@
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView ref="tabview2" v-model:activeIndex="active1">
<TabPanel header="Self-loop" contentClass="text-sm"> <TabPanel header="Self-loop" contentClass="text-sm">
<p v-if="insights.self_loops.length === 0">No data</p> <p v-if="insights.self_loops.length === 0">No data</p>
<ul v-else class="list-disc ml-6 space-y-1"> <ul v-else class="ml-6 space-y-1">
<li v-for="(value, key) in insights.self_loops" :key="key"> <li v-for="(value, key) in insights.self_loops" :key="key">
<span>{{ value }}</span> <span>{{ value }}</span>
</li> </li>
@@ -167,38 +176,29 @@
</TabPanel> </TabPanel>
<TabPanel header="Short-loop" contentClass="text-sm"> <TabPanel header="Short-loop" contentClass="text-sm">
<p v-if="insights.short_loops.length === 0">No data</p> <p v-if="insights.short_loops.length === 0">No data</p>
<ul v-else class="list-disc ml-6 space-y-1"> <ul v-else class="ml-6 space-y-1">
<li class="break-words" v-for="(item, key) in insights.short_loops" :key="key"> <li class="break-words" v-for="(item, key) in insights.short_loops" :key="key">
<span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">sync_alt</span>&nbsp;</span> <span v-for="(value, index) in item" :key="index">
{{ value }}
<span v-if="index !== item.length - 1">&nbsp;
<span class="material-symbols-outlined !text-lg align-sub">sync_alt</span>
&nbsp;</span>
</span> </span>
</li> </li>
</ul> </ul>
</TabPanel> </TabPanel>
<TabPanel header="Shortest Trace" contentClass="text-sm"> <TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label" contentClass="text-sm">
<p v-if="insights.shortest_traces.length === 0">No data</p> <p v-if="insights[field].length === 0">No data</p>
<ul v-else class="list-disc ml-6 space-y-1"> <ul v-else class="ml-6 space-y-1">
<li class="break-words" v-for="(item, key) in insights.shortest_traces" :key="key"> <li v-for="(item, key2) in insights[field]" :key="key2"
<span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span> class="mb-2">
<span v-for="(value, index) in item" :key="index">
{{ value }}
<span v-if="index !== item.length - 1">
&nbsp;
<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>
&nbsp;
</span> </span>
</li>
</ul>
</TabPanel>
<TabPanel header="Longest Trace" contentClass="text-sm">
<p v-if="insights.longest_traces.length === 0">No data</p>
<ul v-else class="list-disc ml-6 space-y-1">
<li class="break-words" v-for="(item, key) in insights.longest_traces" :key="key">
<span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span>
</span>
</li>
</ul>
</TabPanel>
<TabPanel header="Most Frequent Trace" contentClass="text-sm">
<ul v-if="insights.most_freq_traces.length === 0">
<li >No data</li>
</ul>
<ul v-else class="list-disc ml-6 space-y-1">
<li class="break-words" v-for="(item, key) in insights.most_freq_traces" :key="key">
<span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span>
</span> </span>
</li> </li>
</ul> </ul>
@@ -217,6 +217,15 @@ import { getTimeLabel } from '@/module/timeLabel.js';
import getMoment from 'moment'; import getMoment from 'moment';
import i18next from '@/i18n/i18n'; import i18next from '@/i18n/i18n';
const fieldNamesAndLabelNames = [
['self_loops', 'Self-Loop'],
['short_loops', 'Short-Loop'],
['shortest_traces', 'Shortest Trace'],
['longest_traces', 'Longest Trace'],
['most_freq_traces', 'Most Frequent Trace'],
];
// 刪除第一個和第二個元素
fieldNamesAndLabelNames.splice(0, 2);
export default { export default {
props:{ props:{
sidebarState: { sidebarState: {
@@ -240,6 +249,7 @@ export default {
return { return {
currentMapFile, currentMapFile,
i18next, i18next,
fieldNamesAndLabelNames,
}; };
}, },
data() { data() {