@necrolab/dashboard 0.4.61 → 0.4.208

package/src/views/FilterBuilder.vue

@@ -1,76 +1,67 @@
 <template>
-    <div class="filter-builder-container flex min-h-0 w-full flex-col overflow-hidden">
-        <!-- Heading -->
-        <div class="flex-between mt-1 pb-1 pt-4">
-            <div class="flex-center gap-4">
-                <FilterIcon class="smooth-hover cursor-pointer text-white" />
-                <h4 class="text-heading">Filter creator</h4>
-            </div>
-            <div class="flex items-center">
-                <input
-                    class="relative flex h-10 w-48 items-center rounded-l rounded-r-none border-2 border-dark-550 bg-dark-500 p-2 text-sm text-white"
-                    placeholder="Event ID"
-                    v-model="eventId" />
-                <button
-                    class="smooth-hover relative flex h-10 items-center rounded-r border-2 border-dark-550 bg-dark-400 px-3 text-sm font-medium text-white"
-                    @click="updateShownVenue">
-                    Load
-                </button>
-            </div>
-        </div>
-
-        <div class="card-dark mb-2 overflow-hidden p-3">
-            <div class="h-full w-full">
+    <div v-html="`<style>${filterBuilder.cssClasses}</style>`" />
+    <div v-html="`<style>${filterBuilder.temporaryCSS}</style>`" />
+    <div class="ios-wrapper mt-3">
+        <div class="bg-dark-500 mt-6 m-4 p-2 rounded shadow border-2 border-dark-550">
+            <div class="lg:px-3 px-0 mx-3 pb-8 mt-5">
                 <!-- Main -->
-                <div class="grid h-full w-full grid-cols-1 gap-3 lg:grid-cols-5 lg:gap-4">
+                <div class="grid grid-cols-1 md:grid-cols-5 gap-0 md:gap-8">
                     <!-- Map -->
-                    <div
-                        class="relative col-span-1 flex h-full w-full flex-col rounded-lg lg:col-span-3 lg:max-w-none lg:overflow-hidden">
-                        <div v-if="svg" class="mb-1 flex items-center">
-                            <div class="flex w-20 items-center justify-between px-2 text-sm font-black text-white">
+                    <div class="col-span-3 w-auto h-auto rounded-lg relative">
+                        <!-- Heading -->
+                        <div class="text-white">
+                            <h4 class="text-2xl font-bold" @click="filterBuilder.log()">Filter creator</h4>
+                            <div class="flex items-center">
+                                <input
+                                    class="h-6 mt-1 text-sm p-2 bg-dark-500 w-40 flex items-center rounded-l relative border-2 border-dark-550"
+                                    placeholder="Event"
+                                    v-model="eventId"
+                                />
+                                <button
+                                    class="h-6 mt-1 text-sm p-2 bg-dark-550 flex items-center rounded-r relative font-bold border-2 border-dark-550 smooth-hover"
+                                    @click="updateShownVenue"
+                                >
+                                    Load
+                                </button>
+                            </div>
+                        </div>
+                        <div v-if="svg" class="flex items-center">
+                            <div class="flex items-center justify-between w-20 px-2 text-white font-black text-xl">
                                 <span class="cursor-pointer" @click="handleZoom(true)">+</span>
                                 <span class="cursor-pointer" @click="handleZoom(false)">-</span>
-                                <ReloadIcon class="h-4 w-4 cursor-pointer" @click="handleZoom('r')" />
+                                <ReloadIcon class="cursor-pointer" @click="handleZoom('r')" />
+
+                                <!-- <h3 class="ml-10 text-sm text-white">Auto</h3>
+                            <Switch class="scale-75 slider-dim" v-model="renderSeats" /> -->
                             </div>
                         </div>
-                        <div class="selecto-wrapper flex-1 overflow-hidden">
+                        <div class="overflow-hidden selecto-wrapper">
                             <div
                                 v-if="svg"
-                                class="hidden-scrollbars svg-container h-full overflow-auto rounded border-2 border-dark-550 p-2 shadow">
+                                class="mt-2 overflow-scroll hidden-scrollbars p-2 rounded shadow border-2 border-dark-550"
+                            >
+                                <!-- <drag-select v-model="selection"> -->
                                 <div class="svg-wrapper" id="svg-wrapper" v-html="svg"></div>
