remove previous option stuff and animations

packages/bbui/src/Tooltip/Context.svelte

@@ -6,96 +6,30 @@
   export let anchor
   export let visible = false
   export let offset = 0;
-  export let noAnimation = false
 
   $: target = getContext(Context.PopoverRoot) || "#app"
 
   let hovering = false
-  let wrapper
+  let tooltip
-  let currentTooltip
+  let x = 0
-  let previousTooltip
+  let y = 0
 
-  let initialShow = true;
+  const updatePosition = (anchor, tooltip) => {
-  let previousX = 0
+    if (anchor == null || tooltip == null) {
-  let previousY = 0
+      return;
-  let currentX = 0
-  let currentY = 0
-
-  let currentTooltipWidth = 0
-  let currentTooltipHeight = 0
-
-  const handleVisibilityChange = (visible, hovering) => {
-    if (!visible && !hovering) {
-      initialShow = true;
     }
-  }
 
-  const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper) => {
     requestAnimationFrame(() => {
-      if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null) {
-        return;
-      }
-
       const rect = anchor.getBoundingClientRect();
+      const windowOffset = (window.innerHeight - offset) - (tooltip.clientHeight + rect.y)
+      const tooltipWidth = tooltip.clientWidth
 
-
+      x = rect.x - tooltipWidth - offset
-      const windowOffset = (window.innerHeight - offset) - (currentTooltip.clientHeight + rect.y)
+      y = windowOffset < 0 ? rect.y + windowOffset : rect.y
-
-      currentTooltipWidth = currentTooltip.clientWidth
-      currentTooltipHeight = currentTooltip.clientHeight
-
-      previousX = currentX
-      previousY = currentY
-
-      // - width to align to left side of anchor
-      currentX = rect.x - currentTooltipWidth - offset
-      currentY = windowOffset < 0 ? rect.y + windowOffset : rect.y
-      const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
-      const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
-
-      const fadeInTiming = {
-        duration: 200,
-        delay: 100,
-        iterations: 1,
-        easing: "ease-in",
-        fill: "both"
-      };
-      const fadeOutTiming = {
-        duration: 200,
-        iterations: 1,
-        easing: "ease-in",
-        fill: "forwards"
-      };
-
-      if (!noAnimation) {
-      currentTooltip.animate(fadeIn, fadeInTiming);
-      previousTooltip.animate(fadeOut, fadeOutTiming);
-      }
-
-      // Bypass animations if the tooltip has only just been opened
-      if (initialShow) {
-        initialShow = false;
-
-        previousTooltip.style.visibility = "hidden"
-
-        wrapper.style.transition = "none";
-        //wrapper.style.width = `${currentTooltipWidth}px`
-        //wrapper.style.height = `${currentTooltipHeight}px`
-        wrapper.style.top = `${currentY}px`
-        wrapper.style.left = `${currentX}px`
-
-
-        requestAnimationFrame(() => {
-          wrapper.style.removeProperty("transition");
-        })
-      } else {
-        previousTooltip.style.removeProperty("visibility");
-      }
     })
   }
 
