Skip to content

Commit

Permalink
Merge pull request #17458 from ElectronicBlueberry/activity-bar-visua…
Browse files Browse the repository at this point in the history 
…lisation

Move Visualizations Activity to Side Panel
  • Loading branch information
@mvdbeek
mvdbeek authored Feb 15, 2024
2 parents 9415df8 + e2cd6f8 commit 6fe4125
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 44 deletions.
4 changes: 3 additions & 1 deletion client/src/components/ActivityBar/ActivityBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { type Activity, useActivityStore } from "@/stores/activityStore";
import { useEventStore } from "@/stores/eventStore";
import { useUserStore } from "@/stores/userStore";
import VisualizationPanel from "../Panels/VisualizationPanel.vue";
import ActivityItem from "./ActivityItem.vue";
import InteractiveItem from "./Items/InteractiveItem.vue";
import NotificationItem from "./Items/NotificationItem.vue";
Expand Down Expand Up @@ -150,7 +151,7 @@ function onToggleSidebar(toggle: string) {
:to="activity.to"
@click="onToggleSidebar()" />
<ActivityItem
v-else-if="['tools', 'workflows'].includes(activity.id)"
v-else-if="['tools', 'workflows', 'visualizations'].includes(activity.id)"
:id="`activity-${activity.id}`"
:key="activity.id"
:icon="activity.icon"
Expand Down Expand Up @@ -193,6 +194,7 @@ function onToggleSidebar(toggle: string) {
<FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
<ToolPanel v-if="isActiveSideBar('tools')" />
<WorkflowPanel v-else-if="isActiveSideBar('workflows')" />
<VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
<NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
<SettingsPanel v-else-if="isActiveSideBar('settings')" />
</FlexPanel>
Expand Down
10 changes: 10 additions & 0 deletions client/src/components/Panels/VisualizationPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<script setup lang="ts">
import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
import PluginList from "@/components/Visualizations/PluginList.vue";
</script>

<template>
<ActivityPanel title="Visualizations">
<PluginList />
</ActivityPanel>
</template>
98 changes: 56 additions & 42 deletions client/src/components/Visualizations/PluginList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,61 @@
<template>
<div class="plugin-list">
<div v-if="error" class="alert alert-danger">{{ error }}</div>
<div v-else>
<template v-else>
<DelayedInput
class="mb-3"
:query="search"
:placeholder="titleSearchVisualizations"
:delay="100"
@change="onSearch" />
<div v-for="plugin in plugins" :key="plugin.name">
<table v-if="match(plugin)">
<tr class="plugin-list-item" :data-plugin-name="plugin.name" @click="select(plugin)">
<td>
<img v-if="plugin.logo" alt="ui thumbnails" class="plugin-list-image" :src="plugin.logo" />
<div v-else class="plugin-list-icon fa fa-eye" />
</td>
<td>
<div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
<div class="plugin-list-text">{{ plugin.description }}</div>
</td>
</tr>
<tr v-if="!fixed">
<td />
<td v-if="plugin.name == name">
<div v-if="hdas && hdas.length > 0">
<div class="font-weight-bold">{{ titleSelectDataset }}</div>
<div class="ui-select">
<select v-model="selected" class="select">
<option v-for="file in hdas" :key="file.id" :value="file.id">
{{ file.name }}
</option>
</select>
<div class="icon-dropdown fa fa-caret-down" />
<div class="plugin-list-items">
<div v-for="plugin in plugins" :key="plugin.name">
<table v-if="match(plugin)">
<tr class="plugin-list-item" :data-plugin-name="plugin.name" @click="select(plugin)">
<td>
<img
v-if="plugin.logo"
alt="ui thumbnails"
class="plugin-list-image"
:src="plugin.logo" />
<div v-else class="plugin-list-icon fa fa-eye" />
</td>
<td>
<div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
<div class="plugin-list-text">{{ plugin.description }}</div>
</td>
</tr>
<tr v-if="!fixed">
<td />
<td v-if="plugin.name == name">
<div v-if="hdas && hdas.length > 0">
<div class="font-weight-bold">{{ titleSelectDataset }}</div>
<div class="ui-select">
<select v-model="selected" class="select">
<option v-for="file in hdas" :key="file.id" :value="file.id">
{{ file.name }}
</option>
</select>
<div class="icon-dropdown fa fa-caret-down" />
</div>
<button
type="button"
class="ui-button-default float-left mt-3 btn btn-primary"
@click="create(plugin)">
<i class="icon fa fa-check" />
<span class="title">{{ titleCreateVisualization }}</span>
</button>
</div>
<button
type="button"
class="ui-button-default float-left mt-3 btn btn-primary"
@click="create(plugin)">
<i class="icon fa fa-check" />
<span class="title">{{ titleCreateVisualization }}</span>
</button>
</div>
<div v-else v-localize class="alert alert-danger">
There is no suitable dataset in your current history which can be visualized with this
plugin.
</div>
</td>
</tr>
</table>
<div v-else v-localize class="alert alert-danger">
There is no suitable dataset in your current history which can be visualized with
this plugin.
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
</div>
</template>
<script>
Expand Down Expand Up @@ -157,6 +163,14 @@ export default {
@import "~scss/mixins.scss";
.plugin-list {
display: flex;
flex-direction: column;
height: 100%;
.plugin-list-items {
overflow-y: auto;
}
.plugin-list-item {
cursor: pointer;
.plugin-list-image {
Expand All @@ -173,7 +187,7 @@ export default {
color: $text-color;
}
.plugin-list-text {
word-wrap: break-word;
word-break: break-word;
}
}
.plugin-list-item:hover {
Expand Down
2 changes: 1 addition & 1 deletion client/src/stores/activitySetup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const Activities = [
mutable: false,
optional: true,
title: "Visualize",
to: "/visualizations",
to: null,
tooltip: "Visualize datasets",
visible: true,
},
Expand Down

0 comments on commit 6fe4125

Please sign in to comment.