-                            </div>
-                            <div
-                                v-else
-                                class="svg-container flex h-full items-center justify-center rounded border-2 border-dark-550 p-2 shadow">
-                                <div class="text-center">
-                                    <svg
-                                        class="mx-auto mb-3 h-12 w-12 opacity-50"
-                                        viewBox="0 0 19 19"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M2.37499 5.54165V2.37498L5.54166 3.95831L2.37499 5.54165ZM14.25 5.54165V2.37498L17.4167 3.95831L14.25 5.54165ZM8.70833 4.74998V1.58331L11.875 3.16665L8.70833 4.74998ZM8.70833 17.4166C7.70555 17.3903 6.77218 17.3079 5.9082 17.1696C5.0437 17.0308 4.29162 16.8559 3.65195 16.6448C3.01176 16.4337 2.50694 16.1896 2.13749 15.9125C1.76805 15.6354 1.58333 15.3451 1.58333 15.0416V7.91665C1.58333 7.58678 1.79127 7.27988 2.20716 6.99594C2.62252 6.71252 3.18645 6.46183 3.89895 6.24385C4.61145 6.02641 5.4493 5.85488 6.4125 5.72927C7.37569 5.60419 8.40486 5.54165 9.49999 5.54165C10.5951 5.54165 11.6243 5.60419 12.5875 5.72927C13.5507 5.85488 14.3885 6.02641 15.101 6.24385C15.8135 6.46183 16.3775 6.71252 16.7928 6.99594C17.2087 7.27988 17.4167 7.58678 17.4167 7.91665V15.0416C17.4167 15.3451 17.2319 15.6354 16.8625 15.9125C16.493 16.1896 15.9885 16.4337 15.3488 16.6448C14.7086 16.8559 13.9565 17.0308 13.0926 17.1696C12.2281 17.3079 11.2944 17.3903 10.2917 17.4166V14.25H8.70833V17.4166ZM9.49999 8.70831C10.7799 8.70831 11.885 8.63231 12.8155 8.48031C13.7454 8.32884 14.4875 8.15415 15.0417 7.95623C15.0417 7.89026 14.5403 7.73509 13.5375 7.49073C12.5347 7.2469 11.1889 7.12498 9.49999 7.12498C7.81111 7.12498 6.46527 7.2469 5.46249 7.49073C4.45972 7.73509 3.95833 7.89026 3.95833 7.95623C4.51249 8.15415 5.25481 8.32884 6.18529 8.48031C7.11523 8.63231 8.22013 8.70831 9.49999 8.70831ZM7.12499 15.7146V12.6666H11.875V15.7146C12.9305 15.609 13.7948 15.4538 14.4677 15.2491C15.1406 15.0448 15.5958 14.8635 15.8333 14.7052V9.34165C15.1076 9.63192 14.1972 9.86283 13.1021 10.0344C12.0069 10.2059 10.8062 10.2916 9.49999 10.2916C8.19374 10.2916 6.99305 10.2059 5.89791 10.0344C4.80277 9.86283 3.89236 9.63192 3.16666 9.34165V14.7052C3.40416 14.8635 3.85937 15.0448 4.53229 15.2491C5.2052 15.4538 6.06944 15.609 7.12499 15.7146Z"
-                                            fill="#F5F5F5" />
-                                    </svg>
-                                    <p class="text-sm text-light-400">No Map</p>
-                                    <p class="text-xs text-light-500">
-                                        Enter an event ID and click "Load" to display the venue map
-                                    </p>
-                                </div>
+                                <!-- </drag-select> -->
                             </div>
                         </div>
                     </div>
-                    <div class="col-span-1 flex h-full w-full flex-col lg:col-span-2">
-                        <div class="mb-2 flex items-center justify-between text-white">
-                            <div class="flex items-center gap-2 rounded" v-if="hasLoaded">
+                    <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"
                                     class="smooth-hover"
-                                    @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })" />
-                            </div>
-                            <div class="flex items-center gap-1" v-if="hasLoaded">
-                                <SavingsIcon class="h-4 w-4 text-light-400" />
-                                <label class="text-sm text-light-400">Max Price:</label>
+                                    @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })"
+                                />
+
                                 <input
                                     type="number"
                                     :value="filterBuilder.globalFilter.maxPrice"
@@ -80,87 +71,72 @@
                                                 maxPrice: parseInt(e.target.value || 0)
                                             })
                                     "
