Skip to content
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

feat: tera-carousel #2353

Merged
merged 10 commits into from
Dec 5, 2023
Merged

feat: tera-carousel #2353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b9241f1
extract carousel from asset card
shawnyama Dec 1, 2023
f9d8603
Merge branch 'main' into general-carousel
shawnyama Dec 1, 2023
e30cefa
match image carousel
shawnyama Dec 4, 2023
e6fdd59
Merge branch 'main' into general-carousel
shawnyama Dec 4, 2023
d6b52fc
numeric and indicator versions
shawnyama Dec 4, 2023
5c09149
tidy different navs
shawnyama Dec 4, 2023
3f6ebe3
fit image and text in div nicely
shawnyama Dec 4, 2023
2eb9b50
Merge branch 'main' into general-carousel
shawnyama Dec 4, 2023
e92c676
s
shawnyama Dec 4, 2023
3563f24
Merge branch 'main' into general-carousel
shawnyama Dec 5, 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
170 changes: 170 additions & 0 deletions packages/client/hmi-client/src/components/widgets/tera-carousel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<template>
<figure>
<div ref="content" class="content" :style="{ height, width }">
<slot />
<div v-if="!hasSlot('default')" class="empty">
<i class="pi pi-image" />
</div>
</div>
<nav v-if="itemCount > 0">
<ul :class="{ numeric: isNumeric }">
<li
v-for="(_, index) in itemCount"
:class="{ selected: index === currentPage }"
:key="_"
@click.stop="move(index)"
>
<!--Displays when isNumeric is true-->
<span>{{ index + 1 }}</span>
</li>
<li v-if="isNumeric && itemCount > 5">(+{{ itemCount }})</li>
</ul>
</nav>
</figure>
</template>

<script setup lang="ts">
import { ref, onMounted, useSlots } from 'vue';

defineProps({
height: {
type: String,
default: null
},
width: {
type: String,
default: null
},
isNumeric: {
type: Boolean,
default: false
}
});

const content = ref();
const currentPage = ref(0);
const itemCount = ref(0);

const slots = useSlots();
const hasSlot = (name: string) => !!slots[name];

function move(movement: number) {
if (movement > -1 && movement < itemCount.value) {
content.value.children[currentPage.value].style.display = 'none';
currentPage.value = movement;
content.value.children[currentPage.value].style.display = 'block';
}
}

onMounted(() => {
itemCount.value = content.value?.children.length ?? 0;
if (itemCount.value > 0) move(0);
});
</script>

