@3cr/viewer-browser 0.0.162 → 0.0.195

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -1,212 +1,142 @@
-<!-- /* c8 ignore start */ -->
 <template>
-  <!--  <DemoModal data-vuetify v-model:modal="m_demo" />-->
   <DemoLicenceInfoModal v-model:modal="m_demo" :is-modal-open="value" />
   <DemoLicenceShareToMobileModal v-model:modal="m_demoLicenceShareToMobile" />
   <DemoLicenceSendToPartyModal v-model:modal="m_demoLicenceSendToParty" />
+  <DemoLicenceEnableCloudStorageModal v-model:modal="m_demoLicenseEnableCloudStorage" />
   <DemoPatientInfoModal v-model:modal="m_demoPatient" :is-modal-open="value" />
   <DemoPatientShareToMobileModal v-model:modal="m_demoPatientShareToMobile" />
   <DemoPatientSendToPartyModal v-model:modal="m_demoPatientSendToParty" />
+  <DemoPatientEnableCloudStorageModal v-model:modal="m_demoPatientEnableCloudStorage" />
+  <CloseViewerModal v-model:modal="m_closeDialog" :options="opts" @close="value = false"/>
   <v-dialog
     data-vuetify
-    id="cr-viewer"
-    class="pa-0 ma-0 overflow-y-auto overflow-x-hidden"
-    :modelValue="value"
-    style="max-height: unset"
-    :scrollable="false"
+    :model-value="value"
+    :no-click-animation="true"
     fullscreen
     persistent
-    @input="alterValue"
   >
-    <v-dialog
-      v-model:model-value="m_closeDialog"
-      id="close-dialog-prompt"
-      data-test="closemodal"
-    >
-      <v-card
-        class="pa-1 ma-auto position-relative motif-background"
-        width="600"
-        theme="dark"
-      >
-        <v-card-title class="text-center">Close Viewer?</v-card-title>
-        <v-card-text class="text-center mb-2"
-          >Are you sure you want to close the Online Viewer?</v-card-text
-        >
-        <v-card-actions>
-          <v-btn
-            variant="flat"
-            color="secondary"
-            @click="m_closeDialog = false"
-          >
-            Cancel
-          </v-btn>
-          <v-spacer />
-          <v-btn
-            color="red"
-            variant="flat"
-            @click="closeModal"
-            v-if="showOption('OnSaveSession')"
-          >
-            Close without saving
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="flat"
-            @click="closeModalSave"
-            v-if="showOption('OnSaveSession')"
-          >
-            Save Session
-          </v-btn>
-          <v-btn color="flat" variant="tonal" @click="closeModal" v-else>
-            Close Viewer
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
     <v-card
       id="invoice-table-modal"
       class="pa-0 ma-0 position-relative motif-background overflow-y-hidden rounded-0"
       height="100vh"
     >
-      <v-toolbar dense height="48">
-        <v-menu
-          :close-on-content-click="false"
-          :close-on-click="true"
-          open-on-hover
-          offset-y
-        >
+      <v-app-bar density="compact">
+        <v-menu :close-on-content-click="false">
           <template #activator="{ props, isActive }">
             <v-btn
               v-bind="props"
-              variant="flat"
-              :color="isActive ? 'secondary' : 'primary'"
               class="mr-2"
+              :color="isActive ? 'secondary' : 'primary'"
+              prepend-icon="description"
+              variant="flat"
             >
-              <template #prepend>
-                <v-icon>description</v-icon>
-              </template>
               File
             </v-btn>
           </template>
-          <v-card class="">
-            <v-list>
-              <v-list-item
-                v-if="showOption('OnLoadNewDicomSeries')"
-                @click="executeOption('OnLoadNewDicomSeries')"
-              >
-                <template v-slot:prepend>
-                  <v-icon> upload </v-icon>
-                </template>
-                <v-list-item-title>Load New DICOM Series</v-list-item-title>
-              </v-list-item>
-              <v-list-item
-                v-if="showOption('OnDownloadDicomSeries')"
-                @click="executeOption('OnDownloadDicomSeries')"
-              >
-                <template v-slot:prepend>
-                  <v-icon> download </v-icon>
-                </template>
-                <v-list-item-title>Download DICOM Series</v-list-item-title>
-              </v-list-item>
-              <v-list-item
-                v-if="showOption('OnLoadSavedSession')"
-                @click="executeOption('OnLoadSavedSession')"
-              >
-                <template v-slot:prepend>
-                  <v-icon> sync </v-icon>
-                </template>
-                <v-list-item-title> Load Saved Session </v-list-item-title>
-              </v-list-item>
-              <v-list-item
-                v-if="showOption('OnSendTo3rdParty')"
-                @click="executeOption('OnSendTo3rdParty')"
-              >
-                <template v-slot:prepend>
-                  <v-icon> send </v-icon>
-                </template>
-                <v-list-item-title>Send to 3rd Party</v-list-item-title>
-              </v-list-item>
-              <v-list-item
-                v-if="showOption('OnShareToMobile')"
-                @click="executeOption('OnShareToMobile')"
-              >
-                <template v-slot:prepend>
-                  <v-icon> share </v-icon>
-                </template>
-                <v-list-item-title>Share to Mobile / VR</v-list-item-title>
-              </v-list-item>
+          <v-list>
+            <v-list-item
+              v-if="showOption('OnLoadNewDicomSeries')"
+              @click="executeOption('OnLoadNewDicomSeries')"
+              prepend-icon="upload"
+            >
+              <v-list-item-title>Load New DICOM Series</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-if="showOption('OnDownloadDicomSeries')"
+              @click="executeOption('OnDownloadDicomSeries')"
+              prepend-icon="download"
+            >
+              <v-list-item-title>Download DICOM Series</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-if="showOption('OnLoadSavedSession')"
+              @click="executeOption('OnLoadSavedSession')"
+              prepend-icon="sync"
+            >
+              <v-list-item-title> Load Saved Session </v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-if="showOption('OnSendTo3rdParty')"
+              @click="executeOption('OnSendTo3rdParty')"
+              prepend-icon="send"
+            >
+              <v-list-item-title>Send to 3rd Party</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-if="showOption('OnShareToMobile')"
+              @click="executeOption('OnShareToMobile')"
+              prepend-icon="share"
+            >
+              <v-list-item-title>Share to Mobile / VR</v-list-item-title>
+            </v-list-item>
 
-              <v-list-item
-                @click="
+            <v-list-item
+              @click="
                   executeOption('OnClosePopup');
                   alterValue(false);
                 "
-              >
-                <template v-slot:prepend>
-                  <v-icon> close </v-icon>
-                </template>
-                <v-list-item-title>Close Viewer</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-card>
+              prepend-icon="close"
+            >
+              <v-list-item-title>Close Viewer</v-list-item-title>
+            </v-list-item>
+          </v-list>
         </v-menu>
         <v-menu