-                                    class="h-8 w-14 rounded border-2 border-dark-550 bg-dark-500 px-1 pl-2"
-                                    placeholder="max" />
+                                    class="w-14 bg-dark-500 border-2 border-dark-550 px-1 pl-2 h-8 rounded"
+                                    placeholder="max"
+                                />
                             </div>
                         </div>
-                        <Table class="flex flex-1 flex-col border-2 border-dark-550 shadow-xl">
-                            <Header class="flex-shrink-0">
-                                <div class="flex w-full items-center justify-between gap-2 font-bold">
-                                    <div class="flex items-center gap-2">
-                                        <span class="text-base">Filters</span>
-                                        <span class="text-base text-light-300">{{ filterBuilder.filters.length }}</span>
+                        <Table class="border-2 border-dark-550 shadow-xl">
+                            <Header>
+                                <div class="flex items-center font-bold gap-2">
+                                    <span class="text-xl lg:block hidden">Filters</span>
+                                    <span class="text-xl text-light-300">{{ filterBuilder.filters.length }}</span>
+                                    <PriceSortToggle
+                                        class="w-14 smooth-hover"
+                                        :options="['All', 'WL', 'BL']"
+                                        @change="(e) => (shownFilters = e)"
+                                    />
+                                    <div
+                                        class="flex gap-1 h-8 items-center justify-self-end border-2 border-dark-550 p-2 rounded smooth-hover"
+                                        @click="saveFilter"
+                                    >
+                                        <EditIcon />
+                                        <button class="lg:block hidden">Save</button>
                                     </div>
-                                    <div class="flex items-center gap-2">
-                                        <PriceSortToggle
-                                            class="smooth-hover w-14"
-                                            :options="['All', 'WL', 'BL']"
-                                            @change="(e) => (shownFilters = e)" />
-                                        <button class="header-btn save-btn" @click="saveFilter">
-                                            <EditIcon class="h-4 w-4" />
-                                            <span class="hidden lg:block">Save</span>
-                                        </button>
-                                        <button class="header-btn clear-btn" @click="filterBuilder.reset(false)">
-                                            <TrashIcon class="h-4 w-4" />
-                                            <span class="hidden lg:block">Clear</span>
-                                        </button>
+                                    <div
+                                        class="flex gap-1 h-8 items-center absolute right-5 justify-self-end border-2 border-dark-550 p-2 rounded smooth-hover"
+                                        @click="filterBuilder.reset(false)"
+                                    >
+                                        <TrashIcon />
+                                        <button class="lg:block hidden">Clear</button>
                                     </div>
                                 </div>
                             </Header>
-                            <div class="hidden-scrollbars flex-1 overflow-auto bg-dark-400">
-                                <div v-if="filterBuilder.filters.length" class="filters-container">
+                            <div class="overflow-scroll hidden-scrollbars h-96">
+                                <div v-if="filterBuilder.filters.length">
                                     <draggable
                                         :list="filterBuilder.filters"
                                         handle=".handle"
                                         item-key="id"
-                                        ghost-class="sortable-ghost"
-                                        chosen-class="sortable-chosen"
-                                        drag-class="sortable-drag"
-                                        :animation="200"
-                                        :easing="'cubic-bezier(0.4, 0, 0.2, 1)'"
-                                        :force-fallback="false"
-                                        @change="
-                                            () => {
-                                                filterBuilder.updateCss();
-                                                cssUpdateTrigger++;
-                                            }
-                                        ">
+                                        @change="filterBuilder.updateCss()"
+                                    >
                                         <template #item="{ element: f, index: i }">
                                             <Filter
                                                 v-if="doesFilterShow(f)"
                                                 :filter="f"
                                                 :index="i"
                                                 :filterBuilder="filterBuilder"
-                                                class="compact-filter" />
+                                            />
                                         </template>
                                     </draggable>
                                 </div>
-                                <div
-                                    v-else
-                                    class="empty-state flex flex-col items-center justify-center py-8 text-center">
-                                    <FilterIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
-                                    <p class="text-sm text-light-400">No filters yet</p>
-                                    <p class="mt-1 text-xs text-light-500">Click on the map to create filters</p>
-                                </div>
+                                <p v-else class="text-dark-400 m-2">No filters yet...</p>
                             </div>
                         </Table>
