Link equations to page (#5018)

DARPA-ASKEM · Oct 2, 2024 · 54b4778 · 54b4778
1 parent 1f2a3be
commit 54b4778
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 51 deletions.
diff --git a/packages/client/hmi-client/src/components/widgets/tera-pdf-embed.vue b/packages/client/hmi-client/src/components/widgets/tera-pdf-embed.vue
@@ -13,9 +13,19 @@ const props = defineProps<{
 }>();
 
 const adobeDCView = ref();
+const adobeApis = ref();
 const isAdobePdfApiReady = ref(false);
 let apiKey = null;
 
+function goToPage(pageNumber) {
+ if (!adobeApis.value) return;
+ adobeApis.value.gotoLocation(pageNumber, 0, 0);
+}
+
+defineExpose({
+ goToPage
+});
+
 onMounted(async () => {
  const apiKeyResponse = await API.get('/adobe');
  apiKey = apiKeyResponse.data;
@@ -44,39 +54,51 @@ watch(isAdobePdfApiReady, () => {
  );
 
  if (props.pdfLink) {
- adobeDCView.value.previewFile(
- {
- content: {
- location: {
- url: props.pdfLink
- }
+ adobeDCView.value
+ .previewFile(
+ {
+ content: {
+ location: {
+ url: props.pdfLink
+ }
+ },
+ metaData: { fileName: props.title }
  },
- metaData: { fileName: props.title }
- },
- {
- embedMode: 'FULL_WINDOW',
- showPrintPDF: true,
- showDownloadPDF: true,
- showAnnotationTools: false,
- viewMode: 'FIT_WIDTH'
- }
- );
+ {
+ embedMode: 'FULL_WINDOW',
+ showPrintPDF: true,
+ showDownloadPDF: true,
+ showAnnotationTools: false,
+ viewMode: 'FIT_WIDTH'
+ }
+ )
+ .then((viewer) =>
+ viewer.getAPIs().then((apis) => {
+ adobeApis.value = apis;
+ })
+ );
  } else if (props.filePromise) {
- adobeDCView.value.previewFile(
- {
- content: {
- promise: props.filePromise
+ adobeDCView.value
+ .previewFile(
+ {
+ content: {
+ promise: props.filePromise
+ },
+ metaData: { fileName: props.title }
  },
- metaData: { fileName: props.title }
- },
- {
- embedMode: 'FULL_WINDOW',
- showPrintPDF: true,
- showDownloadPDF: true,
- showAnnotationTools: false,
- viewMode: 'FIT_WIDTH'
- }
- );
+ {
+ embedMode: 'FULL_WINDOW',
+ showPrintPDF: true,
+ showDownloadPDF: true,
+ showAnnotationTools: false,
+ viewMode: 'FIT_WIDTH'
+ }
+ )
+ .then((viewer) =>
+ viewer.getAPIs().then((apis) => {
+ adobeApis.value = apis;
+ })
+ );
  }
  }
 });

diff --git a/...client/src/components/workflow/ops/model-from-equations/model-from-equations-operation.ts b/...client/src/components/workflow/ops/model-from-equations/model-from-equations-operation.ts
@@ -7,6 +7,7 @@ const DOCUMENTATION_URL =
 
 export interface EquationBlock {
  text: string;
+ pageNumber?: number;
  extractionError?: boolean;
 }
 export interface EquationFromImageBlock extends DocumentExtraction {
@@ -21,7 +22,7 @@ export function instanceOfEquationFromImageBlock(
 }
 
 export interface ModelFromEquationsState {
- equations: AssetBlock<EquationBlock | EquationFromImageBlock>[];
+ equations: AssetBlock<EquationBlock>[];
  text: string;
  modelFramework: string;
  modelId: string | null;

diff --git a/.../src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue b/.../src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue
@@ -10,7 +10,7 @@
  <tera-slider-panel v-model:is-open="isDocViewerOpen" header="Document Viewer" content-width="100%">
  <template #content>
  <tera-drilldown-section :is-loading="isFetchingPDF">
- <tera-pdf-embed v-if="pdfLink" :pdf-link="pdfLink" :title="document?.name || ''" />
+ <tera-pdf-embed ref="pdfViewer" v-if="pdfLink" :pdf-link="pdfLink" :title="document?.name || ''" />
  <tera-text-editor v-else-if="docText" :initial-text="docText" />
  </tera-drilldown-section>
  </template>
@@ -39,17 +39,16 @@
  </header>
  <h6 class="py-3">Use {{ includedEquations.length > 1 ? 'these equations' : 'this equation' }}</h6>
  <ul class="blocks-container">
- <li
- v-for="(equation, i) in includedEquations"
- :key="i"
- @click.capture="selectItem(equation.name, $event)"
- >
+ <li v-for="(equation, i) in includedEquations" :key="i" @click.capture="selectItem(equation, $event)">
  <tera-asset-block
  :is-toggleable="false"
  :is-permitted="false"
  :use-default-style="false"
  :class="['asset-panel', { selected: selectedItem === equation.name }]"
  >
+ <template #header>
+ <h6>{{ equation.name }} - Page({{ equation.asset.pageNumber }})</h6>
+ </template>
  <section>
  <Checkbox
  v-model="equation.includeInProcess"
@@ -78,17 +77,16 @@
  </ul>
  <h6 class="py-3">Other equations extracted from document</h6>
  <ul class="blocks-container">
- <li
- v-for="(equation, i) in notIncludedEquations"
- :key="i"
- @click.capture="selectItem(equation.name, $event)"
- >
+ <li v-for="(equation, i) in notIncludedEquations" :key="i" @click.capture="selectItem(equation, $event)">
  <tera-asset-block
  :is-toggleable="false"
  :is-permitted="false"
  :use-default-style="false"
  :class="['asset-panel', { selected: selectedItem === equation.name }]"
  >
+ <template #header>
+ <h6>{{ equation.name }} - Page({{ equation.asset.pageNumber }})</h6>
+ </template>
  <section>
  <Checkbox
  class="flex-shrink-0"
@@ -204,10 +202,16 @@ const includedEquations = computed(() =>
 const notIncludedEquations = computed(() =>
  clonedState.value.equations.filter((equation) => equation.includeInProcess === false)
 );
+
+const pdfViewer = ref();
+
 const selectedItem = ref('');
 
-const selectItem = (item, event) => {
- selectedItem.value = item;
+const selectItem = (equation, event) => {
+ selectedItem.value = equation.name;
+ if (pdfViewer.value) {
+ pdfViewer.value.goToPage(equation.asset.pageNumber);
+ }
 
  // Prevent the child’s click handler from firing
  event.stopImmediatePropagation();
@@ -257,17 +261,17 @@ onMounted(async () => {
  }
  }
  isFetchingPDF.value = false;
-
  const state = cloneDeep(props.node.state);
  if (state.equations.length) return;
 
  if (document.value?.metadata?.equations) {
- documentEquations.value = document.value.metadata.equations.flatMap((page) =>
+ documentEquations.value = document.value.metadata.equations.flatMap((page, index) =>
  page.map((equation) => {
  const asset: AssetBlock<EquationBlock> = {
  name: 'Equation',
  includeInProcess: false,
  asset: {
+ pageNumber: index + 1,
  text: equation
  }
  };
@@ -279,7 +283,7 @@ onMounted(async () => {
  clonedState.value.equations = documentEquations.value.map((e, index) => ({
  name: `${e.name} ${index}`,
  includeInProcess: e.includeInProcess,
- asset: { text: e.asset.text }
+ asset: { text: e.asset.text, pageNumber: e.asset.pageNumber }
  }));
 
  state.equations = clonedState.value.equations;
@@ -417,10 +421,6 @@ watch(
 </script>
 
 <style scoped>
-:deep(.p-panel-header) {
- display: none;
-}
-
 .no-extract-equation {
  padding: var(--gap-4);
  background: var(--surface-disabled);
@@ -481,9 +481,12 @@ watch(
  overflow-y: auto;
 }
 
+/* PrimeVue Override */
+
 .p-panel {
  box-shadow: none;
 }
+
 .p-panel:deep(.p-panel-footer) {
  display: none;
 }