+          v-model:model-value="introJsOpenMenu"
+          :persistent="introJsDisableMenu"
+          :no-click-animation="introJsDisableMenu"
           :close-on-content-click="false"
-          :close-on-click="true"
-          open-on-hover
-          offset-y
         >
           <template #activator="{ props, isActive }">
             <v-btn
-              variant="flat"
               v-bind="props"
               :color="isActive ? 'secondary' : 'primary'"
+              :disabled="introJsDisableMenu"
+              prepend-icon="settings"
+              variant="flat"
             >
-              <template #prepend>
-                <v-icon>settings</v-icon>
-              </template>
               Settings
             </v-btn>
           </template>
-          <v-card width="350" class="pa-4">
-            <SliderSelector
+          <v-card id="settings-card" width="350" class="pa-4">
+            <ValueSelector
               v-model:value="scanState.Display.Brightness"
               label="Adjust Brightness"
               prepend="percent"
             />
-            <SliderSelector
+            <ValueSelector
               v-model:value="scanState.Display.Contrast"
               label="Adjust Contrast"
               prepend="percent"
             />
-            <SliderSelector
+            <ValueSelector
               v-model:value="scanState.Display.Opacity"
               label="Adjust Opacity"
               prepend="percent"
             />
             <v-divider class="my-4" />
-            <SliderSelector
+            <ValueSelector
               v-model:value="scanState.InteractionSettings.PanSensivitity"
               :min="0"
               :max="100"
               label="Pan Sensitivity"
               prepend="percent"
             />
-            <SliderSelector
+            <ValueSelector
               v-model:value="scanState.InteractionSettings.ZoomSensitivity"
               :min="0"
               :max="100"
               label="Zoom Sensitivity"
               prepend="percent"
             />
-            <SliderSelector
+            <ValueSelector
               v-model:value="scanState.InteractionSettings.RotateSensitivity"
               :min="0"
               :max="100"
               label="Rotate Sensitivity"
               prepend="percent"
             />
-            <SliderSelector
+            <ValueSelector
               v-model:value="
                 scanState.InteractionSettings.CameraRotateSensitivity
               "
@@ -215,9 +145,10 @@
               label="Camera Rotate Sensitivity"
               prepend="percent"
             />
+            <v-divider class="my-4" />
+            <NavigationCubeAction />
           </v-card>
         </v-menu>
-
         <v-spacer />
         <div class="font-weight-bold">
           <span v-if="isDemo" class="text-capitalize">
@@ -234,7 +165,7 @@
           height="36"
           style="min-width: 36px !important"
           :color="isLayout2x2 ? 'secondary' : 'primary'"
-          @click="payloadHandler.layouts(LayoutActions.lo02)"
+          @click="viewer3cr.layouts(LayoutActions.lo02)"
           ><v-icon>grid_view</v-icon>
           <v-tooltip location="bottom" activator="parent">
             Change Layout to 2:2
@@ -245,612 +176,178 @@
           height="36"
           style="min-width: 36px !important"
           :color="isLayout1x3 ? 'secondary' : 'primary'"
-          @click="payloadHandler.layouts(LayoutActions.lo03)"
+          @click="viewer3cr.layouts(LayoutActions.lo03)"
           ><v-icon style="rotate: -90deg">view_comfy</v-icon>
           <v-tooltip location="bottom" activator="parent">
             Change Layout to 1:3
           </v-tooltip></v-btn
         >
-        <v-btn class="" variant="flat" color="red" @click="alterValue(false)"
-          >Close Viewer
+        <v-btn variant="flat" color="red" @click="alterValue(false)">
+          Close Viewer
         </v-btn>