-                        <div class="mb-2 mt-1 flex flex-shrink-0 items-center justify-between gap-2 text-white md:mb-0">
+                        <div class="flex items-center justify-between font-bold text-white gap-2 my-2">
                             <button
-                                @click="addWildcardFilter"
-                                :disabled="hasWildcardFilter"
-                                :class="[
-                                    'h-7 overflow-hidden rounded border-2 border-dark-550 bg-dark-500 px-2 text-xs shadow transition-all duration-200',
-                                    hasWildcardFilter
-                                        ? 'text-gray cursor-not-allowed opacity-50'
-                                        : 'text-gray smooth-hover hover:border-light-300 hover:bg-dark-400'
-                                ]"
-                                :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'">
+                                @click="
+                                    filterBuilder.addFilter({ buyAny: true, eventId: filterBuilder.currentEventId })
+                                "
+                                class="border-2 rounded border-dark-550 px-2 h-8 text-gray bg-dark-500 overflow-hidden shadow smooth-hover"
+                            >
                                 * Wildcard
                             </button>
                             <button
                                 @click="ui.toggleModal('preview-filter')"
-                                class="text-gray smooth-hover flex h-7 items-center justify-between gap-1 overflow-hidden rounded border-2 border-dark-550 bg-dark-500 px-2 text-xs shadow">
-                                <CameraIcon class="h-3 w-3" />
+                                class="border-2 gap-2 flex justify-between items-center rounded border-dark-550 px-2 h-8 text-gray bg-dark-500 overflow-hidden shadow smooth-hover"
+                            >
+                                <CameraIcon />
                                 JSON
                             </button>
                         </div>
@@ -168,7 +144,7 @@
                 </div>
             </div>
 
-            <transition-group name="fade">
+            <transition-group name="fade" mode="out-in">
                 <FilterPreview v-if="activeModal === 'preview-filter'" :filter="filterBuilder" />
             </transition-group>
         </div>
@@ -177,15 +153,20 @@
 
 <script setup>
 import draggable from "vuedraggable";
-import { ref, nextTick, watch, computed, onMounted, onUnmounted } from "vue";
-import { onBeforeRouteLeave } from "vue-router";
+import { ref, nextTick, watch, computed } from "vue";
 import { Table, Header } from "@/components/Table";
 import Filter from "@/components/Filter/Filter.vue";
-import { FilterIcon } from "@/components/icons";
 import DragSelect from "dragselect";
-import { DEBUG } from "@/utils/debug";
 
-import { ReloadIcon, TrashIcon, EditIcon, CameraIcon, StadiumIcon, SavingsIcon } from "@/components/icons";
+const DEBUG = window.location.href.startsWith("http://localhost:5173");
+var RendererFactory;
+if (DEBUG) {
+    RendererFactory = class {
+        constructor() {}
+    };
+} else RendererFactory = import("@necrolab/tm-renderer");
+
+import { ReloadIcon, TrashIcon, EditIcon, CameraIcon } from "@/components/icons";
 import { sendSaveFilter } from "@/stores/requests";
 import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
 import { useUIStore } from "@/stores/ui";
@@ -197,273 +178,151 @@ 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;
-//     });
-// };
-
-const panzoomOptions = {
-    maxZoom: 8, // max zoom-in factor
-    minZoom: 0.8, // max zoom-out factor
-    panOnlyWhenZoomed: true,
-    bounds: true,
-    boundsPadding: 0.1, // Add padding to ensure it stays within bounds
-    transformOrigin: { x: 0.5, y: 0.5 }, // Center the zoom
-    contain: true // Force the image to stay within the parent container
+let isShiftPressed = false;
+window.onkeyup = (e) => {
+    if (e.keyCode === 16) isShiftPressed = false;
 };
-let panzoomInstance;
-
-const svg = ref("");
-const eventId = ref("");
-const renderSeats = ref(false);
-let renderer;
-
-const shownFilters = ref("All");
-const filterBuilder = ref(new FilterBuilder());
-
-const hasWildcardFilter = computed(() => {
-    return filterBuilder.value.filters.some((filter) => filter.buyAny && filterBuilder.value.isForCurrentEvent(filter));
-});
-
-const addWildcardFilter = () => {
-    if (!hasWildcardFilter.value) {
-        // Close any expanded filter first
-        filterBuilder.value.setExpandedFilter(null);
-        filterBuilder.value.addFilter({ buyAny: true, eventId: filterBuilder.value.currentEventId });
-        filterBuilder.value.updateCss();
-    }
+window.onkeydown = (e) => {
+    if (e.keyCode === 16) isShiftPressed = true;
 };
 
-// Initialize RendererFactory
-let RendererFactory = import("@necrolab/tm-renderer");
-
-// Real-time CSS injection system
-let styleElement = null;
-const cssUpdateTrigger = ref(0);
-const STYLE_ELEMENT_ID = "filter-builder-styles";
-
-const injectStyles = () => {
-    // Only inject styles if we have an SVG to style
-    const svgWrapper = document.getElementById("svg-wrapper");
-    if (!svgWrapper || !svg.value) return;
+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: []
+    });
 
-    if (!styleElement) {
-        // Remove any existing style element first
-        const existingStyle = document.getElementById(STYLE_ELEMENT_ID);
-        if (existingStyle) {
-            existingStyle.remove();
+    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();
         }
+    });
 
