Fix Sentry DSN loading on frontends

bperel · bperel · commit be2e2e01d28f · 2025-08-14T20:21:46.000+02:00
Fix Bootstrap tabs v-model
dumili: Properly remove suggestions from previous OCR and sstory search results
dumili: WIP show story search results in tooltip
diff --git a/apps/duckguessr/src/main.ts b/apps/duckguessr/src/main.ts
@@ -41,10 +41,10 @@ const app = createApp(App)
 
 app.mount("#app");
 
-if (process.env.SENTRY_DSN) {
+if (import.meta.env.VITE_SENTRY_DSN) {
   Sentry.init({
     app,
-    dsn: "https://a225a6550b8c4c07914327618685a61c@sentry.ducksmanager.net/1385898",
+    dsn: import.meta.env.VITE_SENTRY_DSN,
     integrations: [
       Sentry.browserTracingIntegration({ router }),
       Sentry.replayIntegration(),
diff --git a/apps/dumili/.eslintrc-auto-import.json b/apps/dumili/.eslintrc-auto-import.json
@@ -36,6 +36,7 @@
     "IssueWithPublicationcodeOptionalId": true,
     "MaybeRef": true,
     "MaybeRefOrGetter": true,
+    "MedalLevels": true,
     "MedalPointsPerUser": true,
     "ModelSteps": true,
     "PropType": true,
diff --git a/apps/dumili/api/prisma/schema.prisma b/apps/dumili/api/prisma/schema.prisma
@@ -207,8 +207,8 @@ model aiStorySuggestion {
   id                         Int                         @id @default(autoincrement())
   ocrPossibleStoryId         Int?                        @unique(map: "ai_ocr_possible_story_id_unique") @map("ocr_possible_story_id")
   storySearchPossibleStoryId Int?                        @unique(map: "ai_story_search_possible_story_id_unique") @map("story_search_possible_story_id")
-  aiOcrPossibleStory         aiOcrPossibleStory?         @relation(fields: [ocrPossibleStoryId], references: [id], onDelete: Restrict, onUpdate: Restrict, map: "ai_story_suggestion_ai_ocr_possible_story_id_fk")
-  aiStorySearchPossibleStory aiStorySearchPossibleStory? @relation(fields: [storySearchPossibleStoryId], references: [id], onDelete: Restrict, onUpdate: Restrict, map: "ai_story_suggestion_ai_story_search_possible_story_id_fk")
+  aiOcrPossibleStory         aiOcrPossibleStory?         @relation(fields: [ocrPossibleStoryId], references: [id], onDelete: Cascade, onUpdate: Restrict, map: "ai_story_suggestion_ai_ocr_possible_story_id_fk")
+  aiStorySearchPossibleStory aiStorySearchPossibleStory? @relation(fields: [storySearchPossibleStoryId], references: [id], onDelete: Cascade, onUpdate: Restrict, map: "ai_story_suggestion_ai_story_search_possible_story_id_fk")
   storySuggestions           storySuggestion[]
 
   @@map("ai_story_suggestion")
diff --git a/apps/dumili/api/services/indexation/index.ts b/apps/dumili/api/services/indexation/index.ts
@@ -237,30 +237,69 @@ const createAiStorySuggestions = async (
           if ("error" in results) {
             console.error(results.error);
           } else {
-            const newAiResultId =
+            let aiResultId =
               (
                 await prisma.image.findUnique({
                   where: {
                     id: firstPageOfEntry.image.id,
                   },
                 })
-              )?.[`${field}Id`] ??
-              (
-                await (
-                  prisma[field] as unknown as {
-                    create: typeof prisma.aiOcrResult.create;
-                  }
-                ).create({
-                  data: {},
-                })
-              ).id;
+              )?.[`${field}Id`];
+
+            if (aiResultId) {
+              if (field === "aiOcrResult") {
+                await prisma.storySuggestion.deleteMany({
+                  where: {
+                    aiStorySuggestion: {
+                      aiOcrPossibleStory: {
+                        resultId: aiResultId,
+                      },
+                    },
+                  },
+                });
+                await prisma.aiOcrPossibleStory.deleteMany({
+                  where: {
+                    resultId: aiResultId,
+                  },
+                });
+              } else {
+                await prisma.storySuggestion.deleteMany({
+                  where: {
+                    aiStorySuggestion: {
+                      aiStorySearchPossibleStory: {
+                        resultId: aiResultId,
+                      },
+                    },
+                  },
+                });
+                await prisma.aiStorySearchPossibleStory.deleteMany({
+                  where: {
+                    resultId: aiResultId,
+                  },
+                });
+              }
+            } else {
+              if (field === "aiOcrResult") {
+                aiResultId = (
+                  await prisma.aiOcrResult.create({
+                    data: {},
+                  })
+                ).id;
+              } else {
+                aiResultId = (
+                  await prisma.aiStorySearchResult.create({
+                    data: {},
+                  })
+                ).id;
+              }
+            }
 
             await prisma.image.update({
               where: {
                 id: firstPageOfEntry.image.id,
               },
               data: {
-                [`${field}Id`]: newAiResultId,
+                [`${field}Id`]: aiResultId,
               },
             });
             if (!results.stories.length) {
@@ -294,7 +333,7 @@ const createAiStorySuggestions = async (
                             [field]: {
                               // aiOcrResult or aiStorySearchResult
                               connect: {
-                                id: newAiResultId,
+                                id: aiResultId,
                               },
                             },
                             score: story.score,
diff --git a/apps/dumili/src/components/suggestions/StorySuggestionsTooltip.vue b/apps/dumili/src/components/suggestions/StorySuggestionsTooltip.vue
@@ -44,53 +44,44 @@
           show-empty
           :empty-text="$t('Aucun texte détecté')"
         />
-        <h4>{{ $t("Histoires potentielles") }}</h4>
-        <template v-if="firstPageStorySearchResult">
-          <b-table
-            :fields="[
-              { key: 'storycode', label: $t('Code histoire') },
-              { key: 'title', label: $t('Titre') },
-            ]"
-            show-empty
-            :empty-text="$t('Aucune histoire trouvée')"
-            :items="
-              firstPageStorySearchResult.stories
-                .filter(
-                  (
-                    possibleStory
-                  ): possibleStory is typeof possibleStory & {
-                    aiStorySuggestion: {
-                      storySuggestion: { storycode: string };
-                    };
-                  } => !!possibleStory.aiStorySuggestion?.storySuggestion
-                )
-                .map(
-                  ({
-                    aiStorySuggestion: {
-                      storySuggestion: { storycode },
-                    },
-                  }) => ({
-                    storycode,
-                    title: storyDetails[storycode].title,
-                  })
-                )
-            "
-          >
-            <template #cell(storycode)="row">
-              <a
-                class="text-nowrap"
-                :href="`https://inducks.org/story.php?c=${encodeURIComponent(row.item.storycode)}`"
-                target="_blank"
-                >{{ row.item.storycode }}</a
-              ></template
-            ></b-table
-          ></template
-        ><template v-else>{{ $t("Non calculé") }}</template></template
-      >
-      <template v-else-if="!firstPage.image">{{
+      </template>
+      <template v-if="firstPageStorySearchResult">
+        <h4>{{ $t("Résultats de la recherche par image") }}</h4>
+        <b-table
+          :fields="[
+            { key: 'storycode', label: $t('Code histoire') },
+            { key: 'title', label: $t('Titre') },
+          ]"
+          show-empty
+          :empty-text="$t('Aucune histoire trouvée')"
+          :items="suggestedStories"
+        >
+          <template #cell(storycode)="row">
+            <a
+              class="text-nowrap"
+              :href="`https://inducks.org/story.php?c=${encodeURIComponent(row.item!.storycode)}`"
+              target="_blank"
+              >{{ row.item!.storycode }}</a
+            ></template
+          ><template #cell(title)="row">
+            {{ storyDetails[row.item!.storycode].title }}
+            <b-col
+              cols="6"
+              class="d-flex justify-content-center story-first-page"
+              :style="{
+            backgroundImage: `url(${inducksCoverRoot.replace('f_auto', 'c_crop,h_0.5,x_0,w_1') + storyUrls[row.item!.storycode]})`,
+          }"
+            >
+            </b-col>
+          </template> </b-table
+      ></template>
+      <template v-if="!firstPage.image">{{
         $t("Non calculé car la première page de l'entrée n'a pas d'image")
       }}</template>
-      <template v-else>{{ $t("Non calculé") }}</template></template
+      <template
+        v-else-if="!firstPageOcrResult && !firstPageStorySearchResult"
+        >{{ $t("Non calculé") }}</template
+      ></template
     ><template v-else>{{
       $t(
         "Aucune suggestion car cette entrée n'est pas une histoire ni une couverture.",
@@ -110,7 +101,8 @@ const { entry } = defineProps<{
 }>();
 
 const { indexation } = storeToRefs(suggestions());
-const { storyDetails } = storeToRefs(coa());
+const { storyUrls, storyDetails } = storeToRefs(coa());
+const { fetchStoryDetails } = coa();
 
 const { overlay } = storeToRefs(ui());
 
@@ -120,4 +112,33 @@ const firstPageOcrResult = computed(() => firstPage.value.image?.aiOcrResult);
 const firstPageStorySearchResult = computed(
   () => firstPage.value.image?.aiStorySearchResult,
 );
+
+const inducksCoverRoot = `https://res.cloudinary.com/${import.meta.env.VITE_CLOUDINARY_CLOUDNAME}/image/upload/f_auto/inducks-covers/`;
+
+const suggestedStories = computed(() =>
+  firstPageStorySearchResult.value?.stories
+    .map((possibleStory) =>
+      entry.storySuggestions.find(
+        ({ aiStorySuggestionId }) =>
+          aiStorySuggestionId === possibleStory.aiStorySuggestion?.id,
+      ),
+    )
+    .filter(
+      (
+        possibleStory,
+      ): possibleStory is typeof possibleStory & { storycode: string } =>
+        !!possibleStory,
+    ),
+);
+
+watch(
+  suggestedStories,
+  (value) => {
+    const storycodes = value?.map(({ storycode }) => storycode);
+    if (storycodes) {
+      fetchStoryDetails(storycodes);
+    }
+  },
+  { immediate: true },
+);
 </script>
diff --git a/apps/dumili/src/main.ts b/apps/dumili/src/main.ts
@@ -49,7 +49,7 @@ const app = createApp(App)
 
 app.mount("#app");
 
-if (process.env.SENTRY_DSN) {
+if (import.meta.env.VITE_SENTRY_DSN) {
   Sentry.init({
     app,
     dsn: process.env.VITE_SENTRY_DSN,
diff --git a/apps/dumili/src/pages/indexation/[id].vue b/apps/dumili/src/pages/indexation/[id].vue
@@ -13,7 +13,7 @@
       </b-col>
       <TextEditor v-else-if="activeTabIndex === 2" />
       <b-container class="start-0 bottom-0 mw-100 pt-2" style="height: 35px"
-        ><b-tabs v-model="activeTabIndex" tabs align="center"
+        ><b-tabs v-model:index="activeTabIndex" tabs align="center"
           ><b-tab
             v-for="{ id, label } of tabNames"
             :key="id"
@@ -111,8 +111,10 @@ watch(
   { immediate: true },
 );
 
-watch(activeTabIndex, (activeTabIndex) => {
-  router.push(`#${tabNames[activeTabIndex].id}`);
+watch(activeTabIndex, (value) => {
+  if (tabNames[value]) {
+    router.push(`#${tabNames[value].id}`);
+  }
 });
 </script>
 
diff --git a/apps/edgecreator/src/components/ModelEdit.vue b/apps/edgecreator/src/components/ModelEdit.vue
@@ -1,7 +1,7 @@
 <template>
   <b-card id="edit-card" no-body>
     <b-tabs
-      v-model="editingStepStore.stepNumber"
+      v-model:index="editingStepStore.stepNumber"
       lazy
       pills
       card
diff --git a/apps/web/src/components/BookcaseBook.vue b/apps/web/src/components/BookcaseBook.vue
@@ -53,7 +53,13 @@
             <h6 v-if="releaseDate">{{ $t("Sortie :") }} {{ releaseDate }}</h6>
             <h3>{{ $t("Table des matières") }}</h3>
           </template>
-          <b-tabs v-if="entries" v-model="currentTabIndex" pills card vertical>
+          <b-tabs
+            v-if="entries"
+            v-model:index="currentTabIndex"
+            pills
+            card
+            vertical
+          >
             <b-tab
               v-for="{
                 storycode,
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
@@ -48,7 +48,7 @@ const app = createApp(App)
 
 app.mount("#app");
 
-if (import.meta.env.SENTRY_DSN) {
+if (import.meta.env.VITE_SENTRY_DSN) {
   Sentry.init({
     integrations: [
       Sentry.vueIntegration({
@@ -60,7 +60,7 @@ if (import.meta.env.SENTRY_DSN) {
       }),
     ],
     app,
-    dsn: "https://a225a6550b8c4c07914327618685a61c@sentry.ducksmanager.net/1385898",
+    dsn: import.meta.env.VITE_SENTRY_DSN,
     tracesSampleRate: 1.0,
   });
 }