-      </v-toolbar>
-      <v-navigation-drawer
-        v-model="drawer"
-        permanent
-        :rail="drawerCollapsed"
-        rail-width="68"
-        style="opacity: 0.95; margin-top: 48px; height: calc(100vh - 40px)"
-        absolute
-        dark
-        class="rounded-0 motif-background"
-        width="300"
-      >
-        <template v-slot:prepend>
-          <div
-            v-if="!isDemo || demoType === 'patient'"
-            class="d-flex align-center pb-1"
-            :class="drawerCollapsed ? 'py-2' : 'pa-2'"
-          >
-            <img
-              v-if="!drawerCollapsed"
-              src="../../assets/images/dark/3dicom-logo.svg"
-              height="48"
-              alt="logo"
-              class="ma-auto"
-              style="opacity: 0.9"
-            />
-            <img
-              v-if="drawerCollapsed"
-              src="../../assets/images/dark/3DICOM.png"
-              height="64"
-              alt="logo"
-              class="ma-auto"
-              style="opacity: 0.9"
-            />
-          </div>
-          <div
-            v-else
-            class="d-flex align-center pb-1"
-            :class="drawerCollapsed ? 'py-2' : 'pa-2 my-n12'"
-          >
-            <img
-              v-if="!drawerCollapsed"
-              src="../../assets/images/dark/demo-logo.svg"
-              width="100%"
-              alt="logo"
-              class="ma-auto my-n16"
-              style="opacity: 0.9"
-            />
-            <img
-              v-if="drawerCollapsed"
-              src="../../assets/images/dark/demo-icon-small.png"
-              height="48"
-              alt="logo"
-              class="ma-auto"
-              style="opacity: 0.9"
-            />
-          </div>
-          <div
-            class="text-center mx-auto pa-0 text-white sub-type"
-            :style="drawerCollapsed ? 'font-size: 100%' : 'font-size: 140%'"
-          >
-            Online Viewer
-          </div>
-        </template>
-        <template v-slot:append>
-          <v-divider></v-divider>
-          <v-list>
-            <v-tooltip
-              right
-              v-for="(item, index) in footerItems.filter((x) =>
-                x.conditional()
-              )"
-              :key="index"
-            >
-              <template #activator="{ props }">
-                <v-list-item
-                  class="px-2"
-                  :class="[drawerCollapsed && 'py-1']"
-                  target="_blank"
-                  v-bind="props"
-                  :disabled="!(instanceLoaded && !scanLoading)"
-                  @click="item.click()"
-                >
-                  <template v-slot:prepend>
-                    <div
-                      :class="[drawerCollapsed && 'mx-auto']"
-                      class="mx-2"
-                      :style="
-                        drawerCollapsed &&
-                        'margin-left: 10px !important; margin-right: 10px !important;'
-                      "
-                    >
-                      <v-icon
-                        :large="drawerCollapsed"
-                        :size="drawerCollapsed ? 32 : 24"
-                        :color="item.color"
-                      >
-                        {{ item.icon || "radio_button_checked" }}
-                      </v-icon>
-                    </div>
-                  </template>
-                  <v-list-item-title
-                    v-if="!drawerCollapsed"
-                    class="text-white font-weight-medium ml-3"
-                  >
-                    {{ item.text }}
-                  </v-list-item-title>
-                </v-list-item>
-              </template>
-              {{ item.tooltip }}
-            </v-tooltip>
-          </v-list>
-        </template>
-        <v-list v-if="drawerCollapsed">
-          <v-tooltip right v-for="(item, index) in miniMenu" :key="item.text">
-            <template #activator="{ props }">
-              <v-list-item
-                :disabled="!(instanceLoaded && !scanLoading)"
-                class="px-2 py-1"
-                v-bind="props"
-                @click="
-                  openPanels = index;
-                  drawerCollapsed = false;
-                "
-              >
-                <v-icon
-                  size="36"
-                  color="white"
-                  style="
-                    margin-left: 8px !important;
-                    margin-right: 10px !important;
-                  "
-                >
-                  {{ item.icon || "radio_button_checked" }}
-                </v-icon>
-              </v-list-item>
-            </template>
-            {{ item.tooltip }}
-          </v-tooltip>
-        </v-list>
-        <v-expansion-panels
-          v-else
-          v-model="openPanels"
-          style="max-height: 95vh"
-          theme="dark"
-          accordion
-          class="mt-1 transparent pr-0 mr-0"
-        >
-          <v-expansion-panel class="transparent px-0">
-            <v-expansion-panel-title class="font-weight-bold transparent">
-              <span
-                ><v-icon small>{{ miniMenu[0].icon }}</v-icon
-                >&nbsp;&nbsp;{{ miniMenu[0].text }}</span
-              >
-              <v-spacer />
-              <v-tooltip location="right" activator="parent">
-                {{ miniMenu[0].tooltip }}
-              </v-tooltip>
-            </v-expansion-panel-title>
-            <v-expansion-panel-text class="px-0">
-              <DoubleSliderSelector
-                v-model:value="windowSlider"
-                label="Skin to Bone"
-                :min="huMinMax.min"
-                :max="huMinMax.max"
-              />
-              <DoubleSliderSelector
-                v-model:value="thresholdSlider"
-                label="Fine Adjustment"
-                v-bind="huMinMax"
-              />
-              <v-card-actions class="py-3">
-                <v-select
-                  :value="currentGreyscalePreset"
-                  :items="initialScanState.GreyscalePresets"
-                  label="Greyscale Preset"
-                  item-text="Name"
-                  theme="light"
-                  density="compact"
-                  variant="outlined"
-                  persistent-placeholder
-                  hide-details
-                  return-object
-                  :menu-props="{
-                    closeOnContentClick: true,
-                  }"
-                  placeholder="Select a Density Preset"
-                  @change="
-                    payloadHandler.setPreset(PresetsActions.pr01, $event)
-                  "
-                >
-                  <template #item="{ props, item }">
-                    <v-list-item
-                      v-bind="props"
-                      ripple
-                      :title="item.raw.Name"
-                      lines="three"
-                      @mousedown.prevent
-                      @click="
-                        payloadHandler.setPreset(PresetsActions.pr01, item.raw)
-                      "
-                    >
-                      <!--                      <template v-slot:prepend>-->
-                      <!--                        <v-icon-->
-                      <!--                          :icon="getIconForPreset(item.raw.Name)"-->
-                      <!--                        ></v-icon>-->
-                      <!--                      </template>-->
-                      <template v-slot:subtitle>
-                        Skin Density:
-                        <span class="text-mono">{{ item.raw.Lower }}</span>
-                        <v-spacer />
-                        Bone Density:
-                        <span class="text-mono">{{ item.raw.Upper }}</span>
-                      </template>
-                    </v-list-item>
-                  </template>
-                  <template v-slot:selection="{ item }">
-                    <span v-if="item.raw === undefined || !item.raw.Name"
-                      >None</span
-                    >
-                    <span v-else>{{ item.raw.Name }}</span>
-                  </template>
-                </v-select>
-              </v-card-actions>
-              <v-card-actions class="py-3">
-                <v-select
-                  :model-value="currentColourPreset"
-                  label="Colour Preset"
-                  variant="outlined"
-                  density="compact"
-                  :items="initialScanState.ColourPresets"
-                  item-title="Name"
-                  hide-details
-                  :menu-props="{
-                    closeOnContentClick: true,
-                  }"
-                  placeholder="Select a Colour Preset"
-                  return-object
-                  @update:modelValue="
-                    payloadHandler.setPreset(PresetsActions.pr02, $event)
-                  "
-                ></v-select>
-              </v-card-actions>
-            </v-expansion-panel-text>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-navigation-drawer>
-
-      <v-btn
-        height="84"
-        color="grey"
-        variant="flat"
-        width="20"
-        min-width="20"
-        class="my-auto rounded-bl-0 rounded-tl-0 pa-0"
-        style="
-          border-bottom-left-radius: 0 !important;
-          border-top-left-radius: 0 !important;
-          position: absolute;
-          top: 50%;
-          opacity: 0.7;
-          z-index: 100000;
-          transform: translateY(-50%);
-        "
-        :style="drawerCollapsed ? 'left: 68px' : 'left: 300px'"
-        @click="drawerCollapsed = !drawerCollapsed"
-      >
-        <v-icon color="black">{{
-          drawerCollapsed ? "chevron_right" : "chevron_left"
-        }}</v-icon>
-      </v-btn>
-
-      <div
-        class="position-relative pa-0"
-        :style="drawerCollapsed ? 'margin-left: 68px' : 'margin-left: 300px'"
-      >
+      </v-app-bar>
+      <ViewerNavigationDrawer v-model:drawer="drawer" :options="opts" @update:expanded="expanded = $event" />
+      <v-main>
         <WebGL3DR
-          v-show="instanceLoaded && !scanLoading"
-          :class="!(instanceLoaded && !scanLoading) && 'no-pointer-events'"
-          v-if="value"
-          ref="web_gl"
-          id="webgl-container"
-          @on_payload="handleOnPayload"
+          v-show="value && instanceLoaded && !scanLoading"
+          ref="webGl3dr"
           @instance_loaded="load"
-          @hover="payloadHandler.hoverOverCanvas($event)"
+          @dblclick="viewer3cr.viewSelection(ViewSelectionActions.vs05)"
+          @mouseenter="onMouseEnter"
+          @mouseleave="onMouseLeave"
         >
           <div
-            class="bordered-event-window"
             v-for="(layout, index) in scanState.Layout.PositionData"