-        styleElement = document.createElement("style");
-        styleElement.id = STYLE_ELEMENT_ID;
-        document.head.appendChild(styleElement);
-    }
-
-    const combinedCSS = filterBuilder.value.cssClasses + filterBuilder.value.temporaryCSS;
-    if (styleElement.textContent !== combinedCSS) {
-        styleElement.textContent = combinedCSS;
-    }
-};
-
-// Setup real-time CSS updates
-const setupCSSUpdates = () => {
-    // Override updateCss method to trigger immediate updates
-    const originalUpdateCss = filterBuilder.value.updateCss.bind(filterBuilder.value);
-    filterBuilder.value.updateCss = () => {
-        originalUpdateCss();
-        nextTick(() => {
-            injectStyles();
-            cssUpdateTrigger.value++;
-        });
+    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;
     };
 
-    // Override highlight method for immediate temporary CSS
-    const originalHighlight = filterBuilder.value.highlight.bind(filterBuilder.value);
-    filterBuilder.value.highlight = (...args) => {
-        originalHighlight(...args);
-        nextTick(() => {
-            injectStyles();
+    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 });
+                });
         });
-    };
+    });
 
-    // Override clearHighlight method
-    const originalClearHighlight = filterBuilder.value.clearHighlight.bind(filterBuilder.value);
-    filterBuilder.value.clearHighlight = () => {
-        originalClearHighlight();
-        nextTick(() => {
-            injectStyles();
+    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
+                });
+            }
         });
-    };
-};
-
-// Cleanup function
-const cleanupStyles = () => {
-    // Remove by ID to ensure we get it even if reference is lost
-    const existingStyle = document.getElementById(STYLE_ELEMENT_ID);
-    if (existingStyle) {
-        existingStyle.remove();
-    }
-
-    if (styleElement) {
-        styleElement.remove();
-        styleElement = null;
-    }
+        isShiftPressed = false;
+    });
 };
 
