@necrolab/dashboard 0.4.214 → 0.4.216

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.4.214",
+    "version": "0.4.216",
     "scripts": {
         "build": "npx workbox-cli generateSW workbox-config.js && vite build",
         "dev": "vite",

package/src/components/Filter/Filter.vue

@@ -152,7 +152,7 @@ const getFilterTitle = () => {
             return `${filter.value.section} (first row) ${excluded}`;
         case filterTypes.NORMAL: {
             const selectedRowAmount = filter.value?.rows?.length;
-            const totalRowAmount = document.querySelectorAll(`path[sectionname='${filter.value.section}']`)?.length;
+            const totalRowAmount = document.querySelectorAll(`path[section='${filter.value.section}']`)?.length;
             isAllRows.value = selectedRowAmount === totalRowAmount || !filter.value?.rows?.length;
 
             if (isAllRows.value) return `${filter.value.section} (full section) ${excluded}`;

package/src/libs/Filter.js

@@ -8,23 +8,13 @@ const colors = {
     UNSELECTABLE: "#311432"
 };
 
-const BASE_CSS =
-    `path[row]:hover {stroke: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}` +
-    `path[generaladmission]:hover {fill: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}`;
+const BASE_CSS = `path[generaladmission]:hover {fill: ${colors.HIGHLIGHT};pointer-events:all;cursor:pointer;}`;
 
 const isWheelchair = (p) => {
     if (p.row === "W" || p.sectionName === "W") return false;
     return [("W", "ADA")].some((part) => p.row !== "W" && (p.row?.includes(part) || p.sectionName?.includes(part)));
 };
 
-const getWheelChairRows = () => {
-    const rows = [...document.querySelectorAll("path[row]")];
-    return rows
-        .map((p) => {
-            return { row: p.attributes.row.nodeValue, sectionName: p.attributes.sectionname.nodeValue };
-        })
-        .filter(isWheelchair);
-};
 const sortAlphaNum = (a, b) => {
     var reA = /[^a-zA-Z]/g;
     var reN = /[^0-9]/g;
@@ -93,34 +83,23 @@ const cleanupFilter = (f) => {
         return ret;
     }
 
-    if (f.rows && document.querySelectorAll(`path[sectionname="${f.section}"]`)?.length === f.rows?.length)
-        delete f.rows;
+    if (f.rows && document.querySelectorAll(`path[section="${f.section}"]`)?.length === f.rows?.length) delete f.rows;
     if (f.rows) ret.rows = f.rows.sort(sortAlphaNum);
 
     return ret;
 };
-
-const getFirstRows = (rows) => {
-    const firstRows = {};
-    const parsedRows = rows.map((row) => {
-        return { sec: row.attributes.sectionname.nodeValue, row: row.attributes.row.nodeValue };
-    });
-    // log("getFirstRows: parsedRows=", parsedRows);
-    parsedRows.forEach((row) => {
-        if (!firstRows[row.sec]) firstRows[row.sec] = [];
-        firstRows[row.sec].push(row.row);
-    });
-    // log("A getFirstRows: firstRows=", firstRows);
-    Object.entries(firstRows).forEach(([sec, rows]) => {
-        log(`sort:`, sec, rows);
-        firstRows[sec] = rows.sort(sortAlphaNum);
-    });
-    // log("B getFirstRows: firstRows=", firstRows);
-    return firstRows;
-};
-
 const getSectionNameMapping = () => {
     const sectionRealName = {};
+    [...document.querySelectorAll("path")].forEach((t) => {
+        try {
+            const sec = t.attributes.section.nodeValue.trim();
+            const secName = t.attributes.sectionname.nodeValue.trim();
+            sectionRealName[sec] = secName;
+        } catch {
+            /* empty */
+        }
+    });
+
     [...document.querySelectorAll("tspan")].forEach((t) => {
         const sec = t.attributes.section.nodeValue.trim();
         if (!sectionRealName[sec]) sectionRealName[sec] = t.innerHTML.trim();
@@ -131,14 +110,25 @@ const getSectionNameMapping = () => {
     return sectionRealName;
 };
 
-// const getFloorSections = () => {
-//     const tspans = [...document.querySelectorAll("tspan")];
-//     const blacklist = ["BL", "BARSTOOLS", "BW", "NL"];
-//     return tspans
-//         .map((t) => t.attributes.section.nodeValue)
-//         .filter((t) => t.match(/^[a-zA-Z]+\s?[\w\d]?$/))
-//         .filter((name) => !blacklist.some((b) => name.includes(b)));
-// };
+const getReverseSectionNameMapping = () => {
+    const reverseSectionName = {};
+    [...document.querySelectorAll("path")].forEach((t) => {
+        try {
+            const sec = t.attributes.section.nodeValue.trim();
+            const secName = t.attributes.sectionname.nodeValue.trim();
+            if (!reverseSectionName[secName]) {
+                reverseSectionName[secName] = [];
+            }
+            if (!reverseSectionName[secName].includes(sec)) {
+                reverseSectionName[secName].push(sec);
+            }
+        } catch {
+            /* empty */
+        }
+    });
+    log("getReverseSectionNameMapping", reverseSectionName);
+    return reverseSectionName;
+};
 
 export default class FilterBuilder {
     constructor() {
@@ -157,7 +147,6 @@ export default class FilterBuilder {
             CATCH_ALL_GA: 1,
             NORMAL: 2,
             NORMAL_FIRSTROW: 3,
-            GLOBAL_FIRSTROW: 4,
             CATCH_ALL_FLOOR: 5
         };
 
@@ -194,24 +183,72 @@ export default class FilterBuilder {
         if (filter.buyAny) return this.filterTypes.CATCH_ALL;
         else if (filter.floor) return this.filterTypes.CATCH_ALL_FLOOR;
         else if (filter.generalAdmission) return this.filterTypes.CATCH_ALL_GA;
-        // else if (!!filter.section && filter.firstRow) return this.filterTypes.NORMAL_FIRSTROW;
-        // else if (!filter.section && filter.firstRow) return this.filterTypes.GLOBAL_FIRSTROW;
         else if (filter.section) return this.filterTypes.NORMAL;
         else return this.filterTypes.INVALID;
     }
 
+    addRowHandlers() {
+        for (let i = 0; i < this.rows.length; i++) {
+            const row = this.rows[i];
+            row.onclick = () => {
+                const parsed = {
+                    section: row.attributes.section.nodeValue,
+                    row: row.attributes.row.nodeValue,
+                    id: row.attributes.id.nodeValue
+                };
+                log(`Adding filter ${parsed.section}`);
+                const matchingFilter = this.filters.find(
+                    (f) =>
+                        this.isForCurrentEvent(f) &&
+                        f.section === parsed.section &&
+                        (f.rows?.includes(parsed.row) || !Array.isArray(f.rows))
+                );
+                if (matchingFilter) {
+                    log(`Filter for ${parsed.section}/${parsed.row} already exists (${matchingFilter.id})`);
+                    if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
+                    else this.setExpandedFilter(matchingFilter.id);
+                    this.updateCss();
+                    return;
+                }
+
+                this.addFilter({
+                    section: parsed.section,
+                    event: this.currentEventId
+                });
+            };
+
+            row.onmouseover = () => {
+                const parsed = {
+                    section: row.attributes.section.nodeValue,
+                    row: row.attributes.row.nodeValue,
+                    id: row.attributes.id.nodeValue
+                };
+                const matchingFilter = this.filters.find(
+                    (f) =>
+                        this.isForCurrentEvent(f) &&
+                        f.section === parsed.section &&
+                        (f.rows?.includes(parsed.row) || !Array.isArray(f.rows))
+                );
+                if (!matchingFilter) return;
+                if (Array.isArray(matchingFilter.rows))
+                    matchingFilter.rows.forEach((row) => this.highlight({ section: parsed.section, row: row }));
+                else this.highlight({ section: matchingFilter.section });
+            };
+            row.onmouseout = () => {
+                if (!this.isDragging) this.clearHighlight();
+            };
+        }
+    }
+
     reload(eventId) {
         const paths = document.querySelectorAll("path");
         this.rows = [...paths].filter((r) => r.id.startsWith("s_"));
 
         this.addLabelHandlers();
-        this.addRowHandlers();
         this.addGAHandlers();
+        this.addRowHandlers();
         this.currentEventId = eventId;
 
-        const wcRows = getWheelChairRows();
-        log("wcRows:", wcRows);
-        wcRows.forEach((r) => this.makeRowUnselectable(r.sectionName, r.row));
         this.updateCss();
     }
 
@@ -233,6 +270,18 @@ export default class FilterBuilder {
     addFilter(filter) {
         if (!this.filters) this.filters = [];
 
+        // Check if a filter with the same properties (excluding id) already exists
+        const existingFilter = this.filters.find((f) => {
+            const n = { ...f };
+            delete n.id;
+            return JSON.stringify(n) === JSON.stringify(filter);
+        });
+
+        if (existingFilter) {
+            console.log("Filter already exists:", existingFilter);
+            return; // Don't add the filter if it already exists
+        }
+
         if (this.expandedFilter) {
             const parent = this.filters.find((f) => f.event === filter.event && f.section === filter.section);
             if (parent) return this.addFilterToParent(filter, parent);
@@ -275,23 +324,6 @@ export default class FilterBuilder {
         this.updateCss();
     }
 
-    selectFirstRow() {
-        const paths = document.querySelectorAll("path");
-        const rows = [...paths].filter((r) => r.id.startsWith("s_"));
-        const firstRows = getFirstRows(rows);
-
-        Object.entries(firstRows).forEach(([sec, rows]) => {
-            if (this.filters.some((f) => f.section === sec && f.rows.includes(rows[0]) && this.isForCurrentEvent(f))) {
-                log(`Filter for ${sec}/${rows[0]} already exists`);
-                return;
-            }
-            if (this.isUnselectable(sec, rows[0])) return;
-            this.addFilter({ event: this.currentEventId, section: sec, rows: [rows[0]] });
-        });
-
-        this.updateCss();
-    }
-
     updateCss() {
         this.cssClasses = BASE_CSS;
         const gaSectionNameMapping = this.getSectionNameMapping();
@@ -303,6 +335,7 @@ export default class FilterBuilder {
                 // eslint-disable-next-line no-unused-vars
                 ([_, v]) => v === filter.section && v.includes(" ")
             )?.[0];
+
             if (tryFindRealName) {
                 log(`Real name for ${filter.section}: ${tryFindRealName}`);
             } else {
@@ -317,15 +350,14 @@ export default class FilterBuilder {
                 case this.filterTypes.NORMAL:
                     // If it has no 'rows' property
                     if (!Array.isArray(filter.rows)) {
-                        const isGA = document.querySelectorAll(`path[sectionname='${filter.section}']`)?.length === 0;
+                        const isGA = document.querySelectorAll(`path[section='${filter.section}']`)?.length === 0;
 
                         if (isGA) this.cssClasses += `path[name="${tryFindRealName}"] {fill: ${color} !important}`;
-                        else this.cssClasses += `path[sectionname="${filter.section}"] {stroke: ${color} !important}`;
+                        else this.cssClasses += `path[section="${filter.section}"] {stroke: ${color} !important}`;
                     } else {
                         this.cssClasses += filter.rows
                             .map(
-                                (row) =>
-                                    `path[sectionname="${filter.section}"][row="${row}"] {stroke: ${color} !important}`
+                                (row) => `path[section="${filter.section}"][row="${row}"] {stroke: ${color} !important}`
                             )
                             ?.join("\n");
                     }
@@ -348,10 +380,10 @@ export default class FilterBuilder {
         });
 
         this.unselectable.forEach((unselectable) => {
-            const [sectionName, row] = unselectable.split("/");
-            log("UpdateCSS: adding unselectable", sectionName, row);
+            const [section, row] = unselectable.split("/");
+            log("UpdateCSS: adding unselectable", section, row);
             const color = colors.UNSELECTABLE;
-            this.cssClasses += `path[sectionname="${sectionName}"][row="${row}"] {stroke: ${color} !important} `;
+            this.cssClasses += `path[section="${section}"][row="${row}"] {stroke: ${color} !important} `;
         });
         log(this.cssClasses);
     }
@@ -372,11 +404,7 @@ export default class FilterBuilder {
                     if (f.section !== section && f.section !== gaSectionNameMapping[section]) return false;
                     return true;
                 });
-                // (((f.section === section || f.section === gaSectionNameMapping[section]) && !f.rows) ||
-                //     (f.section === section &&
-                //         document.querySelectorAll(`path[sectionname="${section}"]`).length ===
-                //             f.rows.length)) &&
-                // this.isForCurrentEvent(f)
+
                 if (matchingFilter) {
                     log(`Filter for ${section} already exists (${matchingFilter.id})`);
                     if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
@@ -396,9 +424,14 @@ export default class FilterBuilder {
                             event: this.currentEventId
                         });
                     } else {
-                        this.addFilter({
-                            section: section.trim(),
-                            event: this.currentEventId
+                        const reverseMapping = getReverseSectionNameMapping();
+                        const sections = reverseMapping[section.trim()] || [section.trim()];
+                        log("labelHandler: non-ga", sections, section);
+                        sections.forEach((s) => {
+                            this.addFilter({
+                                section: s,
+                                event: this.currentEventId
+                            });
                         });
                     }
                     log("Added labelHandler filter", section);
@@ -442,62 +475,6 @@ export default class FilterBuilder {
         }
     }
 
-    addRowHandlers() {
-        for (let i = 0; i < this.rows.length; i++) {
-            const row = this.rows[i];
-            row.onclick = () => {
-                const parsed = {
-                    section: row.attributes.sectionname.nodeValue,
-                    row: row.attributes.row.nodeValue,
-                    id: row.attributes.id.nodeValue
-                };
-                log(`Adding filter ${parsed.section}/${parsed.row}`);
-                const matchingFilter = this.filters.find(
-                    (f) =>
-                        this.isForCurrentEvent(f) &&
-                        f.section === parsed.section &&
-                        (f.rows?.includes(parsed.row) || !Array.isArray(f.rows))
-                );
-                if (matchingFilter) {
-                    log(`Filter for ${parsed.section}/${parsed.row} already exists (${matchingFilter.id})`);
-                    if (this.expandedFilter === matchingFilter.id) this.setExpandedFilter(null);
-                    else this.setExpandedFilter(matchingFilter.id);
-                    this.updateCss();
-                    return;
-                }
-
-                if (this.isUnselectable(parsed.section, parsed.row)) return;
-
-                this.addFilter({
-                    section: parsed.section,
-                    rows: [parsed.row],
-                    event: this.currentEventId
-                });
-            };
-
-            row.onmouseover = () => {
-                const parsed = {
-                    section: row.attributes.sectionname.nodeValue,
-                    row: row.attributes.row.nodeValue,
-                    id: row.attributes.id.nodeValue
-                };
-                const matchingFilter = this.filters.find(
-                    (f) =>
-                        this.isForCurrentEvent(f) &&
-                        f.section === parsed.section &&
-                        (f.rows?.includes(parsed.row) || !Array.isArray(f.rows))
-                );
-                if (!matchingFilter) return;
-                if (Array.isArray(matchingFilter.rows))
-                    matchingFilter.rows.forEach((row) => this.highlight({ section: parsed.section, row: row }));
-                else this.highlight({ section: matchingFilter.section });
-            };
-            row.onmouseout = () => {
-                if (!this.isDragging) this.clearHighlight();
-            };
-        }
-    }
-
     deleteFilterById(id) {
         this.filters = this.filters.filter((f) => f.id !== id);
         // this.updateHooks = this.updateHooks.filter((i) => id !== i);
@@ -541,9 +518,9 @@ export default class FilterBuilder {
             if (this.filters.find((f) => f.section === filter.name)) return;
             newCSS += `path[name="${filter.section || filter.name}"] {fill: ${colors.HIGHLIGHT} !important}`;
         } else if (filter.row) {
-            newCSS += `path[sectionname="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            newCSS += `path[section="${filter.section}"][row="${filter.row}"] {stroke: ${colors.HIGHLIGHT} !important}`;
         } else {
-            newCSS += `path[sectionname="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
+            newCSS += `path[section="${filter.section}"] {stroke: ${colors.HIGHLIGHT} !important}`;
         }
         this.temporaryCSS += newCSS;
     }
@@ -551,13 +528,4 @@ export default class FilterBuilder {
     clearHighlight() {
         this.temporaryCSS = "";
     }
-
-    makeRowUnselectable(section, row) {
-        log("adding unselectable:", section, row);
-        this.unselectable.push(`${section}/${row}`);
-    }
-
-    isUnselectable(section, row) {
-        return this.unselectable.includes(`${section}/${row}`);
-    }
 }

package/src/stores/logger.js

@@ -18,7 +18,6 @@ const LOG_COLORS = {
     yellow: "color: #ffbb33; font-weight: bold", // Yellow
     reset: ""
 };
-
 class Logger {
     constructor() {
         this.ENABLED = true;
@@ -45,11 +44,20 @@ class Logger {
 
         args.unshift(timestamp);
 
+        // Format objects for console output
+        const formattedArgs = args.map((arg) => {
+            if (typeof arg === "object" && arg !== null) {
+                console.log(arg._value ? arg._value : arg);
+                return arg;
+            }
+            return arg;
+        });
+
         // For styled console output in browser
         if (style) {
-            console.log(`%c${args.join(" ")}`, style);
+            console.log(`%c${formattedArgs.join(" ")}`, style);
         } else {
-            console.log(...args);
+            console.log(...formattedArgs);
         }
     }
 

package/src/stores/ui.js

@@ -202,22 +202,16 @@ export const useUIStore = defineStore("ui", () => {
 
         let relevantTasks = Object.values(tasks.value).filter((t) => t.siteId === currentCountry.value.siteId);
         if (currentEvent.value) relevantTasks = relevantTasks.filter((t) => t.eventId === currentEvent.value);
-        // logger.Info("mqm tasks:", relevantTasks);
-        const tasksInQueue = relevantTasks.filter((t) => t.status.includes(" - ETA:"));
 
         queueStats.value.total = 0;
-        queueStats.value.queued =
-            tasksInQueue.length + relevantTasks.filter((t) => t.status?.toLowerCase()?.includes("queueit")).length || 0;
+        queueStats.value.queued = relevantTasks.filter((t) => t.inQueue).length || 0;
         queueStats.value.show = queueStats.value.total > 0;
         const sleepingStatuses = ["sleeping in queue", "waiting for drop", "waiting for carting", "waiting for queue"];
         queueStats.value.sleeping = relevantTasks.filter((t) =>
             sleepingStatuses.includes(t.status.toLowerCase())
         ).length;
-        const positions = tasksInQueue
-            .map((t) => parseInt(t.status.split(" users ahead - ETA:")[0]))
-            .filter((e) => !isNaN(e));
+        const positions = relevantTasks.map((t) => t.queuePosition).filter((e) => !isNaN(e));
         queueStats.value.nextQueuePasses = positions.sort((a, b) => a - b);
-        // logger.Info("Refreshing queue stats", queueStats.value);
     };
 
     const toggleModal = (name, clearValue = false) => {

package/src/views/FilterBuilder.vue

@@ -48,13 +48,6 @@
                     </div>
                     <div class="col-span-2 mt-10">
                         <div class="flex justify-between mb-2 items-center text-white">
-                            <button
-                                @click="filterBuilder.selectFirstRow"
-                                class="border-2 rounded border-dark-550 px-1 h-8 w-full min-w-14 text-gray bg-dark-500 overflow-hidden smooth-hover"
-                            >
-                                First rows
-                            </button>
-
                             <div class="rounded flex justify-between gap-2 items-center" v-if="hasLoaded">
                                 <PriceSortToggle
                                     :current="filterBuilder.globalFilter.priceSort"
@@ -178,135 +171,135 @@ const activeModal = computed(() => ui.activeModal);
 const ui = useUIStore();
 const hasLoaded = ref(false);
 
-let isShiftPressed = false;
-window.onkeyup = (e) => {
-    if (e.keyCode === 16) isShiftPressed = false;
-};
-window.onkeydown = (e) => {
-    if (e.keyCode === 16) isShiftPressed = true;
-};
-
-const doDragSelect = () => {
-    // https://dragselect.com/docs/API/Settings
-    const ds = new DragSelect({
-        selectables: [
-            ...document.querySelectorAll("path[row]"),
-            ...document.querySelectorAll("path[generaladmission]")
-        ],
-        area: document.getElementById("svg-wrapper"),
-        selectionThreshold: 0.1,
-        multiSelectKeys: []
-    });
-
-    ds.subscribe("DS:start:pre", () => {
-        // ui.logger.Info("DS:start:pre - shift pressed:", isShiftPressed);
-        if (!isShiftPressed) {
-            ds.stop(false, false);
-            ds.start();
-        } else {
-            panzoomInstance.pause();
-        }
-    });
-
-    const parseSelected = (items) => {
-        const parsed = items
-            .map((e) => {
-                return {
-                    section: e.attributes.sectionname?.nodeValue || e.attributes.name?.nodeValue,
-                    row: e.attributes.row?.nodeValue,
-                    GA: e.attributes.generaladmission?.nodeValue,
-                    name: e.attributes.name?.nodeValue
-                };
-            })
-            .filter((e) => !filterBuilder.value.isUnselectable(e.section, e.row));
-
-        const sectionMapping = {};
-        parsed
-            .filter((p) => !p.GA)
-            .forEach((p) => {
-                if (!sectionMapping[p.section]) sectionMapping[p.section] = [];
-                sectionMapping[p.section].push(p);
-            });
-        parsed
-            .filter((p) => p.GA)
-            .forEach((p) => {
-                sectionMapping[p.section] = {
-                    GA: true,
-                    section: p.section,
-                    name: p.name
-                };
-            });
-        return sectionMapping;
-    };
-
-    ds.subscribe("DS:update:pre", (e) => {
-        // ui.logger.Info("DS:update:pre - shift pressed:", isShiftPressed, e.items);
-        filterBuilder.value.isDragging = true;
-        if (!isShiftPressed) return;
-        const sectionMapping = parseSelected(e.items);
-        filterBuilder.value.clearHighlight();
-        Object.entries(sectionMapping).forEach(([section, rows]) => {
-            if (rows.GA) {
-                const isSelected = filterBuilder.value.filters.find(
-                    (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === section
-                );
-                if (isSelected) return;
-                filterBuilder.value.highlight({ section: section }, true);
-            } else
-                rows.forEach((row) => {
-                    const isSelected = filterBuilder.value.filters.find(
-                        (f) =>
-                            (f.section === section && f.rows?.includes(row.row)) ||
-                            (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
-                    );
-                    if (isSelected) return;
-
-                    filterBuilder.value.highlight({ section, row: row.row });
-                });
-        });
-    });
-
-    ds.subscribe("DS:end", (e) => {
-        filterBuilder.value.isDragging = false;
-        panzoomInstance.resume();
-        filterBuilder.value.clearHighlight();
-        [...document.querySelectorAll("path")].map((f) => (f.style = ""));
-        if (!isShiftPressed) return;
-        const sectionMapping = parseSelected(e.items);
-        const secNameMapping = filterBuilder.value.getSectionNameMapping();
-
-        Object.entries(sectionMapping).forEach(([section, rows]) => {
-            if (rows.GA) {
-                const isSelected = filterBuilder.value.filters.find(
-                    (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === secNameMapping[section]
-                );
-                if (isSelected) return;
-                filterBuilder.value.addFilter({
-                    event: filterBuilder.value.currentEventId,
-                    section: secNameMapping[section]
-                });
-            } else {
-                const unselectedRows = [];
-                rows.forEach((row) => {
-                    const isSelected = filterBuilder.value.filters.find(
-                        (f) =>
-                            (f.section === section && f.rows?.includes(row.row)) ||
-                            (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
-                    );
-                    if (isSelected) return;
-                    unselectedRows.push(row.row);
-                });
-                if (unselectedRows.length === 0) return;
-                filterBuilder.value.addFilter({
-                    event: filterBuilder.value.currentEventId,
-                    section,
-                    rows: unselectedRows
-                });
-            }
-        });
-        isShiftPressed = false;
-    });
-};
+// let isShiftPressed = false;
+// window.onkeyup = (e) => {
+//     if (e.keyCode === 16) isShiftPressed = false;
+// };
+// window.onkeydown = (e) => {
+//     if (e.keyCode === 16) isShiftPressed = true;
+// };
+
+// const doDragSelect = () => {
+//     // https://dragselect.com/docs/API/Settings
+//     const ds = new DragSelect({
+//         selectables: [
+//             ...document.querySelectorAll("path[row]"),
+//             ...document.querySelectorAll("path[generaladmission]")
+//         ],
+//         area: document.getElementById("svg-wrapper"),
+//         selectionThreshold: 0.1,
+//         multiSelectKeys: []
+//     });
+
+//     ds.subscribe("DS:start:pre", () => {
+//         // ui.logger.Info("DS:start:pre - shift pressed:", isShiftPressed);
+//         if (!isShiftPressed) {
+//             ds.stop(false, false);
+//             ds.start();
+//         } else {
+//             panzoomInstance.pause();
+//         }
+//     });
+
+//     const parseSelected = (items) => {
+//         const parsed = items
+//             .map((e) => {
+//                 return {
+//                     section: e.attributes.sectionname?.nodeValue || e.attributes.name?.nodeValue,
+//                     row: e.attributes.row?.nodeValue,
+//                     GA: e.attributes.generaladmission?.nodeValue,
+//                     name: e.attributes.name?.nodeValue
+//                 };
+//             })
+//             .filter((e) => !filterBuilder.value.isUnselectable(e.section, e.row));
+
+//         const sectionMapping = {};
+//         parsed
+//             .filter((p) => !p.GA)
+//             .forEach((p) => {
+//                 if (!sectionMapping[p.section]) sectionMapping[p.section] = [];
+//                 sectionMapping[p.section].push(p);
+//             });
+//         parsed
+//             .filter((p) => p.GA)
+//             .forEach((p) => {
+//                 sectionMapping[p.section] = {
+//                     GA: true,
+//                     section: p.section,
+//                     name: p.name
+//                 };
+//             });
+//         return sectionMapping;
+//     };
+
+//     ds.subscribe("DS:update:pre", (e) => {
+//         // ui.logger.Info("DS:update:pre - shift pressed:", isShiftPressed, e.items);
+//         filterBuilder.value.isDragging = true;
+//         if (!isShiftPressed) return;
+//         const sectionMapping = parseSelected(e.items);
+//         filterBuilder.value.clearHighlight();
+//         Object.entries(sectionMapping).forEach(([section, rows]) => {
+//             if (rows.GA) {
+//                 const isSelected = filterBuilder.value.filters.find(
+//                     (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === section
+//                 );
+//                 if (isSelected) return;
+//                 filterBuilder.value.highlight({ section: section }, true);
+//             } else
+//                 rows.forEach((row) => {
+//                     const isSelected = filterBuilder.value.filters.find(
+//                         (f) =>
+//                             (f.section === section && f.rows?.includes(row.row)) ||
+//                             (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
+//                     );
+//                     if (isSelected) return;
+
+//                     filterBuilder.value.highlight({ section, row: row.row });
+//                 });
+//         });
+//     });
+
+//     ds.subscribe("DS:end", (e) => {
+//         filterBuilder.value.isDragging = false;
+//         panzoomInstance.resume();
+//         filterBuilder.value.clearHighlight();
+//         [...document.querySelectorAll("path")].map((f) => (f.style = ""));
+//         if (!isShiftPressed) return;
+//         const sectionMapping = parseSelected(e.items);
+//         const secNameMapping = filterBuilder.value.getSectionNameMapping();
+
+//         Object.entries(sectionMapping).forEach(([section, rows]) => {
+//             if (rows.GA) {
+//                 const isSelected = filterBuilder.value.filters.find(
+//                     (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === secNameMapping[section]
+//                 );
+//                 if (isSelected) return;
+//                 filterBuilder.value.addFilter({
+//                     event: filterBuilder.value.currentEventId,
+//                     section: secNameMapping[section]
+//                 });
+//             } else {
+//                 const unselectedRows = [];
+//                 rows.forEach((row) => {
+//                     const isSelected = filterBuilder.value.filters.find(
+//                         (f) =>
+//                             (f.section === section && f.rows?.includes(row.row)) ||
+//                             (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
+//                     );
+//                     if (isSelected) return;
+//                     unselectedRows.push(row.row);
+//                 });
+//                 if (unselectedRows.length === 0) return;
+//                 filterBuilder.value.addFilter({
+//                     event: filterBuilder.value.currentEventId,
+//                     section,
+//                     rows: unselectedRows
+//                 });
+//             }
+//         });
+//         isShiftPressed = false;
+//     });
+// };
 
 const panzoomOptions = {
     maxZoom: 8, // max zoom-in facor
@@ -349,7 +342,6 @@ const updateShownVenue = async () => {
         return;
     }
 
-    debugger;
     renderer = rendererFactory.createRenderer(eventId.value, "", country);
     filterBuilder.value.highlightedSeatColor = renderer.c.highlightedSeatColor;
     renderer.c.logFullError = true;
@@ -384,7 +376,7 @@ const updateShownVenue = async () => {
     await nextTick();
     await loadFilter();
     filterBuilder.value.reload(eventId.value);
-    doDragSelect();
+    // doDragSelect();
 };
 
 const loadFilter = async () => {