From f131993947b2cfb9c20abc4e2668ea09e21b0f23 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Tue, 10 Dec 2024 16:49:59 -0400
Subject: [PATCH 01/10] FOUR-20534:Implement the improvements in Request and
 Cases

---
 .../Http/Controllers/CasesController.php      |  45 +++++-
 .../casesDetail/components/CaseDetail.vue     |   4 +-
 .../casesDetail/components/NewOverview.vue    | 138 ++++++++++++++++++
 .../cases/casesDetail/variables/index.js      |   4 +
 resources/views/cases/edit.blade.php          |  30 ++++
 5 files changed, 218 insertions(+), 3 deletions(-)
 create mode 100644 resources/jscomposition/cases/casesDetail/components/NewOverview.vue

diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
index 942c87ac95..550546fe00 100644
--- a/ProcessMaker/Http/Controllers/CasesController.php
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -10,9 +10,11 @@
 use ProcessMaker\Models\Screen;
 use ProcessMaker\Package\PackageComments\PackageServiceProvider;
 use ProcessMaker\ProcessTranslations\ScreenTranslation;
+use ProcessMaker\Traits\ProcessMapTrait;
 
 class CasesController extends Controller
 {
+    use ProcessMapTrait;
     /**
      * Get the list of requests.
      *
@@ -76,6 +78,45 @@ public function show($case_number)
         // Get the summary screen tranlations
         $this->summaryScreenTranslation($request);
 
+        // Load the process map
+        $processRequest = ProcessRequest::find($request->id);
+
+        $bpmn = $request->process->bpmn;
+        $filteredCompletedNodes = [];
+        $requestInProgressNodes = [];
+        $requestIdleNodes = [];
+
+        if ($processRequest) {
+            $requestCompletedNodes = $processRequest->tokens()
+                ->whereIn('status', ['CLOSED', 'COMPLETED', 'TRIGGERED'])
+                ->pluck('element_id');
+            $requestInProgressNodes = $processRequest->tokens()
+                ->whereIn('status', ['ACTIVE', 'INCOMING'])
+                ->pluck('element_id');
+            // Remove any node that is 'ACTIVE' from the completed list.
+            $filteredCompletedNodes = $requestCompletedNodes->diff($requestInProgressNodes)->values();
+
+            // Obtain In-Progress nodes that were completed before
+            $matchingNodes = $requestInProgressNodes->intersect($requestCompletedNodes);
+
+            // Get idle nodes.
+            $xml = $this->loadAndPrepareXML($bpmn);
+            $nodeIds = $this->getNodeIds($xml);
+            $requestIdleNodes = $nodeIds->diff($filteredCompletedNodes)->diff($requestInProgressNodes)->values();
+
+            // Add completed sequence flow to the list of completed nodes.
+            $sequenceFlowNodes = $this->getCompletedSequenceFlow($xml, $filteredCompletedNodes->implode(' '), $requestInProgressNodes->implode(' '), $matchingNodes->implode(' '));
+            $filteredCompletedNodes = $filteredCompletedNodes->merge($sequenceFlowNodes);
+        }
+       
+
+        $inflightData = [
+            'bpmn' => $bpmn,
+            'requestCompletedNodes' => $filteredCompletedNodes,
+            'requestInProgressNodes' => $requestInProgressNodes,
+            'requestIdleNodes' => $requestIdleNodes,
+            'requestId' => $request->process->id,
+        ];
         // Return the view
         return view('cases.edit', compact(
             'request',
@@ -85,7 +126,9 @@ public function show($case_number)
             'canViewComments',
             'canPrintScreens',
             'isProcessManager',
-            'manager'
+            'manager',
+            'bpmn',
+            'inflightData',
         ));
     }
 
diff --git a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
index ca952c0614..ab03e9e023 100644
--- a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
+++ b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
@@ -13,7 +13,7 @@ import RequestTable from "./RequestTable.vue";
 import TabHistory from "./TabHistory.vue";
 import CompletedForms from "./CompletedForms.vue";
 import TabFiles from "./TabFiles.vue";
-import Overview from "./Overview.vue";
+import Overview from "./NewOverview.vue";
 import TabSummary from "./TabSummary.vue";
 import ErrorsTab from "./ErrorsTab.vue";
 import { getRequestCount, getRequestStatus, isErrors } from "../variables/index";
@@ -67,7 +67,7 @@ const tabs = [
     name: translate.t("Summary"),
     href: "#summary",
     current: "summary",
-    show: getRequestStatus() !== 'ERROR',
+    show: getRequestStatus() !== "ERROR",
     content: TabSummary,
   },
   {
diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
new file mode 100644
index 0000000000..84d99310b2
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -0,0 +1,138 @@
+<template>
+  <div
+    class="tw-w-full tw-h-full tw-overflow-hidden tw-relative"
+    data-test="body-container"
+  >
+    <ProcessMapTooltip
+      v-show="showTooltip"
+      ref="tooltipRef"
+      :enabled="enableTooltip"
+      :node-id="tooltip.nodeId"
+      :node-name="tooltip.nodeName"
+      :request-id="inflightData.requestId"
+      :style="{
+        left: `${tooltip.newX}px`,
+        top: `${tooltip.newY}px`
+      }"
+      @is-loading="isTooltipLoading"
+    />
+    <transition
+      name="fade"
+      mode="in-out"
+    >
+      <Modeler
+        ref="modelerRef"
+        :key="keyModeler"
+        :decorations="decorations"
+        :request-completed-nodes="inflightData.requestCompletedNodes"
+        :request-in-progress-nodes="inflightData.requestInProgressNodes"
+        :request-idle-nodes="inflightData.requestIdleNodes"
+        :read-only="true"
+        @set-xml-manager="xmlManager = $event"
+        @click="handleClick"
+      />
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref, watchEffect, onMounted, computed, nextTick, onBeforeUnmount,
+} from "vue";
+import { Modeler } from "@processmaker/modeler";
+import ProcessMapTooltip from "../../../../js/processes/modeler/components/ProcessMapTooltip.vue";
+import { getInflightData } from "../variables";
+
+const keyModeler = ref(Math.random());
+const modelerRef = ref("");
+const tooltipRef = ref(null);
+const enableTooltip = ref(true);
+const decorations = ref({
+  borderOutline: {},
+});
+const xmlManager = ref();
+const tooltip = ref({
+  isActive: false,
+  isLoading: false,
+  nodeId: null,
+  nodeName: null,
+  allowedNodes: [
+    "bpmn:Task",
+    "bpmn:ManualTask",
+    "bpmn:SequenceFlow",
+    "bpmn:ScriptTask",
+    "bpmn:CallActivity",
+    "bpmn:ServiceTask",
+  ],
+  coordinates: { x: 0, y: 0 },
+  newX: 0,
+  newY: 0,
+});
+const inflightData = ref(getInflightData());
+
+const isMappingActive = computed(() => (window.ProcessMaker.modeler.enableProcessMapping !== undefined
+  ? window.ProcessMaker.modeler.enableProcessMapping
+  : true));
+
+const showTooltip = computed(() => enableTooltip.value && tooltip.value.isActive);
+
+const calculateTooltipPosition = () => {
+  const rectTooltip = tooltipRef.value.$el.getBoundingClientRect();
+  tooltip.value.newY = tooltip.value.coordinates.y - rectTooltip.height - 20;
+  if (tooltip.value.newY <= 0) {
+    tooltip.value.newY = 10;
+  }
+  tooltip.value.newX = tooltip.value.coordinates.x - (rectTooltip.width / 2);
+  if (tooltip.value.newX < 0) {
+    tooltip.value.newX = 0;
+  } else if (tooltip.value.newX + rectTooltip.width > window.innerWidth) {
+    tooltip.value.newX = window.innerWidth - rectTooltip.width;
+  }
+};
+
+const setupTooltip = ({ event, node }) => {
+  const isNodeTooltipAllowed = tooltip.value.allowedNodes.includes(node.$type);
+  if ((isNodeTooltipAllowed && !tooltip.value.isActive)
+    || (isNodeTooltipAllowed && tooltip.value.nodeId !== node.id)) {
+    tooltip.value.nodeId = node.id;
+    tooltip.value.nodeName = node.name;
+    tooltip.value.isActive = true;
+    nextTick(() => {
+      tooltip.value.coordinates = { x: event.clientX, y: event.clientY };
+      calculateTooltipPosition();
+    });
+  } else if (tooltip.value.nodeId === node.id && tooltip.value.isActive) {
+    tooltip.value.isActive = false;
+  }
+};
+
+const isTooltipLoading = (value) => {
+  tooltip.value.isLoading = value;
+};
+
+const handleClick = (payload) => {
+  if (isMappingActive.value) {
+    setupTooltip(payload);
+  }
+};
+
+watchEffect(() => {
+  if (!tooltip.value.isLoading) {
+    nextTick(() => {
+      calculateTooltipPosition();
+    });
+  }
+});
+
+onMounted(() => {
+  ProcessMaker.$modeler = modelerRef.value;
+});
+
+onBeforeUnmount(() => {
+  console.log("unmounted");
+  ProcessMaker.$modeler = null;
+  modelerRef.value?.$destroy();
+  modelerRef.value = null;
+  tooltipRef.value = null;
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/variables/index.js b/resources/jscomposition/cases/casesDetail/variables/index.js
index 00d1a3d564..ad960a1ffb 100644
--- a/resources/jscomposition/cases/casesDetail/variables/index.js
+++ b/resources/jscomposition/cases/casesDetail/variables/index.js
@@ -21,3 +21,7 @@ export const getRequestCount = () => requestCount;
 export const getErrors = () => errorLogs;
 
 export const isErrors = () => request.status === "ERROR";
+
+export const getInflightData = () => inflightData;
+
+export const getXML = () => inflightData.bpmn;
diff --git a/resources/views/cases/edit.blade.php b/resources/views/cases/edit.blade.php
index 9832c8ea9d..9058c18fa5 100644
--- a/resources/views/cases/edit.blade.php
+++ b/resources/views/cases/edit.blade.php
@@ -118,6 +118,16 @@ class="tw-grow tw-overflow-hidden"
 @endsection
 
 @section('js')
+<script src="{{ mix('js/processes/modeler/initialLoad.js') }}"></script>
+<script>
+  window.ProcessMaker.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+  window.Processmaker = {
+        csrfToken: "{{csrf_token()}}",
+        userId: "{{\Auth::user()->id}}",
+        messages: [],
+        apiTimeout: {{config('app.api_timeout')}}
+      };
+</script>
   <script>
     const data = @json($request->getRequestData());
     const requestId = @json($request->getKey());
@@ -129,6 +139,26 @@ class="tw-grow tw-overflow-hidden"
     const canViewComments = @json($canViewComments);
     const comentable_type = @json(get_class($request));
     const requestCount = @json($requestCount);
+    const inflightData = @json($inflightData);
+
+    window.ProcessMaker.modeler = {
+      xml: @json($bpmn),
+      configurables: [],
+      requestCompletedNodes: inflightData.requestCompletedNodes,
+      requestInProgressNodes: inflightData.requestInProgressNodes,
+      requestIdleNodes: inflightData.requestIdleNodes,
+      requestId: inflightData.requestId,
+    }
+
+    window.ProcessMaker.EventBus.$on('modeler-start', ({
+      loadXML
+    }) => {
+      loadXML(window.ProcessMaker.modeler.xml);
+    });
+
+    window.PM4ConfigOverrides = {
+      requestFiles: @json($request->requestFiles())
+    };
   </script>
   
   @if (hasPackage('package-files'))

From 901b61bb14615ad3aa92cebb04797c4be13fb6d4 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 11 Dec 2024 15:51:54 -0400
Subject: [PATCH 02/10] add to Requests

---
 .../Http/Controllers/RequestController.php    | 43 +++++++++++++
 resources/views/requests/show.blade.php       | 60 +++++++++++--------
 2 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/ProcessMaker/Http/Controllers/RequestController.php b/ProcessMaker/Http/Controllers/RequestController.php
index 91b9934bf0..69bee03b29 100644
--- a/ProcessMaker/Http/Controllers/RequestController.php
+++ b/ProcessMaker/Http/Controllers/RequestController.php
@@ -28,6 +28,7 @@
 use ProcessMaker\ProcessTranslations\ScreenTranslation;
 use ProcessMaker\RetryProcessRequest;
 use ProcessMaker\Traits\HasControllerAddons;
+use ProcessMaker\Traits\ProcessMapTrait;
 use ProcessMaker\Traits\SearchAutocompleteTrait;
 use Spatie\MediaLibrary\MediaCollections\Models\Media;
 
@@ -35,6 +36,7 @@ class RequestController extends Controller
 {
     use SearchAutocompleteTrait;
     use HasControllerAddons;
+    use ProcessMapTrait;
 
     /**
      * Get the list of requests.
@@ -182,6 +184,45 @@ public function show(ProcessRequest $request, Media $mediaItems)
         }
         $this->summaryScreenTranslation($request);
 
+        //Load the process map
+        $processRequest = ProcessRequest::find($request->id);
+        $bpmn = $request->process->bpmn;
+        $filteredCompletedNodes = [];
+        $requestInProgressNodes = [];
+        $requestIdleNodes = [];
+
+        if ($processRequest) {
+            $requestCompletedNodes = $processRequest->tokens()
+                ->whereIn('status', ['CLOSED', 'COMPLETED', 'TRIGGERED'])
+                ->pluck('element_id');
+            $requestInProgressNodes = $processRequest->tokens()
+                ->whereIn('status', ['ACTIVE', 'INCOMING'])
+                ->pluck('element_id');
+            // Remove any node that is 'ACTIVE' from the completed list.
+            $filteredCompletedNodes = $requestCompletedNodes->diff($requestInProgressNodes)->values();
+
+            // Obtain In-Progress nodes that were completed before
+            $matchingNodes = $requestInProgressNodes->intersect($requestCompletedNodes);
+
+            // Get idle nodes.
+            $xml = $this->loadAndPrepareXML($bpmn);
+            $nodeIds = $this->getNodeIds($xml);
+            $requestIdleNodes = $nodeIds->diff($filteredCompletedNodes)->diff($requestInProgressNodes)->values();
+
+            // Add completed sequence flow to the list of completed nodes.
+            $sequenceFlowNodes = $this->getCompletedSequenceFlow($xml, $filteredCompletedNodes->implode(' '), $requestInProgressNodes->implode(' '), $matchingNodes->implode(' '));
+            $filteredCompletedNodes = $filteredCompletedNodes->merge($sequenceFlowNodes);
+        }
+       
+
+        $inflightData = [
+            'bpmn' => $bpmn,
+            'requestCompletedNodes' => $filteredCompletedNodes,
+            'requestInProgressNodes' => $requestInProgressNodes,
+            'requestIdleNodes' => $requestIdleNodes,
+            'requestId' => $request->process->id,
+        ];
+
         if (isset($_SERVER['HTTP_USER_AGENT']) && MobileHelper::isMobile($_SERVER['HTTP_USER_AGENT'])) {
             return view('requests.showMobile', compact(
                 'request',
@@ -217,6 +258,8 @@ public function show(ProcessRequest $request, Media $mediaItems)
             'eligibleRollbackTask',
             'errorTask',
             'userConfiguration',
+            'bpmn',
+            'inflightData',
         ));
     }
 
diff --git a/resources/views/requests/show.blade.php b/resources/views/requests/show.blade.php
index 3df5f3402d..89bd65eadf 100644
--- a/resources/views/requests/show.blade.php
+++ b/resources/views/requests/show.blade.php
@@ -235,32 +235,12 @@ class="tab-pane card card-body border-top-0 p-3">
                 </div>
                 <div v-if="activeTab === 'overview'" class="tab-pane fade p-0" id="overview" role="tabpanel"
                   aria-labelledby="overview-tab">
-                  <div class="card" style="border-top: none !important;">
+                  <div class="card card-height" style="border-top: none !important;">
                     <div class="card-body">
                       <h4>
                         {{ __(':name In-Flight Map', ['name' => $request->process->name]) }}
                       </h4>
-                      <div v-if="isObjectLoading" class="d-flex justify-content-center">
-                        <div class="spinner-border text-primary" role="status"></div>
-                      </div>
-                      <div :class="{ 'hidden': isObjectLoading }">
-                        <object ref="processMap" class="card"
-                          data="{{ route('modeler.inflight', [
-                            'process' => $request->process->id,
-                            'request' => $request->id
-                          ]) }}"
-                          width="100%"
-                          :height="isObjectLoading ? 'auto' : '640px'"
-                          frameborder="0"
-                          type="text/html"
-                          style="border-radius: 4px;"
-                          @load="onLoadedObject">
-                          <!-- Accessible Alternative Content -->
-                          <p>
-                            {{ __('Content not available. Check settings or try a different device.') }}
-                          </p>
-                        </object>
-                      </div>
+                      <new-overview />
                     </div>
                   </div>
                 </div>
@@ -484,7 +464,16 @@ class="btn btn-outline-info btn-block"
   @foreach ($manager->getScripts() as $script)
     <script src="{{ $script }}"></script>
   @endforeach
-
+  <script src="{{ mix('js/processes/modeler/initialLoad.js') }}"></script>
+  <script>
+    window.ProcessMaker.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.Processmaker = {
+      csrfToken: "{{csrf_token()}}",
+      userId: "{{\Auth::user()->id}}",
+      messages: [],
+      apiTimeout: {{config('app.api_timeout')}}
+    };
+  </script>
   @if (hasPackage('package-files'))
     <!-- TODO: Replace with script injector like we do for modeler and screen builder -->
     <script src="{{ mix('js/manager.js', 'vendor/processmaker/packages/package-files') }}"></script>
@@ -529,7 +518,7 @@ class="btn btn-outline-info btn-block"
           packages: [],
           processId: @json($request->process->id),
           canViewComments: @json($canViewComments),
-          isObjectLoading: false,
+          isObjectLoading: true,
           showTree: false,
           showInfo: true,
           showMenu: true,
@@ -900,6 +889,23 @@ classStatusCard() {
       },
     });
   </script>
+  <script>
+    const inflightData = @json($inflightData);
+    window.ProcessMaker.modeler = {
+      xml: @json($bpmn),
+      configurables: [],
+      requestCompletedNodes: inflightData.requestCompletedNodes,
+      requestInProgressNodes: inflightData.requestInProgressNodes,
+      requestIdleNodes: inflightData.requestIdleNodes,
+      requestId: inflightData.requestId,
+    }
+  
+    window.ProcessMaker.EventBus.$on('modeler-start', async ({
+      loadXML
+    }) => {
+      loadXML(window.ProcessMaker.modeler.xml);
+    });
+  </script>
 @endsection
 
 @section('css')
@@ -962,5 +968,11 @@ classStatusCard() {
   .menu-tab-content {
     margin-left: -16px;
   }
+  .main-paper {
+    position: static !important;
+  }
+  .card-height {
+    height: 50vh;
+  }
 </style>
 @endsection

From 50b32df08e601a1f00685273450a562f65f46de4 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 12 Dec 2024 11:07:00 -0400
Subject: [PATCH 03/10] CR

---
 .../Http/Controllers/CasesController.php      | 40 +-----------------
 .../Http/Controllers/RequestController.php    | 39 +----------------
 ProcessMaker/Traits/ProcessMapTrait.php       | 42 +++++++++++++++++++
 .../casesDetail/components/NewOverview.vue    |  1 -
 4 files changed, 46 insertions(+), 76 deletions(-)

diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
index 550546fe00..c0476d984f 100644
--- a/ProcessMaker/Http/Controllers/CasesController.php
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -79,44 +79,8 @@ public function show($case_number)
         $this->summaryScreenTranslation($request);
 
         // Load the process map
-        $processRequest = ProcessRequest::find($request->id);
-
-        $bpmn = $request->process->bpmn;
-        $filteredCompletedNodes = [];
-        $requestInProgressNodes = [];
-        $requestIdleNodes = [];
-
-        if ($processRequest) {
-            $requestCompletedNodes = $processRequest->tokens()
-                ->whereIn('status', ['CLOSED', 'COMPLETED', 'TRIGGERED'])
-                ->pluck('element_id');
-            $requestInProgressNodes = $processRequest->tokens()
-                ->whereIn('status', ['ACTIVE', 'INCOMING'])
-                ->pluck('element_id');
-            // Remove any node that is 'ACTIVE' from the completed list.
-            $filteredCompletedNodes = $requestCompletedNodes->diff($requestInProgressNodes)->values();
-
-            // Obtain In-Progress nodes that were completed before
-            $matchingNodes = $requestInProgressNodes->intersect($requestCompletedNodes);
-
-            // Get idle nodes.
-            $xml = $this->loadAndPrepareXML($bpmn);
-            $nodeIds = $this->getNodeIds($xml);
-            $requestIdleNodes = $nodeIds->diff($filteredCompletedNodes)->diff($requestInProgressNodes)->values();
-
-            // Add completed sequence flow to the list of completed nodes.
-            $sequenceFlowNodes = $this->getCompletedSequenceFlow($xml, $filteredCompletedNodes->implode(' '), $requestInProgressNodes->implode(' '), $matchingNodes->implode(' '));
-            $filteredCompletedNodes = $filteredCompletedNodes->merge($sequenceFlowNodes);
-        }
-       
-
-        $inflightData = [
-            'bpmn' => $bpmn,
-            'requestCompletedNodes' => $filteredCompletedNodes,
-            'requestInProgressNodes' => $requestInProgressNodes,
-            'requestIdleNodes' => $requestIdleNodes,
-            'requestId' => $request->process->id,
-        ];
+        $inflightData = $this->loadProcessMap($request);
+        $bpmn = $inflightData['bpmn'];
         // Return the view
         return view('cases.edit', compact(
             'request',
diff --git a/ProcessMaker/Http/Controllers/RequestController.php b/ProcessMaker/Http/Controllers/RequestController.php
index 69bee03b29..0d55426666 100644
--- a/ProcessMaker/Http/Controllers/RequestController.php
+++ b/ProcessMaker/Http/Controllers/RequestController.php
@@ -185,43 +185,8 @@ public function show(ProcessRequest $request, Media $mediaItems)
         $this->summaryScreenTranslation($request);
 
         //Load the process map
-        $processRequest = ProcessRequest::find($request->id);
-        $bpmn = $request->process->bpmn;
-        $filteredCompletedNodes = [];
-        $requestInProgressNodes = [];
-        $requestIdleNodes = [];
-
-        if ($processRequest) {
-            $requestCompletedNodes = $processRequest->tokens()
-                ->whereIn('status', ['CLOSED', 'COMPLETED', 'TRIGGERED'])
-                ->pluck('element_id');
-            $requestInProgressNodes = $processRequest->tokens()
-                ->whereIn('status', ['ACTIVE', 'INCOMING'])
-                ->pluck('element_id');
-            // Remove any node that is 'ACTIVE' from the completed list.
-            $filteredCompletedNodes = $requestCompletedNodes->diff($requestInProgressNodes)->values();
-
-            // Obtain In-Progress nodes that were completed before
-            $matchingNodes = $requestInProgressNodes->intersect($requestCompletedNodes);
-
-            // Get idle nodes.
-            $xml = $this->loadAndPrepareXML($bpmn);
-            $nodeIds = $this->getNodeIds($xml);
-            $requestIdleNodes = $nodeIds->diff($filteredCompletedNodes)->diff($requestInProgressNodes)->values();
-
-            // Add completed sequence flow to the list of completed nodes.
-            $sequenceFlowNodes = $this->getCompletedSequenceFlow($xml, $filteredCompletedNodes->implode(' '), $requestInProgressNodes->implode(' '), $matchingNodes->implode(' '));
-            $filteredCompletedNodes = $filteredCompletedNodes->merge($sequenceFlowNodes);
-        }
-       
-
-        $inflightData = [
-            'bpmn' => $bpmn,
-            'requestCompletedNodes' => $filteredCompletedNodes,
-            'requestInProgressNodes' => $requestInProgressNodes,
-            'requestIdleNodes' => $requestIdleNodes,
-            'requestId' => $request->process->id,
-        ];
+        $inflightData = $this->loadProcessMap($request);
+        $bpmn = $inflightData['bpmn'];
 
         if (isset($_SERVER['HTTP_USER_AGENT']) && MobileHelper::isMobile($_SERVER['HTTP_USER_AGENT'])) {
             return view('requests.showMobile', compact(
diff --git a/ProcessMaker/Traits/ProcessMapTrait.php b/ProcessMaker/Traits/ProcessMapTrait.php
index baac236a67..d38260a8f9 100644
--- a/ProcessMaker/Traits/ProcessMapTrait.php
+++ b/ProcessMaker/Traits/ProcessMapTrait.php
@@ -3,6 +3,7 @@
 namespace ProcessMaker\Traits;
 
 use Illuminate\Support\Collection;
+use ProcessMaker\Bpmn\Process;
 use ProcessMaker\Models\ProcessRequest;
 use SimpleXMLElement;
 
@@ -108,4 +109,45 @@ private function getCountFlag(int $sourceCount, int $targetCount, string $source
 
         return $maxToken->status === 'ACTIVE' && $sourceCount === $targetCount;
     }
+
+    private function loadProcessMap(ProcessRequest $request): array
+    {
+        $processRequest = ProcessRequest::find($request->id);
+        $bpmn = $request->process->bpmn;
+        $filteredCompletedNodes = [];
+        $requestInProgressNodes = [];
+        $requestIdleNodes = [];
+
+        if ($processRequest) {
+            $requestCompletedNodes = $processRequest->tokens()
+                ->whereIn('status', ['CLOSED', 'COMPLETED', 'TRIGGERED'])
+                ->pluck('element_id');
+            $requestInProgressNodes = $processRequest->tokens()
+                ->whereIn('status', ['ACTIVE', 'INCOMING'])
+                ->pluck('element_id');
+
+            // Remove any node that is 'ACTIVE' from the completed list.
+            $filteredCompletedNodes = $requestCompletedNodes->diff($requestInProgressNodes)->values();
+
+            // Obtain In-Progress nodes that were completed before
+            $matchingNodes = $requestInProgressNodes->intersect($requestCompletedNodes);
+
+            // Get idle nodes.
+            $xml = $this->loadAndPrepareXML($bpmn);
+            $nodeIds = $this->getNodeIds($xml);
+            $requestIdleNodes = $nodeIds->diff($filteredCompletedNodes)->diff($requestInProgressNodes)->values();
+
+            // Add completed sequence flow to the list of completed nodes.
+            $sequenceFlowNodes = $this->getCompletedSequenceFlow($xml, $filteredCompletedNodes->implode(' '), $requestInProgressNodes->implode(' '), $matchingNodes->implode(' '));
+            $filteredCompletedNodes = $filteredCompletedNodes->merge($sequenceFlowNodes);
+        }
+
+        return [
+            'bpmn' => $bpmn,
+            'requestCompletedNodes' => $filteredCompletedNodes,
+            'requestInProgressNodes' => $requestInProgressNodes,
+            'requestIdleNodes' => $requestIdleNodes,
+            'requestId' => $request->process->id,
+        ];
+    }
 }
diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
index 84d99310b2..eda604152b 100644
--- a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -129,7 +129,6 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  console.log("unmounted");
   ProcessMaker.$modeler = null;
   modelerRef.value?.$destroy();
   modelerRef.value = null;

From fcca1c6f481e5a2633cdc94f308beb2418d815b9 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 12 Dec 2024 16:41:06 -0400
Subject: [PATCH 04/10] FOUR-20544: Review the general status of the process

---
 resources/js/requests/show.js                 |   2 +
 .../casesDetail/components/MapLegend.vue      |  44 ++++++
 .../casesDetail/components/NewOverview.vue    | 139 ++++++++++++++++++
 3 files changed, 185 insertions(+)
 create mode 100644 resources/jscomposition/cases/casesDetail/components/MapLegend.vue
 create mode 100644 resources/jscomposition/cases/casesDetail/components/NewOverview.vue

diff --git a/resources/js/requests/show.js b/resources/js/requests/show.js
index 88b7dd082b..da273326e8 100644
--- a/resources/js/requests/show.js
+++ b/resources/js/requests/show.js
@@ -16,6 +16,7 @@ import FilesMobile from "./components/FilesMobile.vue";
 import RequestHeaderMobile from "./components/RequestHeaderMobile.vue";
 import FilterMobile from "../Mobile/FilterMobile.vue";
 import FilterMixin from "../Mobile/FilterMixin";
+import NewOverview from "../../jscomposition/cases/casesDetail/components/NewOverview.vue";
 
 Vue.component("DataSummary", DataSummary);
 Vue.component("RequestDetail", RequestDetail);
@@ -31,6 +32,7 @@ Vue.component("SummaryMobile", SummaryMobile);
 Vue.component("FilesMobile", FilesMobile);
 Vue.component("RequestHeaderMobile", RequestHeaderMobile);
 Vue.component("FilterMobile", FilterMobile);
+Vue.component("NewOverview", NewOverview);
 Vue.mixin(FilterMixin);
 
 Vue.use("vue-form-renderer", VueFormRenderer);
diff --git a/resources/jscomposition/cases/casesDetail/components/MapLegend.vue b/resources/jscomposition/cases/casesDetail/components/MapLegend.vue
new file mode 100644
index 0000000000..5414b03833
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/MapLegend.vue
@@ -0,0 +1,44 @@
+<template>
+  <div
+    id="map-legend"
+    class="tw-absolute tw-top-12 tw-right-12 tw-rounded-md tw-shadow-md tw-bg-white tw-z-10"
+  >
+    <div class="tw-p-4 tw-flex tw-flex-col">
+      <p
+        v-for="(status, index) in statusLegend"
+        :key="index"
+        class="tw-font-bold tw-mb-2 tw-flex tw-items-center tw-gap-2"
+      >
+        <span
+          :style="{ backgroundColor: status.color }"
+          class="tw-inline-block tw-w-1 tw-h-8 tw-mr-4 tw-border-r-3 tw-border-r-gray-400 tw-transform tw-rotate-45"
+        />
+        {{ status.name }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const translate = ProcessMaker.i18n;
+
+const statusLegend = ref(
+  [
+    {
+      name: translate.t("In Progress"),
+      color: "#3FA6FF",
+    },
+    {
+      name: translate.t("Completed"),
+      color: "#00BA7C",
+    },
+    {
+      name: translate.t("Pending / Not Executed"),
+      color: "#CCCCCC",
+    },
+  ],
+);
+
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
new file mode 100644
index 0000000000..a48d6a9724
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="tw-w-full tw-h-full tw-overflow-hidden tw-relative"
+    data-test="body-container"
+  >
+    <MapLegend />
+    <ProcessMapTooltip
+      v-show="showTooltip"
+      ref="tooltipRef"
+      :enabled="enableTooltip"
+      :node-id="tooltip.nodeId"
+      :node-name="tooltip.nodeName"
+      :request-id="inflightData.requestId"
+      :style="{
+        left: `${tooltip.newX}px`,
+        top: `${tooltip.newY}px`
+      }"
+      @is-loading="isTooltipLoading"
+    />
+    <transition
+      name="fade"
+      mode="in-out"
+    >
+      <Modeler
+        ref="modelerRef"
+        :key="keyModeler"
+        :decorations="decorations"
+        :request-completed-nodes="inflightData.requestCompletedNodes"
+        :request-in-progress-nodes="inflightData.requestInProgressNodes"
+        :request-idle-nodes="inflightData.requestIdleNodes"
+        :read-only="true"
+        @set-xml-manager="xmlManager = $event"
+        @click="handleClick"
+      />
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref, watchEffect, onMounted, computed, nextTick, onBeforeUnmount,
+} from "vue";
+import { Modeler } from "@processmaker/modeler";
+import ProcessMapTooltip from "../../../../js/processes/modeler/components/ProcessMapTooltip.vue";
+import MapLegend from "./MapLegend.vue";
+import { getInflightData } from "../variables";
+
+const keyModeler = ref(Math.random());
+const modelerRef = ref("");
+const tooltipRef = ref(null);
+const enableTooltip = ref(true);
+const decorations = ref({
+  borderOutline: {},
+});
+const xmlManager = ref();
+const tooltip = ref({
+  isActive: false,
+  isLoading: false,
+  nodeId: null,
+  nodeName: null,
+  allowedNodes: [
+    "bpmn:Task",
+    "bpmn:ManualTask",
+    "bpmn:SequenceFlow",
+    "bpmn:ScriptTask",
+    "bpmn:CallActivity",
+    "bpmn:ServiceTask",
+  ],
+  coordinates: { x: 0, y: 0 },
+  newX: 0,
+  newY: 0,
+});
+const inflightData = ref(getInflightData());
+
+const isMappingActive = computed(() => (window.ProcessMaker.modeler.enableProcessMapping !== undefined
+  ? window.ProcessMaker.modeler.enableProcessMapping
+  : true));
+
+const showTooltip = computed(() => enableTooltip.value && tooltip.value.isActive);
+
+const calculateTooltipPosition = () => {
+  const rectTooltip = tooltipRef.value.$el.getBoundingClientRect();
+  tooltip.value.newY = tooltip.value.coordinates.y - rectTooltip.height - 20;
+  if (tooltip.value.newY <= 0) {
+    tooltip.value.newY = 10;
+  }
+  tooltip.value.newX = tooltip.value.coordinates.x - (rectTooltip.width / 2);
+  if (tooltip.value.newX < 0) {
+    tooltip.value.newX = 0;
+  } else if (tooltip.value.newX + rectTooltip.width > window.innerWidth) {
+    tooltip.value.newX = window.innerWidth - rectTooltip.width;
+  }
+};
+
+const setupTooltip = ({ event, node }) => {
+  const isNodeTooltipAllowed = tooltip.value.allowedNodes.includes(node.$type);
+  if ((isNodeTooltipAllowed && !tooltip.value.isActive)
+    || (isNodeTooltipAllowed && tooltip.value.nodeId !== node.id)) {
+    tooltip.value.nodeId = node.id;
+    tooltip.value.nodeName = node.name;
+    tooltip.value.isActive = true;
+    nextTick(() => {
+      tooltip.value.coordinates = { x: event.clientX, y: event.clientY };
+      calculateTooltipPosition();
+    });
+  } else if (tooltip.value.nodeId === node.id && tooltip.value.isActive) {
+    tooltip.value.isActive = false;
+  }
+};
+
+const isTooltipLoading = (value) => {
+  tooltip.value.isLoading = value;
+};
+
+const handleClick = (payload) => {
+  if (isMappingActive.value) {
+    setupTooltip(payload);
+  }
+};
+
+watchEffect(() => {
+  if (!tooltip.value.isLoading) {
+    nextTick(() => {
+      calculateTooltipPosition();
+    });
+  }
+});
+
+onMounted(() => {
+  ProcessMaker.$modeler = modelerRef.value;
+});
+
+onBeforeUnmount(() => {
+  ProcessMaker.$modeler = null;
+  modelerRef.value?.$destroy();
+  modelerRef.value = null;
+  tooltipRef.value = null;
+});
+</script>

From 5d3c35289808b394000ea0ab8e10bf4636570b28 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Tue, 17 Dec 2024 16:07:14 -0400
Subject: [PATCH 05/10] FOUR-20543:Review the tooltip status of each task

---
 .../cases/casesDetail/components/NewOverview.vue         | 9 ++++++++-
 resources/views/requests/show.blade.php                  | 3 ---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
index a48d6a9724..e8896f2ee3 100644
--- a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -3,6 +3,9 @@
     class="tw-w-full tw-h-full tw-overflow-hidden tw-relative"
     data-test="body-container"
   >
+    <h4 class="tw-fixed tw-z-10">
+      {{ processTitle }}
+    </h4>
     <MapLegend />
     <ProcessMapTooltip
       v-show="showTooltip"
@@ -43,8 +46,12 @@ import {
 import { Modeler } from "@processmaker/modeler";
 import ProcessMapTooltip from "../../../../js/processes/modeler/components/ProcessMapTooltip.vue";
 import MapLegend from "./MapLegend.vue";
-import { getInflightData } from "../variables";
+import { getInflightData, getProcessName } from "../variables";
 
+const translate = ProcessMaker.i18n;
+const processName = ref(getProcessName());
+const processTitle = ref(`${getProcessName()} ${translate.t("In-Flight Map")}`);
+// processTitle.value = `${getProcessName()} ${translate.t("In-Flight Map")}`;
 const keyModeler = ref(Math.random());
 const modelerRef = ref("");
 const tooltipRef = ref(null);
diff --git a/resources/views/requests/show.blade.php b/resources/views/requests/show.blade.php
index 89bd65eadf..ebb6174cd0 100644
--- a/resources/views/requests/show.blade.php
+++ b/resources/views/requests/show.blade.php
@@ -237,9 +237,6 @@ class="tab-pane card card-body border-top-0 p-3">
                   aria-labelledby="overview-tab">
                   <div class="card card-height" style="border-top: none !important;">
                     <div class="card-body">
-                      <h4>
-                        {{ __(':name In-Flight Map', ['name' => $request->process->name]) }}
-                      </h4>
                       <new-overview />
                     </div>
                   </div>

From 0d487ca4a748d61bb297f9ac7b473a2ac84d4b12 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 18 Dec 2024 15:16:09 -0400
Subject: [PATCH 06/10] correction tooltip

---
 ProcessMaker/Http/Controllers/CasesController.php | 15 +++++++++++++++
 ProcessMaker/Traits/ProcessMapTrait.php           |  2 +-
 .../cases/casesDetail/components/NewOverview.vue  |  1 -
 resources/views/cases/edit.blade.php              |  7 +++++++
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
index c0476d984f..110e905025 100644
--- a/ProcessMaker/Http/Controllers/CasesController.php
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -3,8 +3,11 @@
 namespace ProcessMaker\Http\Controllers;
 
 use Illuminate\Support\Facades\Auth;
+use ProcessMaker\Events\ModelerStarting;
 use ProcessMaker\Events\ScreenBuilderStarting;
 use ProcessMaker\Http\Controllers\Controller;
+use ProcessMaker\Http\Controllers\Process\ModelerController;
+use ProcessMaker\Managers\ModelerManager;
 use ProcessMaker\Managers\ScreenBuilderManager;
 use ProcessMaker\Models\ProcessRequest;
 use ProcessMaker\Models\Screen;
@@ -40,6 +43,10 @@ public function show($case_number)
         // Load event ScreenBuilderStarting
         $manager = app(ScreenBuilderManager::class);
         event(new ScreenBuilderStarting($manager, 'FORM'));
+         // Load event ModelerStarting
+         $managerModeler = app(ModelerManager::class);
+         event(new ModelerStarting($managerModeler));
+
         // Get all the request related to this case number
         $allRequests = ProcessRequest::where('case_number', $case_number)->get();
         $parentRequest = null;
@@ -81,6 +88,12 @@ public function show($case_number)
         // Load the process map
         $inflightData = $this->loadProcessMap($request);
         $bpmn = $inflightData['bpmn'];
+
+        // Get all PM-Blocks
+        $modelerController = new ModelerController();
+        $pmBlockList = $modelerController->getPmBlockList();
+        // dd($pmBlockList);
+
         // Return the view
         return view('cases.edit', compact(
             'request',
@@ -91,8 +104,10 @@ public function show($case_number)
             'canPrintScreens',
             'isProcessManager',
             'manager',
+            'managerModeler',
             'bpmn',
             'inflightData',
+            'pmBlockList'
         ));
     }
 
diff --git a/ProcessMaker/Traits/ProcessMapTrait.php b/ProcessMaker/Traits/ProcessMapTrait.php
index d38260a8f9..590724808b 100644
--- a/ProcessMaker/Traits/ProcessMapTrait.php
+++ b/ProcessMaker/Traits/ProcessMapTrait.php
@@ -147,7 +147,7 @@ private function loadProcessMap(ProcessRequest $request): array
             'requestCompletedNodes' => $filteredCompletedNodes,
             'requestInProgressNodes' => $requestInProgressNodes,
             'requestIdleNodes' => $requestIdleNodes,
-            'requestId' => $request->process->id,
+            'requestId' => $request->id,
         ];
     }
 }
diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
index e8896f2ee3..3346618374 100644
--- a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -49,7 +49,6 @@ import MapLegend from "./MapLegend.vue";
 import { getInflightData, getProcessName } from "../variables";
 
 const translate = ProcessMaker.i18n;
-const processName = ref(getProcessName());
 const processTitle = ref(`${getProcessName()} ${translate.t("In-Flight Map")}`);
 // processTitle.value = `${getProcessName()} ${translate.t("In-Flight Map")}`;
 const keyModeler = ref(Math.random());
diff --git a/resources/views/cases/edit.blade.php b/resources/views/cases/edit.blade.php
index 9058c18fa5..d249ca6ab5 100644
--- a/resources/views/cases/edit.blade.php
+++ b/resources/views/cases/edit.blade.php
@@ -141,6 +141,8 @@ class="tw-grow tw-overflow-hidden"
     const requestCount = @json($requestCount);
     const inflightData = @json($inflightData);
 
+    window.ProcessMaker.PMBlockList = @json($pmBlockList);
+
     window.ProcessMaker.modeler = {
       xml: @json($bpmn),
       configurables: [],
@@ -171,6 +173,11 @@ class="tw-grow tw-overflow-hidden"
   @foreach($manager->getScripts() as $script)
     <script src="{{$script}}"></script>
   @endforeach
+  @foreach($managerModeler->getScripts() as $script)
+    @if (!str_contains($script, 'slideshow'))
+      <script src="{{ $script }}"></script>
+    @endif
+  @endforeach
 @endsection
 
 @section('css')

From 3d1cb73ca713eba6e903281923edd780ec096282 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Wed, 18 Dec 2024 15:35:28 -0400
Subject: [PATCH 07/10] CR

---
 ProcessMaker/Http/Controllers/CasesController.php                | 1 -
 .../jscomposition/cases/casesDetail/components/NewOverview.vue   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
index 110e905025..88d48593ad 100644
--- a/ProcessMaker/Http/Controllers/CasesController.php
+++ b/ProcessMaker/Http/Controllers/CasesController.php
@@ -92,7 +92,6 @@ public function show($case_number)
         // Get all PM-Blocks
         $modelerController = new ModelerController();
         $pmBlockList = $modelerController->getPmBlockList();
-        // dd($pmBlockList);
 
         // Return the view
         return view('cases.edit', compact(
diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
index 3346618374..ce73174f7e 100644
--- a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -50,7 +50,6 @@ import { getInflightData, getProcessName } from "../variables";
 
 const translate = ProcessMaker.i18n;
 const processTitle = ref(`${getProcessName()} ${translate.t("In-Flight Map")}`);
-// processTitle.value = `${getProcessName()} ${translate.t("In-Flight Map")}`;
 const keyModeler = ref(Math.random());
 const modelerRef = ref("");
 const tooltipRef = ref(null);

From 85072722cbdbbf2578b8dd0aca348d01db1ff106 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 19 Dec 2024 11:24:48 -0400
Subject: [PATCH 08/10] FOUR-20279:Optimize the In-Flight Modeler UI Component

---
 ProcessMaker/Traits/ProcessMapTrait.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ProcessMaker/Traits/ProcessMapTrait.php b/ProcessMaker/Traits/ProcessMapTrait.php
index 590724808b..8aed611f3c 100644
--- a/ProcessMaker/Traits/ProcessMapTrait.php
+++ b/ProcessMaker/Traits/ProcessMapTrait.php
@@ -18,6 +18,9 @@ private function loadAndPrepareXML(string $bpmn): SimpleXMLElement
         $xml = simplexml_load_string($bpmn);
         $namespaces = $xml->getNamespaces(true);
 
+        // Register the BPMN namespace explicitly
+        $xml->registerXPathNamespace('bpmn', 'http://www.omg.org/spec/BPMN/20100524/MODEL');
+
         foreach ($namespaces as $prefix => $ns) {
             $xml->registerXPathNamespace($prefix, $ns);
         }

From 1d73d3d05bd2a0d209832b16f0436f6347d9355c Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 19 Dec 2024 14:35:57 -0400
Subject: [PATCH 09/10] console error

---
 .../cases/casesDetail/components/NewOverview.vue              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
index ce73174f7e..3d4bd3e35a 100644
--- a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -3,7 +3,7 @@
     class="tw-w-full tw-h-full tw-overflow-hidden tw-relative"
     data-test="body-container"
   >
-    <h4 class="tw-fixed tw-z-10">
+    <h4 class="tw-fixed tw-z-10 tw-p-4">
       {{ processTitle }}
     </h4>
     <MapLegend />
@@ -137,7 +137,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   ProcessMaker.$modeler = null;
-  modelerRef.value?.$destroy();
+  modelerRef.value.reset({ readOnly: true });
   modelerRef.value = null;
   tooltipRef.value = null;
 });

From a167b650f8ccd2a157af9660984bd8909e610de8 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Mon, 23 Dec 2024 12:05:42 -0400
Subject: [PATCH 10/10] FOUR-21372:We can move the elements of the process in
 the Request - Overview

---
 .../jscomposition/cases/casesDetail/components/NewOverview.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
index 3d4bd3e35a..f6fafbde87 100644
--- a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -138,6 +138,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   ProcessMaker.$modeler = null;
   modelerRef.value.reset({ readOnly: true });
+  modelerRef.value.reset({ panMode: true });
   modelerRef.value = null;
   tooltipRef.value = null;
 });