-  $: updatePosition(anchor, currentTooltip, previousTooltip, wrapper)
+  $: updatePosition(anchor, tooltip)
-  $: handleVisibilityChange(visible, hovering)
 
   const handleMouseenter = (e) => {
     hovering = true;
@@ -108,85 +42,38 @@
 
 <Portal {target}>
   <div
-    bind:this={wrapper}
     on:mouseenter={handleMouseenter}
     on:mouseleave={handleMouseleave}
-    style:left={`${currentX}px`}
+    style:left={`${x}px`}
-    style:top={`${currentY}px`}
+    style:top={`${y}px`}
-    style:width={`${currentTooltipWidth}px`}
+    class="wrapper"
-    style:height={`${currentTooltipHeight}px`}
-    class="tooltip"
     class:visible={visible || hovering}
-    class:noAnimation
   >
-  <!-- absolutely position element with the opposite positioning, so that the tooltip elements can be positioned
+    <div
-    using the same values as the root wrapper, while still being occluded by it.
+      bind:this={tooltip}
-  -->
+      class="tooltip"
-    <div class="screenSizeAbsoluteWrapper"
+    >
-      style:left={`${-currentX}px`}
+      <slot />
-      style:top={`${-currentY}px`}
-    class:noAnimation
-      >
-      <div
-        bind:this={currentTooltip}
-        class="currentContent"
-        style:left={`${currentX}px`}
-        style:top={`${currentY}px`}
-      >
-        <slot />
-      </div>
-      <div
-        class="previousContent"
-        style:left={`${previousX}px`}
-        style:top={`${previousY}px`}
-        bind:this={previousTooltip}
-      >
-        <slot name="previous"/>
-      </div>
     </div>
   </div>
 </Portal>
 
 <style>
-  .tooltip {
+  .wrapper {
-    position: absolute;
-    z-index: 9999;
-    pointer-events: none;
     background-color: var(--background-alt);
     box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.42);
+    opacity: 0;
+    overflow: hidden;
 
     border-radius: 5px;
     box-sizing: border-box;
     border: 1px solid var(--grey-4);
-    opacity: 0;
-    overflow: hidden;
-
-    transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
-  }
-
-  .screenSizeAbsoluteWrapper {
-    width: 200vw;
-    height: 100vh;
     position: absolute;
-    transition: top 300ms ease-in, left 300ms ease-in;
+    z-index: 1000;
-  }
-
-  .noAnimation {
-    transition: none;
   }
 
   .visible {
     opacity: 1;
     pointer-events: auto;
   }
-
-  .currentContent {
-    position: absolute;
-    z-index: 10001;
-  }
-
-  .previousContent {
-    position: absolute;
-    z-index: 10000;
-  }
 </style>

packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte

@@ -11,7 +11,6 @@
 
 
 <ContextTooltip
-  noAnimation
   visible={subject !== subjects.none}
   {anchor}
   offset={20}

packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte

@@ -11,7 +11,6 @@
   export let columnIcon
   export let columnType
   export let columnName
-  export let showDetails = false
 
   export let tableHref = () => {}
 
@@ -84,7 +83,7 @@
   {/if}
 </div>
 
-{#if showDetails}
+{#if detailsModalSubject !== subjects.none}
   <DetailsModal
     {columnName}
     anchor={root}

packages/builder/src/components/design/settings/controls/FieldSelect.svelte

@@ -16,7 +16,6 @@
 
   let contextTooltipAnchor = null
   let currentOption = null
-  let previousOption = null
   let contextTooltipVisible = false
 
   const dispatch = createEventDispatcher()
@@ -49,7 +48,6 @@
         contextTooltipVisible = false;
     } else {
     contextTooltipAnchor = e?.target;
-    previousOption = currentOption;
     currentOption = option;
     contextTooltipVisible = true;
     }
@@ -110,7 +108,6 @@
     offset={20}
   >
     <Explanation
-      showDetails
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
@@ -118,13 +115,5 @@
       columnType={getOptionIconTooltip(currentOption)}
       {explanation}
     />
-    <Explanation
-      slot="previous"
-      schema={schema[previousOption]}
-      columnIcon={getOptionIcon(previousOption)}
-      columnName={previousOption}
-      columnType={getOptionIconTooltip(previousOption)}
-      {explanation}
-    />
   </ContextTooltip>
 {/if}

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -18,7 +18,6 @@
 
   let contextTooltipAnchor = null
   let currentOption = null
-  let previousOption = null
   let contextTooltipVisible = false
 
   $: componentDefinition = componentStore.getDefinition(
@@ -80,12 +79,11 @@
 
   const updateTooltip = debounce((e, option) => {
     if (option == null) {
-        contextTooltipVisible = false;
+      contextTooltipVisible = false;
     } else {
-    contextTooltipAnchor = e?.target;
+      contextTooltipAnchor = e?.target;
-    previousOption = currentOption;
+      currentOption = option;
-    currentOption = option;
+      contextTooltipVisible = true;
-    contextTooltipVisible = true;
     }
   }, 200);
 
@@ -116,7 +114,6 @@
     offset={20}
   >
     <Explanation
-      showDetails
       tableHref={`/builder/app/${$params.application}/data/table/${datasource?.tableId}`}
       schema={schema[currentOption]}
       columnIcon={getOptionIcon(currentOption)}
@@ -124,13 +121,5 @@
       columnType={getOptionIconTooltip(currentOption)}
       {explanation}
     />
-    <Explanation
-      slot="previous"
-      schema={schema[previousOption]}
-      columnIcon={getOptionIcon(previousOption)}
-      columnName={previousOption}
-      columnType={getOptionIconTooltip(previousOption)}
-      {explanation}
-    />
   </ContextTooltip>
 {/if}