Skip to content

Remove image in overview, add search box for workspaces, check on uploads #301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JackWilb merged 5 commits into from
Aug 21, 2023
Merged

Remove image in overview, add search box for workspaces, check on uploads #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
085d1ba
Remove the multinet overview image from the homepage
JackWilb Aug 21, 2023
9c26ea3
Add search box for when we have lots of workspaces
JackWilb Aug 21, 2023
c96beef
Check on uploads every 3 seconds and refresh workspace when it
JackWilb Aug 21, 2023
5e76c33
Fix the check upload logic to work with quick uploads
JackWilb Aug 21, 2023
1707678
Fix type issue
JackWilb Aug 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,6 @@ declare module 'vue' {
VCardSubtitle: typeof import('vuetify/lib')['VCardSubtitle']
VCardText: typeof import('vuetify/lib')['VCardText']
VCardTitle: typeof import('vuetify/lib')['VCardTitle']
VCarousel: typeof import('vuetify/lib')['VCarousel']
VCarouselItem: typeof import('vuetify/lib')['VCarouselItem']
VCheckbox: typeof import('vuetify/lib')['VCheckbox']
VCol: typeof import('vuetify/lib')['VCol']
VContainer: typeof import('vuetify/lib')['VContainer']
Expand Down
Binary file removed src/assets/multilink-overview.webp
View file
Open in desktop
Binary file not shown.
3 changes: 2 additions & 1 deletion src/components/CreateModifyDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
<TableNetworkUploadStepper
v-else-if="firstChosen === 1"
:workspace="props.workspace"
@success="dialog = false"
@success="(upload) => { dialog = false; emit('success', upload) }"
@back="firstChosen = undefined; dialogStep -= 1"
/>
</v-card>
Expand All @@ -61,6 +61,7 @@ import TableNetworkUploadStepper from './TableNetworkUploadStepper.vue';
const props = defineProps<{
workspace: string;
}>();
const emit = defineEmits(['success']);

const userCanEdit = computed(() => store.getters.userCanEdit);

Expand Down
20 changes: 20 additions & 0 deletions src/components/Sidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,20 @@
</v-icon>
Other Workspaces
</v-subheader>
<v-autocomplete
v-model="singleSelected"
:class="publicSpace ? 'px-4' : 'px-4 mt-4'"
:items="(publicSpace ? publicWorkspaces.filter((w) => !w.starred) : personalWorkspaces).map((w) => w.name)"
dense
hide-no-data
item-text="name"
label="Search for a workspace"
placeholder="Search for a workspace"
return-object
single-line
auto-select-first
@input="openWorkspace"
/>
<v-hover
v-for="space in (publicSpace ? publicWorkspaces.filter((w) => !w.starred) : personalWorkspaces)"
:key="space.name"
Expand Down Expand Up @@ -219,6 +233,12 @@ function workspaceDeleted() {
}

const dws = ref(null);

function openWorkspace() {
if (singleSelected.value !== null) {
router.push(`/workspaces/${singleSelected.value}`);
}
}
</script>

<style scoped>
Expand Down
8 changes: 5 additions & 3 deletions src/components/TableNetworkUploadStepper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,8 +397,10 @@ async function upload() {

uploading.value = true;

let uploadObj;

if (isNetwork.value) {
api.uploadNetwork(
uploadObj = await api.uploadNetwork(
props.workspace,
uploadName.value,
file.value,
Expand All @@ -407,7 +409,7 @@ async function upload() {
);
} else {
const isEdgeTable = Object.values(columnTypes.value[0]).includes('edge source') && Object.values(columnTypes.value[0]).includes('edge target');
api.uploadTable(props.workspace, uploadName.value, {
uploadObj = await api.uploadTable(props.workspace, uploadName.value, {
data: file.value,
edgeTable: isEdgeTable,
columnTypes: columnTypes.value[0],
Expand All @@ -417,7 +419,7 @@ async function upload() {
});
}

emit('success');
emit('success', uploadObj);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (err: any) {
tableCreationError.value = `${[Object.values(err.response.data).flat()][0]}`;
Expand Down
270 changes: 125 additions & 145 deletions src/views/FrontPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,164 +4,144 @@
fluid
>
<v-main>
<!-- BANNER -->
<v-responsive
class="mb-5"
<v-card
color="grey lighten-2"
flat
tile
>
<v-card
color="grey lighten-2"
flat
tile
>
<v-row class="align-center justify-center">
<v-col cols="1" />
<v-col cols="2">
<img
src="../assets/logo/app_logo.svg"
class="mx-auto"
:style="{ maxHeight: '100px', maxWidth: '100px' }"
alt="Multinet Logo"
/>
</v-col>
<v-col>
<v-card-text
class="grey--text text--darken-3 text-center text-h4 pt-10"
>
<strong class="black--text">Multinet</strong> is visualization tool for networks with attributes associated with the nodes and links.
</v-card-text>
</v-col>
<v-col cols="3" />
</v-row>
<v-card-text :style="{ maxHeight: '500px', overflow: 'hidden' }">
<v-row class="align-center justify-center">
<v-col cols="1" />
<v-col cols="2">
<img
style="width: 100%;"
src="../assets/multilink-overview.webp"
alt="Multinet overview"
src="../assets/logo/app_logo.svg"
class="mx-auto"
:style="{ maxHeight: '100px', maxWidth: '100px' }"
alt="Multinet Logo"
/>
</v-card-text>
</v-card>
<v-card
color="grey lighten-2"
flat
tile
class="py-2"
/>
</v-responsive>

<v-container id="lower-half">
<v-row class="text-center">
<v-spacer />
<v-col class="text-h4 grey--text text--darken-4">
Getting Started
</v-col>
<v-spacer />
</v-row>
<v-row class="text-center pb-12">
<v-spacer />
<v-col
cols="3"
class="text-h6 grey--text text--darken-4"
>
<v-btn
icon
x-large
@click="login"
<v-col>
<v-card-text
class="grey--text text--darken-3 text-center text-h4 pt-10"
>
<v-icon x-large>
mdi-upload
</v-icon>
</v-btn>
Sign up and upload your own data
<strong class="black--text">Multinet</strong> is visualization tool for networks with attributes associated with the nodes and links.
</v-card-text>
</v-col>
<v-spacer />
<v-col
cols="3"
class="text-h6 grey--text text--darken-4"
<v-col cols="3" />
</v-row>
</v-card>

<v-row class="text-center mt-6">
<v-spacer />
<v-col class="text-h4 grey--text text--darken-4">
Getting Started
</v-col>
<v-spacer />
</v-row>
<v-row class="text-center pb-12">
<v-spacer />
<v-col
cols="3"
class="text-h6 grey--text text--darken-4"
>
<v-btn
icon
x-large
@click="login"
>
<v-icon
x-large
class="pr-1"
>
mdi-gamepad-square
<v-icon x-large>
mdi-upload
</v-icon>
Try a demo below or explore the public workspaces
</v-col>
<v-spacer />
</v-btn>
Sign up and upload your own data
</v-col>
<v-spacer />
<v-col
cols="3"
class="text-h6 grey--text text--darken-4"
>
<v-icon
x-large
class="pr-1"
>
mdi-gamepad-square
</v-icon>
Try a demo below or explore the public workspaces
</v-col>
<v-spacer />
<v-col
cols="3"
class="text-h6 grey--text text--darken-4"
>
<v-dialog
v-model="dialog"
width="500"
>
<template #activator="{ on }">
<v-btn
class="px-0"
icon
x-large
min-width="40px"
v-on="on"
>
<v-icon x-large>
mdi-information
</v-icon>
</v-btn>
</template>

<about-text @toggle="dialog = false" />
</v-dialog>
Learn more about MultiNet
</v-col>
<v-spacer />
</v-row>

<!-- COLUMNS -->
<div class="px-6 py-2">
<v-row class="px-5 pb-6">
<v-col
cols="3"
class="text-h6 grey--text text--darken-4"
v-for="sample in samples"
:key="sample.title"
cols="4"
>
<v-dialog
v-model="dialog"
width="500"
>
<template #activator="{ on }">
<v-btn
class="px-0"
icon
x-large
min-width="40px"
v-on="on"
>
<v-icon x-large>
mdi-information
</v-icon>
</v-btn>
<v-hover>
<template #default="{ hover }">
<v-card>
<v-img
class="align-end"
height="250px"
:src="sample.image"
>
<v-card-title class="box-shadow-title">
{{ sample.title }}
</v-card-title>
</v-img>
<v-fade-transition>
<v-overlay
v-if="hover"
absolute
opacity=".85"
>
<div class="overlay-text">
<p>{{ sample.text }}</p>
<v-btn
color="primary"
:href="sample.href"
target="_blank"
rel="noopener noreferrer"
>
Open in New Window
</v-btn>
</div>
</v-overlay>
</v-fade-transition>
</v-card>
</template>

<about-text @toggle="dialog = false" />
</v-dialog>
Learn more about MultiNet
</v-hover>
</v-col>
<v-spacer />
</v-row>

<!-- COLUMNS -->
<div class="px-6 py-2">
<v-row class="px-5 pb-6">
<v-col
v-for="sample in samples"
:key="sample.title"
cols="4"
>
<v-hover>
<template #default="{ hover }">
<v-card>
<v-img
class="align-end"
height="250px"
:src="sample.image"
>
<v-card-title class="box-shadow-title">
{{ sample.title }}
</v-card-title>
</v-img>
<v-fade-transition>
<v-overlay
v-if="hover"
absolute
opacity=".85"
>
<div class="overlay-text">
<p>{{ sample.text }}</p>
<v-btn
color="primary"
:href="sample.href"
target="_blank"
rel="noopener noreferrer"
>
Open in New Window
</v-btn>
</div>
</v-overlay>
</v-fade-transition>
</v-card>
</template>
</v-hover>
</v-col>
</v-row>
</div>
</v-container>
</div>
</v-main>
</v-container>
</template>
Expand Down
Loading