UI declutter stepper (#2013)

* stepper ui changes

* refine in background when done extracting

* fix updating person & drop temp tables manually

* move refine reload logic to mining panel

* await function  refineReloadContacts

* remove async keyword

* ui changes: remove title, remove button, bigger title,

* remove unused code

Author: malek10xdev

frontend/src/components/Mining/MiningStepper.vue

@@ -5,16 +5,7 @@
         severity="secondary"
         unstyled
         @click="collapsePanel = !collapsePanel"
-      >
-        <span class="font-semibold flex items-center gap-2">
-          <i
-            v-if="collapsePanel && $leadminerStore.activeTask"
-            v-tooltip.top="spinnerText"
-            class="pi pi-spin pi-spinner text-lg"
-          />
-          {{ t('mine_contacts') }}
-        </span>
-      </Button>
+      />
     </template>
     <Stepper v-model:value="$stepper.index" linear>
       <StepList>
@@ -94,20 +85,6 @@ const sourcePanel = ref<InstanceType<typeof SourcePanel>>();
 
 const { error, provider } = $route.query;
 
-const spinnerText = computed(() => {
-  if (!(collapsePanel.value && $leadminerStore.activeTask)) return undefined;
-  if ($leadminerStore.miningTask !== undefined) {
-    return t('mining');
-  }
-  if ($leadminerStore.isLoadingBoxes) {
-    return t('retrieving_mailboxes');
-  }
-  if (!$leadminerStore.cleaningFinished) {
-    return t('cleaning');
-  }
-  return undefined;
-});
-
 onNuxtReady(() => {
   if (provider && error === 'oauth-consent') {
     const newQuery = { ...useRoute().query };

frontend/src/components/Mining/StepperPanels/MinePanel.vue

@@ -142,6 +142,7 @@ const source = computed(() => (miningSource ? 'boxes' : 'file'));
 const $toast = useToast();
 const $stepper = useMiningStepper();
 const $leadminerStore = useLeadminerStore();
+const $contactsStore = useContactsStore();
 
 const AVERAGE_EXTRACTION_RATE =
   parseInt(useRuntimeConfig().public.AVERAGE_EXTRACTION_RATE) || 130;
@@ -224,7 +225,20 @@ onMounted(async () => {
   }
 });
 
-watch(extractionFinished, (finished) => {
+async function refineReloadContacts() {
+  /**
+   * Disable realtime; protects table from rendering multiple times
+   */
+  await $contactsStore.unsubscribeFromRealtimeUpdates();
+  await $contactsStore.refineContacts();
+  await $contactsStore.reloadContacts();
+  /**
+   * Subscribe again after the table is rendered
+   */
+  $contactsStore.subscribeToRealtimeUpdates();
+}
+
+watch(extractionFinished, async (finished) => {
   if (canceled.value) {
     $toast.add({
       severity: 'success',
@@ -233,6 +247,7 @@ watch(extractionFinished, (finished) => {
       life: 3000,
     });
     $stepper.next();
+    await refineReloadContacts();
   } else if (finished) {
     $toast.add({
       severity: 'success',
@@ -244,6 +259,7 @@ watch(extractionFinished, (finished) => {
       life: 5000,
     });
     $stepper.next();
+    await refineReloadContacts();
   }
 });
 

frontend/src/components/Mining/StepperPanels/SourcePanel.vue

@@ -1,54 +1,60 @@
 <template>
-  <div class="flex flex-col min-[1129px]:flex-row gap-2">
-    <div
-      v-if="sourceOptions.length"
-      class="w-full min-[1129px]:w-1/2 flex flex-col gap-3"
-    >
-      <p>{{ t('pick_existing_email') }}</p>
-      <div class="flex flex-col min-[1129px]:flex-row gap-2">
-        <Select
-          v-model="sourceModel"
-          :options="sourceOptions"
-          class="flex-grow min-w-0"
-          option-label="email"
-          :placeholder="t('email_address')"
-          :pt="{
-            trigger: {
-              class: 'text-indigo-500 ',
-            },
-            input: {
-              class: 'text-indigo-500 ',
-            },
-            root: {
-              class: 'border-[#bcbdf9] ',
-            },
-          }"
+  <div class="flex flex-col items-center space-y-6 p-6">
+    <span class="text-xl">{{ t('title') }}</span>
+
+    <template v-if="!showOtherSources">
+      <Select
+        v-model="sourceModel"
+        :options="sourceOptions"
+        class="w-full max-w-lg"
+        option-label="email"
+        :placeholder="t('email_address')"
+        :pt="{
+          trigger: { class: 'text-indigo-500' },
+          input: { class: 'text-indigo-500' },
+          root: { class: 'border-[#bcbdf9]' },
+        }"
+      >
+        <template #value="{ value }">
+          <div class="flex items-center space-x-2">
+            <i :class="getIcon(value?.type)" class="text-secondary text-sm"></i>
+            <span>{{ value?.email }}</span>
+          </div>
+        </template>
+
+        <template #option="{ option }">
+          <div class="flex items-center space-x-2">
+            <i :class="getIcon(option.type)" class="text-secondary text-sm"></i>
+            <span>{{ option.email }}</span>
+          </div>
+        </template>
+      </Select>
+
+      <div class="flex flex-col min-[1129px]:flex-row gap-2 w-full max-w-lg">
+        <Button
+          id="mine-source"
+          class="w-full"
+          severity="secondary"
+          :disabled="!sourceModel"
+          :label="t('mine_new_source')"
+          outlined
+          @click="showOtherSources = true"
         />
         <Button
           id="extract-source"
-          :disabled="!sourceModel"
+          class="w-full"
           severity="contrast"
-          class="font-semibold flex-shrink-0"
+          :disabled="!sourceModel"
           :label="t('extract_contacts')"
-          @click="extractContacts()"
+          @click="extractContacts"
         />
       </div>
-    </div>
-    <template v-if="sourceOptions.length">
-      <Separator
-        layout="vertical"
-        :content="$t('common.or')"
-        class="hidden min-[1129px]:flex"
-      />
-      <Separator
-        layout="horizontal"
-        :content="$t('common.or')"
-        class="flex min-[1129px]:hidden"
-      />
     </template>
-    <div class="shrink flex flex-col gap-3">
-      <span>{{ t('mine_from') }}</span>
-      <div class="flex flex-col min-[1129px]:flex-row gap-2 flex-wrap">
+
+    <template v-else>
+      <div
+        class="flex flex-col min-[1129px]:flex-row flex-wrap gap-2 w-full max-w-4xl justify-center"
+      >
         <oauth-source icon="pi pi-google" label="Google" source="google" />
         <oauth-source
           icon="pi pi-microsoft"
@@ -61,14 +67,14 @@
         />
         <Button
           id="import-file"
-          outlined
           icon="pi pi-upload"
           :label="t('import_csv_excel')"
+          outlined
           @click="importFileDialogRef.openModal()"
         />
         <importFileDialog ref="importFileDialogRef" />
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -90,7 +96,7 @@ const $leadminerStore = useLeadminerStore();
 const $imapDialogStore = useImapDialog();
 const sourceModel = ref<MiningSource | undefined>();
 const sourceOptions = computed(() => useLeadminerStore().miningSources);
-
+const showOtherSources = ref(false);
 const { source } = useRoute().query;
 
 function onSourceChange(miningSource: MiningSource) {
@@ -105,6 +111,17 @@ function extractContacts() {
   }
 }
 
+function getIcon(type: string) {
+  switch (type) {
+    case 'google':
+      return 'pi pi-google';
+    case 'azure':
+      return 'pi pi-microsoft';
+    default:
+      return 'pi pi-inbox';
+  }
+}
+
 onMounted(async () => {
   try {
     await $leadminerStore.fetchMiningSources();
@@ -146,17 +163,19 @@ defineExpose({
 <i18n lang="json">
 {
   "en": {
-    "pick_existing_email": "Pick an existing email address to mine",
-    "mine_from": "Mine your contacts from",
+    "title": "Mine contacts from",
+    "mine_existing_source": "Mine from existing source",
+    "mine_new_source": "Mine from another source",
     "fetch_sources_failed": "Failed to fetch mining sources",
     "email_address": "email address",
     "extract_contacts": "Extract contacts",
     "microsoft_or_outlook": "Microsoft or Outlook",
     "import_csv_excel": "Import CSV or Excel"
   },
   "fr": {
-    "pick_existing_email": "Choisissez une adresse e-mail existante pour l’extraction",
-    "mine_from": "Extraire vos contacts depuis",
+    "title": "Extraire des contacts depuis",
+    "mine_existing_source": "Extraire depuis une source existante",
+    "mine_new_source": "Extraire depuis une autre source",
     "fetch_sources_failed": "Échec de la récupération des sources de minage",
     "email_address": "adresse e-mail",
     "extract_contacts": "Extraire les contacts",

frontend/src/components/Mining/Table/MiningTable.vue

@@ -784,32 +784,13 @@ function onFilter(event: DataTableFilterEvent) {
   filteredContacts.value = event.filteredValue;
 }
 
-watch(activeMiningTask, async (isActive) => {
+watch(activeMiningTask, (isActive) => {
   if (isActive) {
     $leadminerStore.cleaningFinished = false;
     filtersStore.clearFilter();
   } else {
-    isLoading.value = true;
-    /**
-     * Disable realtime; protects table from rendering multiple times
-     */
-    await $contactsStore.unsubscribeFromRealtimeUpdates();
-
-    loadingLabel.value = t('refining_contacts');
-    await $contactsStore.refineContacts();
-
-    loadingLabel.value = t('syncing');
-    await $contactsStore.reloadContacts();
-
-    filtersStore.toggleFilters();
-
-    isLoading.value = false;
     $leadminerStore.cleaningFinished = true;
-
-    /**
-     * Subscribe again after the table is rendered
-     */
-    $contactsStore.subscribeToRealtimeUpdates();
+    filtersStore.toggleFilters();
   }
 });
 

supabase/migrations/20250122185859_optimize_refine_persons.sql

@@ -90,6 +90,14 @@ BEGIN
         LEFT JOIN real_names pn ON ea.person_email = pn.person_email
         JOIN grouped_tags gt ON ea.person_email = gt.email;
 
+    UPDATE private.persons
+    SET
+        name = cd.name,
+        alternate_name = cd.alternate_name,
+        alternate_email = cd.alternate_email
+    FROM combined_data cd
+    WHERE private.persons.email = cd.person_email;
+
     INSERT INTO private.refinedpersons (
         user_id, email, occurrence, recency, seniority,
         sender, recipient, conversations, replied_conversations, tags
@@ -116,5 +124,13 @@ BEGIN
         conversations = EXCLUDED.conversations,
         replied_conversations = EXCLUDED.replied_conversations,
         tags = EXCLUDED.tags;
+    
+    -- Drop temp tables after function execution
+    DROP TABLE IF EXISTS user_points_of_contact;
+    DROP TABLE IF EXISTS grouped_tags;
+    DROP TABLE IF EXISTS name_aggregates;
+    DROP TABLE IF EXISTS real_names;
+    DROP TABLE IF EXISTS email_aggregates;
+    DROP TABLE IF EXISTS combined_data;
 END;
 $$;