Add JSDoc documentation and file headers to all source files

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/views/Discover/Map/Map.vue

@@ -53,6 +53,17 @@
 </template>
 
 <script>
+// The Lucia project.
+// Copyright 2024-2026 DSP, inc.  All rights reserved.
+// Authors:
+//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
+/**
+ * @module views/Discover/Map/Map
+ *   Process map view with Cytoscape graph rendering,
+ *   sidebars for view settings, filters, traces, and
+ *   statistics.
+ */
+
 import { useConformanceStore } from '@/stores/conformance';
 
 export default {
@@ -230,27 +241,48 @@ watch(sidebarState, (newValue) => {
 });
 
 // Methods
+/**
+ * Switches the map type and re-renders the Cytoscape graph.
+ * @param {string} type - 'processMap' or 'bpmn'.
+ */
 async function switchMapType(type) {
   mapType.value = type;
   createCy(type);
 }
 
+/**
+ * Switches the edge curve style and re-renders the graph.
+ * @param {string} style - The curve style ('unbundled-bezier' or 'taxi').
+ */
 async function switchCurveStyles(style) {
   curveStyle.value = style;
   createCy(mapType.value);
 }
 
+/**
+ * Switches the layout direction and re-renders the graph.
+ * @param {string} rankValue - 'LR' (horizontal) or 'TB' (vertical).
+ */
 async function switchRank(rankValue) {
   rank.value = rankValue;
   createCy(mapType.value);
 }
 
+/**
+ * Switches the data layer type/option and re-renders the graph.
+ * @param {string} type - 'freq' or 'duration'.
+ * @param {string} option - The data option (e.g., 'total', 'average').
+ */
 async function switchDataLayerType(type, option){
   dataLayerType.value = type;
   dataLayerOption.value = option;
   createCy(mapType.value);
 }
 
+/**
+ * Switches the displayed trace and reloads its detail.
+ * @param {object} e - Object containing the trace id.
+ */
 async function switchTraceId(e) {
   if(e.id == traceId.value) return;
   isLoading.value = true;
@@ -260,6 +292,10 @@ async function switchTraceId(e) {
   isLoading.value = false;
 }
 
+/**
+ * Populates node data from the process map or BPMN model.
+ * @param {object} mapData - The map data object to populate.
+ */
 function setNodesData(mapData) {
   const mapTypeVal = mapType.value;
   const logFreq = {
@@ -348,6 +384,10 @@ function setNodesData(mapData) {
   });
 }
 
+/**
+ * Populates edge data from the process map or BPMN model.
+ * @param {object} mapData - The map data object to populate.
+ */
 function setEdgesData(mapData) {
   const mapTypeVal = mapType.value;
   const logDuration = {
@@ -376,6 +416,10 @@ function setEdgesData(mapData) {
   });
 }
 
+/**
+ * Creates and renders the Cytoscape graph.
+ * @param {string} type - 'processMap' or 'bpmn'.
+ */
 async function createCy(type) {
   const graphId = document.getElementById('cy');
   const mapData = type === 'processMap'? processMapData.value: bpmnData.value;
@@ -393,6 +437,10 @@ async function createCy(type) {
   };
 }
 
+/**
+ * Assigns background images to activity nodes based on data level grouping.
+ * @param {object} mapData - The map data containing nodes.
+ */
 function setActivityBgImage(mapData) {
   const nodes = mapData.nodes;
   const groupSize = Math.floor(nodes.length / ImgCapsules.length);