-            :key="layout.Anchor"
-            :style="{
-              ...generateDivStyleForLayout(layout),
-              cursor:
-                getCurrentActiveView(layout) === ScanView.Volume
-                  ? 'grab !important'
-                  : 'default',
-            }"
-            :data-box-internal="layout.DefaultView"
+            :key="getCurrentView(layout)"
+            :id="`view-${getCurrentView(layout)}`"
+            :ref="(el) => (elements[index] = el)"
+            class="bordered-event-window"
+            :style="generateDivStyleForLayout(layout, webGl3dr!.canvas)"
           >
             <v-hover>
-              <template v-slot:default="{ isHovering, props }">
-                <div style="width: 100%; height: 100%" v-bind="props">
-                  <div
-                    class="buttons-in-view"
-                    v-show="
-                      isHovering || menu || menus.filter((x) => x).length > 0
-                    "
-                  >
-                    <div v-if="scanState.Layout.PositionData.length !== 1">
-                      <v-btn
-                        color="transparent"
-                        @click="fullscreenLayout(layout.DefaultView)"
-                        :icon="true"
-                      >
-                        <v-icon color="white">fullscreen</v-icon>
-                      </v-btn>
-                      <v-tooltip
-                        target="cursor"
-                        location="top"
-                        activator="parent"
-                      >
-                        Make
-                        {{ getViewName(getCurrentActiveView(layout)) }}
-                        fullscreen
-                      </v-tooltip>
-                    </div>
-                    <div v-if="scanState.Layout.PositionData.length === 1">
-                      <v-btn
-                        color="transparent"
-                        @click="payloadHandler.layouts(previousLayout)"
-                        :icon="true"
-                      >
-                        <v-icon color="white">fullscreen_exit</v-icon>
-                      </v-btn>
-                      <v-tooltip
-                        target="cursor"
-                        location="top"
-                        activator="parent"
-                      >
-                        Exit Fullscreen View
-                      </v-tooltip>
-                    </div>
-                    <div>
-                      <v-btn
-                        color="transparent"
-                        :icon="true"
-                        @click="
-                          payloadHandler.viewSelection(
-                            ViewSelectionActions.vs06
-                          );
-                          payloadHandler.viewSelection(
-                            ViewSelectionActions.vs05
-                          );
-                        "
-                        ><v-icon color="white">home</v-icon></v-btn
-                      >
-                      <v-tooltip
-                        target="cursor"
-                        location="top"
-                        activator="parent"
-                      >
-                        Reset volume to default view
-                      </v-tooltip>
-                    </div>
-                    <div
-                      v-if="getCurrentActiveView(layout) === ScanView.Volume"
-                    >
-                      <v-menu
-                        v-model="menu"
-                        :close-on-content-click="false"
-                        location="end"
-                      >
-                        <template v-slot:activator="{ props }">
-                          <v-tooltip location="top">
-                            <template v-slot:activator="{ props: tooltip }">
-                              <v-btn
-                                v-bind="mergeProps(props, tooltip)"
-                                color="transparent"
-                                :icon="true"
-                              >
-                                <v-icon color="white">cut</v-icon>
-                              </v-btn>
+              <template #default="{ isHovering, props }">
+                <v-row v-bind="props" class="flex-nowrap h-100" no-gutters>
+                  <v-col style="min-width: 0">
+                    <v-row class="flex-column h-100" no-gutters>
+                      <v-col class="flex-grow-0">
+                        <div class="d-flex pa-2 pl-3 align-center">
+                          <span style="color: white">{{ getViewName(getCurrentView(layout)) }}</span>
+                          <v-tooltip v-if="isHorizontalFlip(getCurrentView(layout))" location="bottom">
+                            <template #activator="{ props }">
+                              <v-icon
+                                v-bind="props"
+                                icon="swap_horiz"
+                                color="blue-darken-1"
+                                class="ml-2"
+                              />
                             </template>
-                            Slice the 3D Volume
+                            <span>This view has been flipped horizontally</span>
                           </v-tooltip>
-                        </template>
-                        <v-card min-width="400" class="pb-2">
-                          <v-card-title>Slice into the 3D Volume</v-card-title>
-                          <DoubleSliderSelector
-                            v-model:value="tSlider"
-                            label="Transverse"
-                            v-bind="tMinMax"
-                          />
-                          <DoubleSliderSelector
-                            v-model:value="sSlider"
-                            label="Sagittal"
-                            v-bind="sMinMax"
-                          />
-                          <DoubleSliderSelector
-                            v-model:value="cSlider"
-                            label="Coronal"
-                            v-bind="cMinMax"
-                          />
-                        </v-card>
-                      </v-menu>
-                    </div>
-                    <div
-                      v-if="getCurrentActiveView(layout) !== ScanView.Volume"
-                    >
-                      <v-menu
-                        v-model="menus[index]"
-                        :close-on-content-click="false"
-                        :close-on-click="true"
-                        offset-overflow
-                        top
-                      >
-                        <template v-slot:activator="{ props }">
-                          <v-tooltip top>
-                            <template #activator="{ props: ttprops }">
-                              <v-btn
-                                v-bind="{ ...props, ...ttprops }"
-                                :icon="true"
-                              >
-                                <v-icon color="white">360</v-icon>
-                              </v-btn>
+                          <v-tooltip v-if="isVerticalFlip(getCurrentView(layout))" location="bottom">
+                            <template #activator="{ props }">
+                              <v-icon
+                                v-bind="props"
+                                icon="swap_vert"
+                                color="blue-darken-1"
+                                class="ml-2"
+                              />
                             </template>
-                            Rotate
-                            {{ getViewName(getCurrentActiveView(layout)) }} by
-                            an angle
+                            <span>This view has been flipped vertically</span>
                           </v-tooltip>
-                        </template>
-                        <v-card min-width="200" width="200" class="pb-2">
-                          <v-card-subtitle
-                            >Rotate
-                            {{ getViewName(getCurrentActiveView(layout)) }} by
-                            an angle</v-card-subtitle
-                          >
-                          <v-card-text class="py-0">
-                            <v-text-field
-                              hide-details
-                              outlined
-                              v-model="rotationDeg"
-                              type="number"
-                              suffix="deg"
-                            ></v-text-field>
-                          </v-card-text>
-                          <v-card-actions>
-                            <v-spacer />
-                            <v-btn
-                              color="primary"
-                              @click="
-                                payloadHandler.rotateByDeg(
-                                  getCurrentActiveView(layout),
-                                  rotationDeg
-                                )
-                              "
-                              >Rotate</v-btn
-                            >
-                          </v-card-actions>
-                        </v-card>
-                      </v-menu>
-                    </div>
-                  </div>
-                  <div class="slider-in-view" v-if="isHovering || true">
+                        </div>
+                      </v-col>
+                      <v-spacer />
+                      <v-col class="flex-grow-0">
+                        <Transition>
+                          <div v-show="isHovering || modals[getCurrentView(layout)]">
+                            <ViewerActionRail
+                              :view="getCurrentView(layout)"
+                              :element="elements[index]"
+                              @modal="onActionModal"
+                            />
+                          </div>
+                        </Transition>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                  <v-col class="flex-grow-0">
                     <VerticalSliderSelector