-// Basic cleanup monitoring
-const debugCleanup = () => {
-    console.log("FilterBuilder cleanup completed");
+const panzoomOptions = {
+    maxZoom: 8, // max zoom-in facor
+    minZoom: 0.8, // max zoom-out factor
+    panOnlyWhenZoomed: true,
+    bounds: true
 };
+let panzoomInstance;
 
-// Clean up any leftover styles from previous instances
-cleanupStyles();
-
-// Initialize CSS system
-setupCSSUpdates();
-
-// Watch for reactive updates
-watch(
-    cssUpdateTrigger,
-    () => {
-        injectStyles();
-    },
-    { immediate: true }
-);
-
-// Cleanup on unmount
-onUnmounted(() => {
-    cleanupStyles();
-});
+const svg = ref("");
+const eventId = ref("");
+const renderSeats = ref(false);
+let renderer;
 
-// Also cleanup on route change using beforeRouteLeave
-onBeforeRouteLeave(() => {
-    cleanupStyles();
-});
+const shownFilters = ref("All");
+const filterBuilder = ref(new FilterBuilder());
 
 const doesFilterShow = (filter) => {
     if ((filter.event || filter.eventId) !== filterBuilder.value.currentEventId) return;
@@ -473,12 +332,10 @@ const doesFilterShow = (filter) => {
 };
 
 let rendererFactory;
-RendererFactory.then((r) => {
-    rendererFactory = new r.default();
-    rendererFactory.init();
-}).catch((error) => {
-    console.error("Failed to initialize renderer:", error);
-});
+if (!DEBUG)
+    RendererFactory.then((r) => {
+        rendererFactory = new r.default();
+    });
 
 const updateShownVenue = async () => {
     eventId.value = eventId.value.trim();
@@ -491,16 +348,13 @@ const updateShownVenue = async () => {
         return;
     }
 
-    renderer = rendererFactory.createRenderer(eventId.value, {
-        proxy: "",
-        country: country
-    });
-    filterBuilder.value.highlightedSeatColor = renderer.config.highlightedSeatColor;
-    renderer.setCustomConfig({
-        logFullError: true,
-        includeDetailedAttributes: true,
-        renderRowBlocks: true
-    });
+    renderer = rendererFactory.createRenderer(eventId.value, "", country);
+    filterBuilder.value.highlightedSeatColor = renderer.c.highlightedSeatColor;
+    renderer.c.logFullError = true;
+    renderer.c.includeDetailedAttributes = true;
+    renderer.c.renderRowBlocks = true;
+    renderer.setFetchAvailabilityData(false);
+    renderer.setUrlProxy("/api/cors?url=");
 
     try {
         await renderer.render();
@@ -522,46 +376,18 @@ const updateShownVenue = async () => {
     if (panzoomInstance?.dispose) panzoomInstance.dispose();
     const elem = document.getElementById("svg-wrapper");
     try {
-        // Ensure SVG has appropriate sizing before initializing panzoom
-        if (elem && elem.children[0]) {
-            const svg = elem.children[0];
-            const isDesktop = window.innerWidth >= 1024;
-
-            // Ensure SVG doesn't exceed container width
-            svg.style.maxWidth = "100%";
-            svg.style.height = "auto";
-            svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
-
-            // Additional desktop constraints to prevent expansion
-            if (isDesktop) {
-                svg.style.maxHeight = "100%";
-                svg.style.width = "100%";
-                svg.style.objectFit = "contain";
-            }
-
-            // Initialize panzoom with updated options
-            panzoomInstance = panzoom(svg, panzoomOptions);
-
-            // Reset to initial position
-            panzoomInstance.moveTo(0, 0);
-            panzoomInstance.zoomAbs(0, 0, 1);
-        }
+        panzoomInstance = panzoom(elem.children[0], panzoomOptions);
     } catch (e) {
         ui.logger.Error("Couldnt use panzoom", e);
     }
     await nextTick();
     await loadFilter();
     filterBuilder.value.reload(eventId.value);
-
-    // Re-setup CSS system after reload
-    setupCSSUpdates();
-    filterBuilder.value.updateCss();
-    // doDragSelect();
+    doDragSelect();
 };
 
 const loadFilter = async () => {
     try {
-        if (!eventId.value) return;
         const res = await fetch(`/api/filter/load?eventId=${eventId.value}`);
         const data = await res.json();
         if (eventId.value) ui.showSuccess("Loaded filter data");
@@ -589,22 +415,16 @@ const saveFilter = async () => {
 const handleZoom = (zoomEvent) => {
     // handle zoom reset
     if (zoomEvent === "r") {
-        // Reset both zoom and position
-        panzoomInstance.moveTo(0, 0);
-        panzoomInstance.zoomAbs(0, 0, 1);
+        // reset zoom
+        panzoomInstance.smoothZoomAbs(0, 0, 1);
+        // reset location
         return;
     }
 
-    // Get current transform
+    // handle zoom in / out
     const { scale } = panzoomInstance.getTransform();
-
-    // Calculate new scale based on zoom direction
-    const newScale = zoomEvent ? scale + scale / 3 : scale - scale / 3;
-
-    // Apply zoom with bounds checking
-    if (newScale >= panzoomOptions.minZoom && newScale <= panzoomOptions.maxZoom) {
-        panzoomInstance.smoothZoom(0, 0, newScale / scale);
-    }
+    if (zoomEvent) return panzoomInstance.smoothZoomAbs(0, 0, scale + scale / 3);
+    else return panzoomInstance.smoothZoomAbs(0, 0, scale - scale / 3);
 };
 
 watch(renderSeats, async () => {
@@ -617,191 +437,15 @@ watch(renderSeats, async () => {
 })();
 </script>
 
-<style scoped>
-.slider-dim {
-    width: 60px;
-    height: 30px;
-}
-
-.compact-filter {
-    font-size: 0.75rem;
-    padding: 0.25rem !important;
-}
-
-.compact-filter .handle {
-    transform: scale(0.8);
-}
-
-/* Enhanced table and filter styling */
-.filters-container {
-    @apply space-y-0;
-    padding: 4px;
-}
-
-/* Dragging states for better UX */
-.sortable-ghost {
-    @apply opacity-30;
-    border: 1px solid #44454b;
-    background-color: rgba(68, 69, 75, 0.1);
-}
-
-.sortable-chosen .drag-handle {
-    border: 1px solid #44454b;
-    background-color: rgba(68, 69, 75, 0.2);
-}
-
-.sortable-drag {
-    @apply z-50 rotate-1 scale-105 transform shadow-xl;
-}
-
-/* Header button styling */
-.header-btn {
-    @apply flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-all duration-200 hover:scale-105;
-}
-
-.save-btn {
-    background-color: rgba(34, 197, 94, 0.2);
-    border-color: rgba(74, 222, 128, 0.5);
-}
-
-.save-btn:hover {
-    background-color: rgba(34, 197, 94, 0.3);
-}
-
-.clear-btn {
-    background-color: rgba(239, 68, 68, 0.2);
-    border-color: rgba(248, 113, 113, 0.5);
-}
-
-.clear-btn:hover {
-    background-color: rgba(239, 68, 68, 0.3);
-}
-
-.filter-builder-container {
-    height: 90vh;
-    overflow: hidden;
-}
-
-.card-dark {
-    height: calc(100vh - 175px);
-    min-height: 500px;
-    overflow: hidden;
-}
-
-@media (max-width: 768px) {
-    .filter-builder-container {
-        overflow: auto;
-    }
-
-    .card-dark {
-        height: auto;
-        overflow: auto;
-    }
-}
-
-/* Mobile portrait header spacing fixes */
-@media (max-width: 640px) {
-    .filter-builder-container .flex-center {
-        gap: 0.5rem;
-    }
-}
-
-/* iPhone landscape and tablet portrait mode fixes */
-@media (max-width: 1023px) and (max-height: 768px) {
-    .filter-builder-container {
-        height: auto;
-        min-height: 100vh;
-        overflow: auto;
-    }
-
-    .card-dark {
-        height: auto;
-        min-height: 500px;
-        overflow: auto;
-    }
-}
-
-/* Desktop: enforce grid column constraints */
-@media (min-width: 1024px) {
-    .lg\\:grid-cols-5 > .lg\\:col-span-3 {
-        max-width: 60%; /* 3/5 of grid */
-        flex-shrink: 0;
-    }
-}
-
-.svg-container {
-    min-height: 300px;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    overflow: auto;
-}
-
-/* Desktop: constrain svg-container to prevent expansion */
-@media (min-width: 1024px) {
-    .svg-container {
-        position: relative;
-        max-width: 100%;
-        max-height: 100%;
-        overflow: hidden;
-    }
-}
-</style>
-
 <style>
-/* Global styles needed for dynamically injected SVG content and Filter.js CSS injection */
-.svg-wrapper {
-    position: relative;
-    transform-origin: 0 0;
-    min-width: 100%;
-    min-height: 100%;
-}
-
-/* Desktop constraints - prevent svg-wrapper from expanding beyond container */
-@media (min-width: 1024px) {
-    .svg-wrapper {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        max-width: 100%;
-        max-height: 100%;
-        min-width: unset;
-        min-height: unset;
-        overflow: hidden;
-    }
-}
-
 .svg-wrapper > svg {
-    width: 100%;
-    height: auto;
     background: center center no-repeat;
+    overflow: hidden;
     background-size: contain;
 }
 
-/* Desktop SVG constraints */
-@media (min-width: 1024px) {
-    .svg-wrapper > svg {
-        max-width: 100%;
-        max-height: 100%;
-    }
-}
-
-/* Ensure Filter.js generated CSS works properly */
-.svg-wrapper path {
-    pointer-events: auto;
-    cursor: pointer;
-}
-
-.svg-wrapper path[generaladmission] {
-    pointer-events: auto;
-    cursor: pointer;
-}
-
-/* Hover effects for general admission seats */
-.svg-wrapper path[generaladmission]:hover {
-    pointer-events: all;
-    cursor: pointer;
+.slider-dim {
+    width: 60px;
+    height: 30px;
 }
 </style>