<style scoped>
figure {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.content {
display: flex;
align-items: center;
justify-content: center;
height: 7.5rem;
max-height: 7.5rem;
overflow: hidden;
background-color: var(--surface-ground);
border-radius: var(--border-radius);
border: 1px solid var(--surface-border-light);
}

.content > :deep(*) {
display: none;
font-size: 10px;
overflow-wrap: break-word;
overflow: auto;
background-color: var(--surface-section);
padding: 4px;
}

.content > :deep(img) {
background-color: transparent;
height: 100%;
width: 100%;
object-fit: scale-down;
padding: 0;
}

.empty {
background-color: transparent;
}

:deep(a),
:deep(a:hover) {
color: var(--primary-color);
}

i {
margin: auto;
color: rgb(226, 227, 229);
font-size: 3rem;
}

nav {
text-align: center;
color: var(--text-color-subdued);

& > ul {
display: flex;
align-items: center;
list-style: none;
justify-content: center;

& > li {
cursor: pointer;
transition: 0.2s;
border-radius: var(--border-radius);
&:hover {
background-color: var(--surface-highlight);
}
}

&:not(.numeric) {
margin: 1rem;
gap: 0.5rem;
}

&:not(.numeric) > li {
background-color: #dcdcdc;
width: 0.5rem;
height: 0.5rem;
/* Hides page number */
& > span {
display: none;
}
&.selected {
background-color: var(--primary-color);
}
}

&.numeric > li {
white-space: nowrap;
padding: 0.25rem;
&.selected {
font-weight: var(--font-weight-semibold);
color: var(--text-color-primary);
}
}
}

/* May be potentially used later */
& .pi-arrow-left,
& .pi-arrow-right {
border-radius: 24px;
font-size: 10px;
}
}
</style>
170 changes: 40 additions & 130 deletions packages/client/hmi-client/src/page/data-explorer/components/tera-asset-card.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,62 +61,50 @@
</div>
<footer><!--pill tags if already in another project--></footer>
</main>
<aside class="preview-and-options">
<figure
v-if="resourceType === ResourceType.XDD && (asset as Document).knownEntities?.askemObjects"
<aside>
<tera-carousel
v-if="resourceType === ResourceType.XDD && !isEmpty(extractions)"
is-numeric
height="6rem"
width="8rem"
>
<template v-if="relatedAsset">
<template v-for="(extraction, index) in extractions">
<img
v-if="relatedAsset.properties.image"
:src="`data:image/jpeg;base64,${relatedAsset.properties.image}`"
v-if="extraction.properties.image"
:src="`data:image/jpeg;base64,${extraction.properties.image}`"
class="extracted-assets"
alt="asset"
:key="index"
/>
<div class="link" v-else-if="relatedAsset.properties.doi">
<a
v-if="relatedAsset.properties.documentBibjson?.link"
:href="relatedAsset.properties.documentBibjson.link[0].url"
@click.stop
rel="noreferrer noopener"
>
{{ relatedAsset.properties.documentBibjson.link[0].url }}
</a>
<a
v-else
:href="`https://doi.org/${relatedAsset.properties.doi}`"
@click.stop
rel="noreferrer noopener"
>
{{ `https://doi.org/${relatedAsset.properties.doi}` }}
</a>
</div>
<div class="link" v-else-if="relatedAsset.urlExtraction">
<a :href="relatedAsset.urlExtraction.url" @click.stop rel="noreferrer noopener">
{{ relatedAsset.urlExtraction.resourceTitle }}
</a>
</div>
<a
v-else-if="extraction.properties.doi && extraction.properties.documentBibjson?.link"
:href="extraction.properties.documentBibjson.link[0].url"
@click.stop
rel="noreferrer noopener"
:key="`${index}a`"
>
{{ extraction.properties.documentBibjson.link[0].url }}
</a>
<a
v-else-if="extraction.properties.doi"
:href="`https://doi.org/${extraction.properties.doi}`"
@click.stop
rel="noreferrer noopener"
:key="`${index}b`"
>
{{ `https://doi.org/${extraction.properties.doi}` }}
</a>
<a
v-else-if="extraction.urlExtraction"
:href="extraction.urlExtraction.url"
@click.stop
rel="noreferrer noopener"
:key="`${index}c`"
>
{{ extraction.urlExtraction.resourceTitle }}
</a>
</template>
<div class="asset-nav-arrows">
<span class="asset-pages" v-if="!isEmpty(extractions)">
<span v-if="totalExtractions > 1" class="asset-count">
<template v-for="(_, index) in extractions.length" :key="_">
<i
:class="
index === relatedAssetPage
? 'asset-count-selected-text'
: 'asset-count-selected'
"
@click.stop="previewMovement(index)"
>{{ index + 1 }}</i
>
</template>
<span v-if="totalExtractions > 5" class="asset-count-text">
(+{{ totalExtractions }})</span
>
</span>
</span>
</div>
</figure>
</tera-carousel>
<slot name="default"></slot>
</aside>
</div>
Expand All @@ -130,6 +118,7 @@ import { Document, Extraction, XDDUrlExtraction, Dataset, Model } from '@/types/
import { ResourceType, ResultType } from '@/types/common';
import * as textUtil from '@/utils/text';
import { useDragEvent } from '@/services/drag-drop';
import TeraCarousel from '@/components/widgets/tera-carousel.vue';

// This type is for easy frontend integration with the rest of the extraction types (just for use here)
type UrlExtraction = {
Expand Down Expand Up @@ -197,17 +186,6 @@ const extractions: ComputedRef<UrlExtraction[] & Extraction[]> = computed(() =>
return [];
});

const totalExtractions: ComputedRef<number> = computed(() => {
if ((props.asset as Document).knownEntitiesCounts) {
return (
(props.asset as Document).knownEntitiesCounts.askemObjectCount +
(props.asset as Document).knownEntitiesCounts.urlExtractionCount
);
}
return 0;
});

const relatedAsset = computed(() => extractions.value[relatedAssetPage.value]);
const snippets = computed(() =>
(props.asset as Document).highlight
? Array.from((props.asset as Document).highlight).splice(0, 3)
Expand All @@ -233,12 +211,6 @@ watch(
}
);

function previewMovement(movement: number) {
if (movement > -1 && movement < extractions.value.length) {
relatedAssetPage.value = movement;
}
}

function updateExtractionFilter(extractionType: XDDExtractionType) {
chosenExtractionFilter.value =
chosenExtractionFilter.value === extractionType ? 'Asset' : extractionType;
Expand Down Expand Up @@ -333,73 +305,11 @@ function endDrag() {
font-size: 0.75rem;
}

.preview-and-options {
aside {
display: flex;
gap: 0.5rem;
}

.preview-and-options figure {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 8rem;
height: 7rem;
}

.preview-and-options figure img {
margin: auto 0;
object-fit: contain;
max-height: 5rem;
}

.preview-and-options .link {
overflow: auto;
overflow-wrap: break-word;
margin: auto 0;
min-height: 0;
font-size: 10px;
}

.preview-and-options .link a {
color: var(--primary-color);
}

.preview-and-options figure img,
.preview-and-options .link {
border: 1px solid var(--surface-ground);
border-radius: 3px;
padding: 4px;
}

.asset-nav-arrows {
text-align: center;
}

.pi-arrow-left,
.pi-arrow-right {
border-radius: 24px;
font-size: 10px;
}

.asset-nav-arrows .asset-pages {
display: flex;
justify-content: space-between;
align-items: center;
}

.asset-nav-arrows .asset-count {
white-space: nowrap;
}

.asset-nav-arrows .asset-count-text {
color: var(--text-color-subdued);
}

.asset-count-selected-text {
font-weight: 1000;
color: var(--text-color-primary);
}

.title,
.details,
.description,
Expand Down
Loading