-                      v-if="
-                        getCurrentActiveView(layout) === ScanView.Transverse
-                      "
+                      class="h-100 my-0 pa-2 pr-3"
+                      v-if="getCurrentView(layout) === ScanView.Transverse"
                       v-model:value="scanState.Orientations.Transverse.Slice"
                       v-bind="tMinMax"
                     />
                     <VerticalSliderSelector
-                      v-if="getCurrentActiveView(layout) === ScanView.Coronal"
+                      class="h-100 my-0 pa-2 pr-3"
+                      v-if="getCurrentView(layout) === ScanView.Coronal"
                       v-model:value="scanState.Orientations.Coronal.Slice"
                       v-bind="cMinMax"
                     />
                     <VerticalSliderSelector
-                      v-if="getCurrentActiveView(layout) === ScanView.Sagittal"
+                      class="h-100 my-0 pa-2 pr-3"
+                      v-if="getCurrentView(layout) === ScanView.Sagittal"
                       v-model:value="scanState.Orientations.Sagittal.Slice"
                       v-bind="sMinMax"
                     />
-                  </div>
-
-                  <div class="top-lhc" v-if="isHovering">
-                    <div class="white--text">
-                      {{ getViewName(getCurrentActiveView(layout)) }}
-                    </div>
-                  </div>
-                </div>
+                  </v-col>
+                </v-row>
               </template>
             </v-hover>
           </div>
         </WebGL3DR>
-      </div>
-
+        <ViewerAnnotationModal />
+      </v-main>
       <LoadingSpinner v-if="!instanceLoaded" />
       <LoadingSpinner v-if="scanLoading" text="Rendering your scan in 3D" />
-      <v-textarea
-        v-if="stateOverlay"
-        style="
-          position: absolute;
-          top: 0px;
-          right: -0px;
-          width: 240px;
-          z-index: 10000;
-        "
-        class="text--white"
-        color="white"
-        dark
-        outlined
-        height="800"
-        :value="JSON.stringify(scanState, null, 2)"
-        disabled
-      />
     </v-card>
   </v-dialog>
 </template>
+
 <!-- /* c8 ignore stop */ -->
 <script setup lang="ts">
-import LoadingSpinner from "@/components/loading/LoadingSpinner.vue";
-import WebGL3DR from "@/components/WebGL3DR.vue";
-import DoubleSliderSelector from "@/components/sliders/DoubleSliderSelector.vue";
-import SliderSelector from "@/components/selectors/ValueSelector.vue";
-import VerticalSliderSelector from "@/components/sliders/VerticalSliderSelector.vue";
-
 import { generateDivStyleForLayout } from "@/helpers/layoutOverlayStyle";
-
 import {
+  DataOverlayActions,
   FileManagementActions,
   FrontEndInterfaces,
   LayoutActions,
   NotificationsActions,
-  PositionData,
-  PresetsActions,
   ScanMovementActions,
+  ScanStateActions,
   ScanView,
   SlidersActions,
   ViewSelectionActions,
 } from "@3cr/types-ts";
-import {
-  defineEmits,
-  mergeProps,
-  nextTick,
-  ref,
-  unref,
-  watch,
-  WatchSource,
-} from "vue";
-
+import {ComponentInstance, computed, nextTick, onBeforeUnmount, onMounted, ref, unref, watch, WatchSource} from "vue";
 import {
   checkIsDemo,
+  demoOptions,
   demoType,
-  getDemoOption,
   isDemo,
   m_demo,
   m_demoLicenceSendToParty,
   m_demoLicenceShareToMobile,
+  m_demoLicenseEnableCloudStorage,
   m_demoPatient,
+  m_demoPatientEnableCloudStorage,
   m_demoPatientSendToParty,
   m_demoPatientShareToMobile,
-} from "@/demo/options";
+} from "@/components/demo/options";
 import { handleNotification } from "@/notifications/notification";
 import { LoadViewerPayload } from "@/models/LoadViewerPayload";
 import {
   defaultLoadViewerOptions,
   LoadViewerOptions,
 } from "@/models/LoadViewerOptions";
-import { PayloadHandler, sendPayload } from "@/dataLayer/payloadHandler";
 import {
   cMinMax,
-  cSlider,
-  currentColourPreset,
-  currentGreyscalePreset,
-  huMinMax,
+  getCurrentView,
+  getViewName,
   initialScanState,
+  isFullscreen,
+  isHorizontalFlip,
   isLayout1x3,
   isLayout2x2,
+  isVerticalFlip,
   previousLayout,
   scanState,
+  setActiveAnnotation,
+  setDataOverlayState,
+  setInitialDataOverlayState,
   setInitialScanStateFromPayload,
   setScanStateFromPayload,
   sMinMax,
-  sSlider,
   thresholdSlider,
   tMinMax,
   transactionStarted,
-  tSlider,
   windowSlider,
 } from "@/dataLayer/scanState";
