Skip to content

Commit

Permalink
More cleaning up! (#5107)
Browse files Browse the repository at this point in the history
  • Loading branch information
YohannParis authored Oct 9, 2024
1 parent 8ada802 commit 848be0f
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 124 deletions.
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<template>
<tera-asset
:id="assetId"
:feature-config="featureConfig"
:name="document?.name ?? ''"
:overline="document?.source ?? ''"
@close-preview="emit('close-preview')"
:is-loading="documentLoading"
>
<p class="pl-3" v-if="documentLoading">PDF Loading...</p>
Expand All @@ -18,48 +16,37 @@
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
import type { FeatureConfig, ExtractionStatusUpdate } from '@/types/common';
import TeraPdfEmbed from '@/components/widgets/tera-pdf-embed.vue';
import { ref, watch } from 'vue';
import TeraAsset from '@/components/asset/tera-asset.vue';
import type { ClientEvent, DocumentAsset } from '@/types/Types';
import { ClientEventType, ProgressState } from '@/types/Types';
import TeraTextEditor from '@/components/documents/tera-text-editor.vue';
import TeraPdfEmbed from '@/components/widgets/tera-pdf-embed.vue';
import { downloadDocumentAsset, getDocumentAsset, getDocumentFileAsText } from '@/services/document-assets';
import { subscribe, unsubscribe } from '@/services/ClientEventService';
import TeraTextEditor from './tera-text-editor.vue';
import { type DocumentAsset } from '@/types/Types';
enum DocumentView {
EXTRACTIONS = 'Extractions',
PDF = 'PDF',
TXT = 'Text',
NOT_FOUND = 'Not found'
TXT = 'Text'
}
const props = defineProps<{
assetId: string;
previewLineLimit: number;
featureConfig?: FeatureConfig;
}>();
const emit = defineEmits(['close-preview', 'asset-loaded', 'remove']);
const document = ref<DocumentAsset | null>(null);
const documentLoading = ref(false);
const docText = ref<string | null>(null);
const pdfLink = ref<string | null>(null);
const view = ref(DocumentView.PDF);
const docText = ref<string | null>(null);
const documentLoading = ref(false);
/* TODO: When fetching a document by id, its id and fileNames don't get returned.
Once they do see about adjusting the conditionals */
watch(
() => props.assetId,
async () => {
if (props.assetId) {
async (assetId, oldAssetId) => {
if (assetId === oldAssetId) return;
if (assetId) {
view.value = DocumentView.PDF;
pdfLink.value = null;
documentLoading.value = true;
document.value = await getDocumentAsset(props.assetId);
document.value = await getDocumentAsset(assetId);
const filename = document.value?.fileNames?.[0];
if (filename?.endsWith('.pdf')) {
Expand Down Expand Up @@ -88,50 +75,4 @@ watch(
},
{ immediate: true }
);
onUpdated(() => {
if (document.value) {
emit('asset-loaded');
}
});
onMounted(async () => {
await subscribe(ClientEventType.ExtractionPdf, subscribeToExtraction);
});
async function subscribeToExtraction(event: ClientEvent<ExtractionStatusUpdate>) {
if (!event.data || event.data.data.documentId !== props.assetId) return;
const status = event.data.state;
// FIXME: adding the 'dispatching' check since there seems to be an issue with the status of the extractions.
if (status === ProgressState.Complete || event.data.message.includes('Dispatching')) {
document.value = await getDocumentAsset(props.assetId);
}
}
onUnmounted(async () => {
await unsubscribe(ClientEventType.ExtractionPdf, subscribeToExtraction);
});
</script>
<style scoped>
.extracted-item {
display: flex;
flex-direction: row;
gap: var(--gap);
}
.extracted-item > .extracted-image {
display: block;
padding: 8px;
border: 1px solid var(--gray-200);
border-radius: var(--border-radius);
object-fit: contain;
}
.no-extracted-text {
color: var(--text-color-subdued);
font-size: var(--font-caption);
font-style: italic;
padding: var(--gap-small);
}
</style>
74 changes: 21 additions & 53 deletions packages/client/hmi-client/src/page/tera-project.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<main>
<tera-slider-panel
v-model:is-open="isResourcesSliderOpen"
class="resource-panel"
content-width="240px"
header="Resources"
direction="left"
class="resource-panel"
header="Resources"
>
<template v-slot:content>
<tera-resource-sidebar
Expand All @@ -17,51 +17,42 @@
/>
</template>
</tera-slider-panel>
<section class="project-page">
<section>
<tera-code v-if="pageType === AssetType.Code" :asset-id="assetId" />
<tera-dataset v-if="pageType === AssetType.Dataset" :asset-id="assetId" />
<tera-document-asset v-if="pageType === AssetType.Document" :assetId="assetId" />
<tera-model v-if="pageType === AssetType.Model" :asset-id="assetId" />
<tera-code :asset-id="assetId" v-else-if="pageType === AssetType.Code" />
<tera-project-overview v-else-if="pageType === ProjectPages.OVERVIEW" />
<tera-workflow v-else-if="pageType === AssetType.Workflow" :asset-id="assetId" />
<!--Add new process/asset views here-->
<template v-else-if="assetId">
<tera-document-asset
v-if="pageType === AssetType.Document"
:assetId="assetId"
:previewLineLimit="10"
@remove="removeAsset({ assetId, pageType })"
/>
<tera-dataset v-else-if="pageType === AssetType.Dataset" :asset-id="assetId" />
</template>
<tera-project-overview v-if="pageType === ProjectPages.OVERVIEW" />
<tera-workflow v-if="pageType === AssetType.Workflow" :asset-id="assetId" />
</section>
<!-- New asset modal -->
<tera-save-asset-modal
:is-visible="showSaveAssetModal"
:assetType="assetTypeToCreate"
open-on-save
:assetType="assetTypeToCreate"
:is-visible="showSaveAssetModal"
@close-modal="showSaveAssetModal = false"
/>
</main>
</template>

<script setup lang="ts">
import { isEqual } from 'lodash';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import TeraCode from '@/components/code/tera-code.vue';
import TeraDataset from '@/components/dataset/tera-dataset.vue';
import TeraDocumentAsset from '@/components/documents/tera-document-asset.vue';
import TeraModel from '@/components/model/tera-model.vue';
import TeraProjectOverview from '@/components/project/tera-project-overview.vue';
import TeraResourceSidebar from '@/components/project/tera-resource-sidebar.vue';
import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
import TeraWorkflow from '@/components/workflow/tera-workflow.vue';
import { useProjects } from '@/composables/project';
import TeraProjectOverview from '@/components/project/tera-project-overview.vue';
import TeraResourceSidebar from '@/components/project/tera-resource-sidebar.vue';
import { RouteName } from '@/router/routes';
import { ProjectPages, isProjectAssetTypes } from '@/types/Project';
import { AssetType } from '@/types/Types';
import { AssetRoute } from '@/types/common';
import { ProjectPages, isProjectAssetTypes } from '@/types/Project';
import { AssetType, TerariumAsset } from '@/types/Types';
import { logger } from '@/utils/logger';
import { isEqual } from 'lodash';
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
const route = useRoute();
const router = useRouter();
Expand All @@ -71,8 +62,8 @@ const showSaveAssetModal = ref(false);
const assetTypeToCreate = ref<AssetType>(AssetType.Model);
const pageType = computed(() => (route.params.pageType as ProjectPages | AssetType) ?? '');
const assetId = computed(() => (route.params.assetId as string) ?? '');
const openedAssetRoute = computed(() => ({ pageType: pageType.value, assetId: assetId.value }));
const assetId = computed(() => (route.params.assetId as TerariumAsset['id']) ?? '');
const openedAssetRoute = computed(() => ({ pageType: pageType.value, assetId: assetId.value }) as AssetRoute);
function openAsset(assetRoute: AssetRoute) {
if (!isEqual(assetRoute, openedAssetRoute.value)) {
Expand Down Expand Up @@ -122,34 +113,11 @@ onMounted(() => {
outline-color: var(--surface-border);
}
.tab-group {
z-index: 2;
isolation: isolate;
position: relative;
}
section {
display: flex;
flex-direction: column;
flex: 1;
flex-direction: column;
overflow-x: auto;
overflow-y: hidden;
}
.p-tabmenu:deep(.p-tabmenuitem) {
display: inline;
max-width: 15rem;
}
.p-tabmenu:deep(.p-tabmenu-nav .p-tabmenuitem .p-menuitem-link) {
padding: 1rem;
text-decoration: none;
}
.p-tabmenu:deep(.p-menuitem-text) {
height: 1rem;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

0 comments on commit 848be0f

Please sign in to comment.