-import { getIconForPreset } from "@/dataLayer/iconData";
-import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
-import DemoPatientInfoModal from "@/demo/patient/DemoPatientInfoModal.vue";
-import DemoLicenceInfoModal from "@/demo/licence/DemoLicenceInfoModal.vue";
-import DemoPatientShareToMobileModal from "@/demo/patient/DemoPatientShareToMobileModal.vue";
-import DemoPatientSendToPartyModal from "@/demo/patient/DemoPatientSendToPartyModal.vue";
-import DemoLicenceShareToMobileModal from "@/demo/licence/DemoLicenceShareToMobileModal.vue";
-import DemoLicenceSendToPartyModal from "@/demo/licence/DemoLicenceSendToPartyModal.vue";
+import introJs from "intro.js";
+import type { IntroJs } from "intro.js/src/intro";
+import "intro.js/introjs.css";
+import WebGL3DR from "@/components/WebGL3DR.vue";
+import { useViewer3cr } from "@/dataLayer/useViewer3cr";
+import { useNavigationCubeObserver } from "@/components/modal/composables/useNavigationCubeObserver";
 
 export interface Props {
   payload?: LoadViewerPayload;
@@ -860,6 +357,7 @@ export interface Props {
 const emit = defineEmits<{
   instanceLoaded: [void];
 }>();
+
 const props = withDefaults(defineProps<Props>(), {
   payload: () => ({
     Url: "https://webgl-3dr.singular.health/test_scans/8bdddee1-e581-485d-827d-6aa12eef2fc8/Head+Axial+Axial.3vxl",
@@ -871,86 +369,94 @@ const props = withDefaults(defineProps<Props>(), {
   options: () => defaultLoadViewerOptions,
 });
 
-const web_gl = ref<typeof WebGL3DR | null>(null);
-const payloadHandler = new PayloadHandler(web_gl);
+const viewer3cr = useViewer3cr();
+const webGl3dr = ref<typeof WebGL3DR>();
+const observer = ref<ResizeObserver>();
 const value = ref<boolean>(false);
-const menu = ref<boolean>(false);
-const menus = ref<Array<boolean>>([false, false, false, false]);
-const drawer = ref<boolean>(true);
-const drawerCollapsed = ref<boolean>(true);
+const drawer = ref<boolean>(false);
+const expanded = ref<number | undefined>();
 const scanLoading = ref<boolean>(true);
 const instanceLoaded = ref<boolean>(true);
-const openPanels = ref<number>(0);
-const footerItems = ref([
-  {
-    text: "Reset Scan",
-    tooltip: "Resets your scan to original position and settings in all views",
-    icon: "refresh",
-    color: "red",
-    click: async () => {
-      await payloadHandler.viewSelection(ViewSelectionActions.vs05);
-      await payloadHandler.viewSelection(ViewSelectionActions.vs06);
-    },
-    conditional: () => true,
-  },
-  {
-    text: "Send to 3rd Party",
-    tooltip:
-      "Securely share your loaded scan with 3rd parties via email with option to anonymise",
-    icon: "send",
-    color: "blue",
-    click: async () => executeOption("OnSendTo3rdParty"),
-    conditional: () => showOption("OnSendTo3rdParty"),
-  },
-  {
-    text: "Share to Mobile / VR",
-    tooltip:
-      "Share your loaded scan with the 3Dicom Mobile and VR applications to download within 7 days",
-    icon: "share",
-    color: "yellow",
-    click: async () => executeOption("OnShareToMobile"),
-    conditional: () => showOption("OnShareToMobile"),
-  },
-  {
-    text: "Screenshot View",
-    icon: "screenshot_region",
-    color: "green",
-    click: async () => executeOption("OnScreenshot"),
-    conditional: () => showOption("OnScreenshot"),
-  },
-]);
-const miniMenu = ref([
-  {
-    icon: "display_settings",
-    text: "Tissue Density",
-    tooltip:
-      "Change the range of visible anatomy in the scan by only showing areas with certain density of tissue",
-  },
-]);
-const rotationDeg = ref<number>(0);
-const stateOverlay = ref<boolean>(false);
+const elements = ref<ComponentInstance<any>[]>([]);
 const m_closeDialog = ref<boolean>(false);
+const introJsOpenMenu = ref<boolean>(false);
+const introJsDisableMenu = ref<boolean>(false);
+const modals = ref<Record<ScanView, boolean>>({
+  [ScanView.Volume]: false,
+  [ScanView.Sagittal]: false,
+  [ScanView.Coronal]: false,
+  [ScanView.Transverse]: false,
+});
 
-function showOption(key: keyof LoadViewerOptions): boolean {
-  return getOption(key) !== undefined;
-}
+const tier = computed(() => {
+  const value = demoType.value;
+  return value.charAt(0).toUpperCase() + value.substring(1);
+});
 
-function getOption(
-  key: keyof LoadViewerOptions
-): ViewerCallback | ViewerAsyncCallback | undefined {
-  if (unref(isDemo)) {
-    return getDemoOption(key);
-  } else {
-    return unref(props.options)[key];
+const opts = computed(() => {
+  return unref(isDemo) ? demoOptions.value : props.options;
+});
+
+onMounted(() => {
+  viewer3cr.addInterfaceHandler(FrontEndInterfaces.notifications, async (message: string, action: string) => {
+    await handleNotification(action as NotificationsActions, message);
+  });
+
+  viewer3cr.addActionHandler(FileManagementActions.fm02, async (message: string) => {
+    setInitialScanStateFromPayload(message);
+    await nextTick();
+    transactionStarted.value = false;
+    scanLoading.value = false;
+    drawer.value = true;
+    if (unref(isDemo)) {
+      await viewer3cr.loadDataOverlay("https://webgl-3dr.singular.health/test_scans/sample_annotations.json");
+    }
+    observer.value = useNavigationCubeObserver(webGl3dr.value!.canvas);
+    await startIntro();
+  });
+
+  viewer3cr.addActionHandler(ScanStateActions.ss01, async (message: string) => {
+    await setScanStateFromPayload(message);
+  });
+
+  viewer3cr.addActionHandler(ScanStateActions.ss02, (message: string) => {
+    setDataOverlayState(message);
+  });
+
+  viewer3cr.addActionHandler(DataOverlayActions.do01, (message: string) => {
+    setInitialDataOverlayState(message);
+  });
+
+  viewer3cr.addActionHandler(DataOverlayActions.do02, (message: string) => {
+    setActiveAnnotation(message);
+  });
+
+  viewer3cr.addActionHandler(DataOverlayActions.do07, (message: string) => {
+    setActiveAnnotation(message);
+  });
+});
+
+onBeforeUnmount(() => {
+  if (observer.value) {
+    observer.value.disconnect();
   }
+});
+
+function showOption(key: keyof LoadViewerOptions): boolean {
+  return opts.value[key] !== undefined;
 }
+
 async function executeOption(key: keyof LoadViewerOptions) {
-  const functionToExecute = getOption(key);
+  const functionToExecute = opts.value[key];
   if (functionToExecute !== undefined) {
     await functionToExecute();
   }
 }
 
+function onActionModal(value: boolean, view: ScanView): void {
+  modals.value[view] = value;
+}
+
 type WatchSlidersType = { [key in SlidersActions]: WatchSource<number> };
 const watchSliders: WatchSlidersType = {
   [SlidersActions.sl01]: () => scanState.value.Display.Brightness,
@@ -975,7 +481,7 @@ for (const slider of Object.keys(watchSliders)) {
   watch(
     watchSliders[slider as keyof WatchSlidersType],
     async (value: number) => {
-      await payloadHandler.sliderHandler(slider as SlidersActions, value);
+      await viewer3cr.sliderHandler(slider as SlidersActions, value);
     }
   );
 }
@@ -1000,7 +506,7 @@ for (const scanMovement of Object.keys(watchScanMovement)) {
   watch(
     watchScanMovement[scanMovement as keyof typeof watchScanMovement],
     async (value: number) => {
-      await payloadHandler.scanMovementHandler(
+      await viewer3cr.scanMovementHandler(
         scanMovement as ScanMovementActions,
         value
       );
@@ -1008,33 +514,6 @@ for (const scanMovement of Object.keys(watchScanMovement)) {
   );
 }
 
-function getCurrentActiveView(position: PositionData): ScanView {
-  return unref(scanState).Layout.PositionData.length !== 1
-    ? position.DefaultView
-    : unref(scanState).CurrentView;
-}
-function getViewName(index: number) {
-  return Object.values(ScanView)
-    .filter((value) => typeof value === "string")
-    .map((x) => {
-      if (x === "Volume") return "3D Volume";
-      return x;
-    })[index];
-}
-async function fullscreenLayout(view: ScanView) {
-  await payloadHandler.layouts(LayoutActions.lo01);
-  await payloadHandler.viewSelection(`vs_0${view + 1}` as ViewSelectionActions);
-}
-
-async function closeModal() {
-  await executeOption("OnExitViewer");
-  m_closeDialog.value = false;
-  value.value = false;
-}
-async function closeModalSave() {
-  await executeOption("OnSaveSession");
-  await closeModal();
-}
 function alterValue(val: boolean) {
   if (!val) {
     m_closeDialog.value = true;
@@ -1042,119 +521,221 @@ function alterValue(val: boolean) {
   } else {
     checkIsDemo(props.payload);
   }
-
   value.value = val;
 }
-async function load() {
+
+async function loadSession(url: string): Promise<void> {
+  if (url.includes('3crds')) {
+    await viewer3cr.loadDataOverlay(url);
+  } else if (url.includes('3crms')) {
+    await viewer3cr.loadMcad(url);
+  } else if (url.includes('3crs')) {
+    await viewer3cr.loadScanSession(url);
+  } else {
+    throw new Error('Invalid URL type');
+  }
+}
+
+async function load(): Promise<void> {
   instanceLoaded.value = true;
   scanLoading.value = true;
-  await sendPayload(web_gl, "file_management", "fm_01", props.payload);
+  await viewer3cr.loadScan(props.payload);
 }
 
-async function i_fileManagement(action: string, message: string) {
-  if (action === FileManagementActions.fm02) {
-    await setInitialScanStateFromPayload(action, message);
+async function onMouseEnter(): Promise<void> {
+  await viewer3cr.hoverOverCanvas(true);
+}
 
-    await nextTick();
-    transactionStarted.value = false;
-    scanLoading.value = false;
-    drawerCollapsed.value = false;
-    await payloadHandler.hoverOverCanvas(false);
-    await payloadHandler.setNavCubeVisibility(false);
-  }
+async function onMouseLeave(): Promise<void> {
+  await viewer3cr.hoverOverCanvas(false);
 }
 
-function handleOnPayload(
-  interfaceSet: string | FrontEndInterfaces,
-  actionSet: string,
-  message: string
-) {
-  if (interfaceSet === FrontEndInterfaces.scan_state) {
-    setScanStateFromPayload(actionSet, message);
-  }
-  if (interfaceSet === FrontEndInterfaces.file_management) {
-    i_fileManagement(actionSet, message);
-  }
-  if (interfaceSet === FrontEndInterfaces.notifications) {
-    handleNotification(actionSet as NotificationsActions, message);
-  }
+async function startIntro(): Promise<void> {
+  let intro: IntroJs | null = null;
+
+  const sleep = (delay: number) =>
+    new Promise((resolve) => setTimeout(resolve, delay));
+
+  const refreshHandle = watch(scanState, () => {
+    intro?.refresh(true);
+  });
+
+  const expandHandle = watch(expanded, async () => {
+    // For some reason introjs refresh by itself doesn't work here
+    if (intro && intro.currentStep() === 1) {
+      await sleep(400);
+      const skinToBone = document.getElementById('skin-to-bone');
+      const floatingElement = document.querySelector('.introjsFloatingElement') as HTMLElement | null;
+      intro._introItems[1].element = skinToBone ?? floatingElement;
+      intro.refresh(true);
+    }
+  });
+
+  const blurActiveElement = () => {
+    (document.activeElement as HTMLElement).blur();
+  };
+
+  intro = await introJs()
+    .setOptions({
+      exitOnOverlayClick: false,
+      keyboardNavigation: false,
+      dontShowAgain: true,
+      steps: [
+        {
+          title: "Take the Viewer Tour",
+          intro:
+            `Welcome to the ${tier.value} Online DICOM Viewer.` +
+            "<br/><br/>Take the short interative tour to better visualize your medical images in 2D and 3D.",
+          position: "floating",
+        },
+        {
+          title: "Density Slider",
+          intro:
+            "Move the <em>lower density slider</em> to the right to hide softer tissue like skin and view internal organs." +
+            "<br/><br/>For more precise control, change the numbers in the boxes above or use the <em>Fine Adjustment</em> slider below.",
+          element: "#skin-to-bone",
+          position: "right",
+        },
+        {
+          title: "3D Viewing Controls",
+          intro:
+            "With your cursor placed in the 3D view, <b>scroll to zoom</b> & <b>click and drag to rotate</b>." +
+            "<br/><br/>You can also view the 3D view in full screen, reset the view, and cut into the 3D model from each side using the <em>3D slicing tool</em>.",
+          element: `#view-${ScanView.Volume}`,
+        },
+        {
+          title: "2D Viewing Controls",
+          intro:
+            "With your mouse in the 2D views, <b>scroll to navigate through the 2D images</b>, and use <b>Shift + Arrows to Pan and Zoom</b>." +
+            "<br/><br/>Use the icons to <em>Fullscreen</em>, <em>Reset</em>, <em>Rotate</em>, and <em>Flip</em> each individual 2D view.",
+          element: `#view-${ScanView.Sagittal}`,
+        },
+        {
+          title: "Global settings",
+          intro:
+            "Accurately change the <b>brightness</b>, <b>contrast</b>, and <b>opacity</b> to enhance the appearance of your medical images." +
+            "<br/><br/>Adjust the sensitivity of mouse and keyboard inputs to suit your preferences.",
+          element: "#settings-card",
+          position: "right",
+        },
+        {
+          title: "Stay Tuned for Updates",
+          intro:
+            '<img src="https://c.tenor.com/S4Sz_yvlLn4AAAAC/cats-cat.gif" alt="cat" width="260" height="260">' +
+            "<br/>Us working hard on new features",
+          position: "floating",
+        },
+      ],
+    })
+    .onbeforechange(function (
+      el: HTMLElement,
+      step: number,
+      direction: "forward" | "backward"
+    ) {
+      // Focus on volume view if moving to step 2
+      modals.value[ScanView.Volume] = step === 2;
+
+      // Focus on sagittal view if moving to step 3
+      modals.value[ScanView.Sagittal] = step === 3;
+
+      // If the user has enabled full-screen, turn it off for steps 2 and 3
+      if (isFullscreen.value && (step === 2 || step === 3)) {
+        viewer3cr
+          .layouts(previousLayout.value)
+          .then(() => nextTick())
+          .then(() => this.refresh(true))
+          .then(() => direction === "forward" ? this.nextStep() : this.previousStep());
+        return false;
+      }
+
+      // Wait for menu animation before focusing if moving to step 4
+      if (!introJsOpenMenu.value && step === 4) {
+        introJsOpenMenu.value = true;
+        introJsDisableMenu.value = true;
+        sleep(400)
+          .then(() => this.refresh(true))
+          .then(() => direction === "forward" ? this.nextStep() : this.previousStep());
+        return false;
+      } else if (introJsOpenMenu.value && step !== 4) {
+        introJsOpenMenu.value = false;
+        introJsDisableMenu.value = false;
+      }
+
+      // Only show Don't Show Again on last step
+      const introjsDontShowAgain = document.querySelector(".introjs-dontShowAgain") as HTMLElement | null;
+      if (introjsDontShowAgain) {
+        const lastStep = this._options.steps.length - 1;
+        introjsDontShowAgain.style.display = step !== lastStep ? "none" : "block";
+      }
+
+      return true;
+    })
+    .onchange(() => {
+      setTimeout(() => blurActiveElement(), 500);
+    })
+    .onexit(() => {
+      introJsOpenMenu.value = false;
+      introJsDisableMenu.value = false;
+      setTimeout(() => blurActiveElement(), 500);
+      refreshHandle();
+      expandHandle();
+    })
+    .start();
 }
 
 defineExpose({
   alterValue,
+  loadSession,
   load,
-  handleOnPayload,
-  sendPayload,
-  getIconForPreset,
+  startIntro,
   thresholdSlider,
   windowSlider,
   m_closeDialog,
-  closeModal,
   scanState,
   initialScanState,
-  footerItems,
-  getCurrentActiveView,
-  getViewName,
-  fullscreenLayout,
   value,
   transactionStarted,
 });
 </script>
+
 <style>
-.v-dialog:not(.v-dialog--fullscreen) {
-  max-height: unset !important;
-}
-.v-expansion-panel-content__wrap {
-  padding: 0 8px 4px;
-  flex: 1 1 auto;
-  max-width: 100%;
+#view-0 {
+  cursor: grab;
 }
+
 .bordered-event-window {
   position: absolute;
   border: 1px rgba(128, 128, 128, 0.56) solid;
-  pointer-events: auto;
+  transition: border 0.5s;
 }
+
 .bordered-event-window:hover {
-  position: absolute;
-  border: 2px dashed rgb(0, 152, 253);
-}
-.v-expansion-panel--active > .v-expansion-panel-header {
-  min-height: 48px;
+  border: 1px dashed rgb(0, 152, 253);
 }
 
-.btn-close-dense {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.v-slider.v-slider--vertical {
-  height: 90%;
+.motif-background {
+  background: url("data:image/svg+xml,%3Csvg width='992' height='560' viewBox='15 7 992 560' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='1' width='992' height='567' fill='url(%23paint0_linear_504_579)'/%3E%3Cg filter='url(%23filter0_i_504_579)'%3E%3Cpath d='M567.029 291.5C574.21 421.339 748.15 561 825.931 561H12L12.0001 0C153.713 0 580.363 0 580.363 0C684.258 142 560.918 181 567.029 291.5Z' fill='%231B2E43' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter1_i_504_579)'%3E%3Cpath d='M435.911 260.5C462.579 433.5 652.034 561 729.815 561H12L12.0001 0C233.678 0 409.954 92.1126 435.911 260.5Z' fill='%231B2E43' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter2_i_504_579)'%3E%3Ccircle cx='46' cy='521' r='93' fill='%231B2E43' fill-opacity='0.3'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_i_504_579' x='12' y='0' width='858.931' height='606' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3Cfilter id='filter1_i_504_579' x='12' y='0' width='762.815' height='606' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3Cfilter id='filter2_i_504_579' x='-47' y='428' width='231' height='231' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_504_579' x1='1251.04' y1='696.83' x2='21.486' y2='-10.2783' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230E141D'/%3E%3Cstop offset='1' stop-color='%2323405E'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") !important;
+  background-size: cover !important;
 }
 
-.slider-in-view {
-  position: absolute;
-  right: 16px;
-  top: 0;
-  height: 100%;
-}
-.buttons-in-view {
-  position: absolute;
-  left: 12px;
-  bottom: 12px;
+.introjs-tooltipReferenceLayer {
+  z-index: 2401;
 }
-.top-lhc {
-  position: absolute;
-  left: 16px;
-  top: 12px;
+
+.introjs-overlay, .introjs-helperLayer {
+  pointer-events: none;
+  z-index: 2401;
 }
-.buttons-in-view > div {
-  display: inline-block;
+
+.introjs-dontShowAgain {
+  display: none;
 }
-.motif-background {
-  background: url("data:image/svg+xml,%3Csvg width='992' height='560' viewBox='15 7 992 560' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='15' y='1' width='992' height='567' fill='url(%23paint0_linear_504_579)'/%3E%3Cg filter='url(%23filter0_i_504_579)'%3E%3Cpath d='M567.029 291.5C574.21 421.339 748.15 561 825.931 561H12L12.0001 0C153.713 0 580.363 0 580.363 0C684.258 142 560.918 181 567.029 291.5Z' fill='%231B2E43' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter1_i_504_579)'%3E%3Cpath d='M435.911 260.5C462.579 433.5 652.034 561 729.815 561H12L12.0001 0C233.678 0 409.954 92.1126 435.911 260.5Z' fill='%231B2E43' fill-opacity='0.9'/%3E%3C/g%3E%3Cg filter='url(%23filter2_i_504_579)'%3E%3Ccircle cx='46' cy='521' r='93' fill='%231B2E43' fill-opacity='0.3'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_i_504_579' x='12' y='0' width='858.931' height='606' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3Cfilter id='filter1_i_504_579' x='12' y='0' width='762.815' height='606' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.25 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3Cfilter id='filter2_i_504_579' x='-47' y='428' width='231' height='231' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='45' dy='45'/%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.653125 0 0 0 0 0.761642 0 0 0 0 0.916667 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_504_579'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_504_579' x1='1251.04' y1='696.83' x2='21.486' y2='-10.2783' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230E141D'/%3E%3Cstop offset='1' stop-color='%2323405E'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") !important;
-  background-size: cover !important;
+
+.v-enter-active, .v-leave-active {
+  transition: opacity 0.5s ease;
 }
-.v-expansion-panel-text__wrapper {
-  padding: 8px 8px 16px;
+
+.v-enter-from, .v-leave-to {
+  opacity: 0;
 }
 </style>