feat: Picker and Highlighter use data-mweb-context-level parameter …

…(DAP-4731) (#11)

* feat: Picker and Highlighter use `data-mweb-context-level` parameter (DAP-4731)

* fix: callouts can be at different layers

* style: format code

---------

Co-authored-by: Alexander Sakhaev <alsakhaev@gmail.com>

apps/extension/src/contentscript/multitable-panel/components/dropdown.tsx

@@ -163,6 +163,7 @@ export const Dropdown: FC<DropdownProps> = ({
                 data-testid="mutate-button"
                 data-mweb-context-type="notch"
                 data-mweb-context-parsed={JSON.stringify({ id: 'mutate-button' })}
+                data-mweb-context-level="system"
               >
                 Mutate {<Mutate />}
                 <div data-mweb-insertion-point="hidden" style={{ display: 'none' }}></div>
@@ -175,6 +176,7 @@ export const Dropdown: FC<DropdownProps> = ({
                 data-testid="recently-used-mutations"
                 data-mweb-context-type="notch"
                 data-mweb-context-parsed={JSON.stringify({ id: 'recently-used-mutations' })}
+                data-mweb-context-level="system"
               >
                 {recentlyUsedMutations.map((mut) => (
                   <InputBlock key={mut.id} isActive={mut.id === selectedMutation?.id}>
@@ -229,6 +231,7 @@ export const Dropdown: FC<DropdownProps> = ({
                   onClick={handleAccordeonClick}
                   data-mweb-context-type="notch"
                   data-mweb-context-parsed={JSON.stringify({ id: 'unused-mutations-title' })}
+                  data-mweb-context-level="system"
                 >
                   <AvalibleLable>available</AvalibleLable>
                   {/* todo: mock */}

apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx

@@ -215,6 +215,7 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
               data-testid="notch"
               data-mweb-context-type="notch"
               data-mweb-context-parsed={JSON.stringify({ id: 'notch' })}
+              data-mweb-context-level="system"
               className={
                 isPin
                   ? 'visible-pin'

apps/gateway/src/components/navigation/desktop/MutationDropdown.js

@@ -302,6 +302,7 @@ export function MutationDropdown({ imageSrc, listPosition = 'right' }) {
       <MutationWrapper
         data-mweb-context-type="mweb-gateway"
         data-mweb-context-parsed={JSON.stringify({ id: 'mutation-wrapper' })}
+        data-mweb-context-level="system"
       >
         <div data-mweb-insertion-point="mutation-wrapper" style={{ display: 'none' }}></div>
         <ActiveMutation>
@@ -315,6 +316,7 @@ export function MutationDropdown({ imageSrc, listPosition = 'right' }) {
     <MutationWrapper
       data-mweb-context-type="mweb-gateway"
       data-mweb-context-parsed={JSON.stringify({ id: 'mutation-wrapper' })}
+      data-mweb-context-level="system"
     >
       <div data-mweb-insertion-point="mutation-wrapper" style={{ display: 'none' }}></div>
       {selectedMutation ? (
@@ -349,6 +351,7 @@ export function MutationDropdown({ imageSrc, listPosition = 'right' }) {
           }}
           data-mweb-context-type="mweb-gateway"
           data-mweb-context-parsed={JSON.stringify({ id: 'mutations-list' })}
+          data-mweb-context-level="system"
         >
           <div data-mweb-insertion-point="mutations-list" style={{ display: 'none' }}></div>
           {selectedMutation ? (

libs/core/src/index.ts

@@ -5,7 +5,7 @@ export { JsonParser, JsonParserConfig } from './parsers/json-parser'
 export { BosParser, BosParserConfig } from './parsers/bos-parser'
 export { MutableWebParser } from './parsers/mweb-parser'
 export { PureContextNode } from './tree/pure-tree/pure-context-node'
-export { IContextNode, ITreeBuilder } from './tree/types'
+export { IContextNode, ITreeBuilder, ContextLevel } from './tree/types'
 export { AdapterType, ParserConfig } from './types'
 export { Subscription } from './event-emitter'
 export { InsertionPointWithElement } from './tree/types'

libs/core/src/tree/pure-tree/pure-context-node.ts

@@ -1,9 +1,10 @@
 import { EventEmitter, Subscription } from '../../event-emitter'
-import { IContextNode, InsertionPointWithElement, TreeNodeEvents } from '../types'
+import { ContextLevel, IContextNode, InsertionPointWithElement, TreeNodeEvents } from '../types'
 
 export class PureContextNode implements IContextNode {
   public id: string | null = null
   public contextType: string
+  public contextLevel: ContextLevel
   public namespace: string
   public parentNode: IContextNode | null = null
   public children: IContextNode[] = []
@@ -37,13 +38,15 @@ export class PureContextNode implements IContextNode {
     contextType: string,
     parsedContext: any = {},
     insPoints: InsertionPointWithElement[] = [],
-    element: HTMLElement | null = null
+    element: HTMLElement | null = null,
+    contextLevel: ContextLevel
   ) {
     this.namespace = namespace
     this.contextType = contextType
     this.parsedContext = parsedContext
     this.insPoints = insPoints
     this.element = element
+    this.contextLevel = contextLevel
 
     // ToDo: the similar logic is in tree builder
     this.id = parsedContext.id ?? null

libs/core/src/tree/pure-tree/pure-tree-builder.ts

@@ -1,6 +1,12 @@
 import { DappletsEngineNs } from '../../constants'
 import { isDeepEqual } from '../../utils'
-import { IContextNode, ITreeBuilder, InsertionPointWithElement, ParsedContext } from '../types'
+import {
+  ContextLevel,
+  IContextNode,
+  ITreeBuilder,
+  InsertionPointWithElement,
+  ParsedContext,
+} from '../types'
 import { PureContextNode } from './pure-context-node'
 
 export type TreeBuilderEvents = {
@@ -36,7 +42,14 @@ export class PureTreeBuilder implements ITreeBuilder {
     insPoints: InsertionPointWithElement[] = [],
     element: HTMLElement | null = null
   ): IContextNode {
-    return new PureContextNode(namespace, contextType, parsedContext, insPoints, element)
+    return new PureContextNode(
+      namespace,
+      contextType,
+      parsedContext,
+      insPoints,
+      element,
+      (element?.getAttribute('data-mweb-context-level') || 'default') as ContextLevel // ToDo: hardcoded
+    )
   }
 
   updateParsedContext(context: IContextNode, newParsedContext: any): void {

libs/core/src/tree/types.ts

@@ -18,9 +18,12 @@ export type ParsedContext = {
   [key: string]: any
 }
 
+export type ContextLevel = 'default' | 'system' | 'callout'
+
 export interface IContextNode {
   id: string | null
   contextType: string // ToDo: rename to type
+  contextLevel: ContextLevel
   namespace: string
   parentNode: IContextNode | null // ToDo: rename to parent
   element: HTMLElement | null

libs/core/src/utils.ts

@@ -1,5 +1,3 @@
-import { IContextNode } from './tree/types'
-
 export function isDeepEqual(obj1: any, obj2: any): boolean {
   if (obj1 === obj2) return true
 

libs/engine/src/app/common/transferable-context.ts

@@ -1,8 +1,9 @@
-import { IContextNode } from '@mweb/core'
+import { IContextNode, ContextLevel } from '@mweb/core'
 
 export interface TransferableContext {
   namespace: string
   type: string
+  level: ContextLevel
   id: string | null
   parsed: any
   parent: TransferableContext | null
@@ -13,6 +14,7 @@ export interface TransferableContext {
 export const buildTransferableContext = (context: IContextNode): TransferableContext => ({
   namespace: context.namespace,
   type: context.contextType,
+  level: context.contextLevel,
   id: context.id,
   parsed: context.parsedContext,
   parent: context.parentNode ? buildTransferableContext(context.parentNode) : null,

libs/engine/src/app/components/context-highlighter.tsx

@@ -20,12 +20,29 @@ export const ContextHighlighter = () => {
             : TargetService.isTargetMet(highlighterTask.target, context)
           : true
 
+        const calloutLevel =
+          context.contextLevel === 'callout' &&
+          context.element?.attributes?.getNamedItem('data-context-level')?.value
+
         return isSuitable && context.element ? (
           <Highlighter
             el={context.element}
             styles={{
               ...highlighterTask.styles,
               opacity: 1,
+              zIndex:
+                1000 *
+                (context.contextLevel === 'system'
+                  ? 6
+                  : calloutLevel === 'default'
+                    ? 3
+                    : calloutLevel === 'system'
+                      ? 8
+                      : 1),
+              position:
+                context.contextLevel === 'default' || calloutLevel === 'default'
+                  ? 'absolute'
+                  : 'fixed',
             }}
             isFilled={highlighterTask.isFilled}
             children={highlighterTask.icon}

libs/engine/src/app/components/highlighter.tsx

@@ -25,6 +25,7 @@ export const Highlighter = ({
 }) => {
   const bodyOffset = document.documentElement.getBoundingClientRect()
   const targetOffset = el.getBoundingClientRect()
+  const bodyOffsetTop = styles.position === 'absolute' ? bodyOffset.top : 0
 
   const backgroundColor = isFilled
     ? styles.backgroundColor ?? DEFAULT_BACKGROUND_COLOR
@@ -48,30 +49,30 @@ export const Highlighter = ({
 
     const topStyle: React.CSSProperties = {
       left: targetOffset.left - bodyOffset.left + borderWidth * 2,
-      top: targetOffset.top - 1 - bodyOffset.top,
+      top: targetOffset.top - 1 - bodyOffsetTop,
       width: targetOffset.width - borderRadius - borderWidth,
       height: borderWidth,
-      position: 'absolute',
+      position: styles.position,
       zIndex,
       borderTop: border,
     }
 
     const bottomStyle: React.CSSProperties = {
       left: targetOffset.left - bodyOffset.left + borderWidth * 2,
-      top: targetOffset.top + targetOffset.height - 1 - bodyOffset.top,
+      top: targetOffset.top + targetOffset.height - 1 - bodyOffsetTop,
       width: targetOffset.width - borderRadius - borderWidth,
       height: borderWidth,
-      position: 'absolute',
+      position: styles.position,
       zIndex,
       borderBottom: border,
     }
 
     const leftStyle: React.CSSProperties = {
       left: targetOffset.left - bodyOffset.left - borderWidth,
-      top: targetOffset.top - 1 - bodyOffset.top,
+      top: targetOffset.top - 1 - bodyOffsetTop,
       height: targetOffset.height + borderWidth,
       width: borderRadius,
-      position: 'absolute',
+      position: styles.position,
       zIndex,
       borderLeft: border,
       borderTop: border,
@@ -81,10 +82,10 @@ export const Highlighter = ({
 
     const rightStyle: React.CSSProperties = {
       left: targetOffset.left + targetOffset.width - bodyOffset.left - borderWidth * 2,
-      top: targetOffset.top - 1 - bodyOffset.top,
+      top: targetOffset.top - 1 - bodyOffsetTop,
       height: targetOffset.height + borderWidth,
       width: borderRadius,
-      position: 'absolute',
+      position: styles.position,
       zIndex,
       borderRight: border,
       borderTop: border,
@@ -103,11 +104,11 @@ export const Highlighter = ({
   }
 
   const wrapperStyle: React.CSSProperties = {
-    position: 'absolute',
+    position: styles.position,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    top: targetOffset.top - bodyOffset.top,
+    top: targetOffset.top - bodyOffsetTop,
     left: targetOffset.left - bodyOffset.left,
     width: targetOffset.width,
     height: targetOffset.height,

libs/engine/src/app/components/picker-highlighter.tsx

@@ -5,7 +5,6 @@ import { Highlighter } from './highlighter'
 
 const DEFAULT_INACTIVE_BORDER_COLOR = '#384BFF4D' // light blue
 const DEFAULT_CHILDREN_BORDER_STYLE = 'dashed'
-const PRIVILEGED_NAMESPACE = 'mweb' // ToDo: hardcode. Needs to be fixed.
 
 const getElementDepth = (el: Element | ShadowRoot | null | undefined) => {
   let depth = 0
@@ -30,7 +29,7 @@ interface IPickerHighlighter {
   LatchComponent?: React.FC<{
     context: IContextNode
     variant: 'current' | 'parent' | 'child'
-    contextDimensions: { width: number; height: number }
+    contextDimensions: { width: number; height: number; top: number; left: number }
   }>
   children?: ReactElement | ReactElement[]
 }
@@ -62,6 +61,8 @@ export const PickerHighlighter: FC<IPickerHighlighter> = ({
               contextDimensions={{
                 width: targetOffset?.width || 0,
                 height: targetOffset?.height || 0,
+                top: targetOffset?.top || 0,
+                left: targetOffset?.left || 0,
               }}
             />
           ).trim()
@@ -109,7 +110,22 @@ export const PickerHighlighter: FC<IPickerHighlighter> = ({
   const borderColor =
     styles?.borderColor ?? variant !== 'current' ? DEFAULT_INACTIVE_BORDER_COLOR : undefined
 
-  const zIndex = 1000 * (context.namespace === PRIVILEGED_NAMESPACE ? 10 : 1) + (contextDepth ?? 0)
+  const calloutLevel =
+    context.contextLevel === 'callout' &&
+    context.element?.attributes?.getNamedItem('data-context-level')?.value
+
+  if (calloutLevel === 'callout') return
+
+  const zIndex =
+    1000 *
+      (context.contextLevel === 'system'
+        ? 6
+        : calloutLevel === 'default'
+          ? 3
+          : calloutLevel === 'system'
+            ? 8
+            : 1) +
+    (contextDepth ?? 0)
 
   const doShowLatch = LatchComponent && (variant === 'current' || variant === 'parent')
 
@@ -130,6 +146,8 @@ export const PickerHighlighter: FC<IPickerHighlighter> = ({
             contextDimensions={{
               width: targetOffset.width,
               height: targetOffset.height,
+              top: targetOffset.top,
+              left: targetOffset.left,
             }}
           />
         </div>
@@ -144,6 +162,8 @@ export const PickerHighlighter: FC<IPickerHighlighter> = ({
           borderColor,
           zIndex,
           opacity,
+          position:
+            context.contextLevel === 'default' || calloutLevel === 'default' ? 'absolute' : 'fixed',
         }}
         isFilled={!hasLatch}
         children={children}

libs/engine/src/app/contexts/picker-context/picker-context.tsx

@@ -10,7 +10,7 @@ export type PickerTask = {
   LatchComponent?: React.FC<{
     context: IContextNode
     variant: TLatchVariant
-    contextDimensions: { width: number; height: number }
+    contextDimensions: { width: number; height: number; top: number; left: number }
   }>
 }
 

libs/shared-components/src/mini-overlay/index.tsx

@@ -408,6 +408,7 @@ export const MiniOverlay: FC<IMiniOverlayProps> = ({
       $isApps={mutationApps.length > 0}
       data-mweb-context-type="mweb-overlay"
       data-mweb-context-parsed={JSON.stringify({ id: 'mweb-overlay' })}
+      data-mweb-context-level="system"
     >
       <TopBlock $open={isOpen || mutationApps.length > 0} $noMutations={!mutationApps.length}>
         <MutationIconWrapper
@@ -419,6 +420,7 @@ export const MiniOverlay: FC<IMiniOverlayProps> = ({
           data-mweb-context-parsed={JSON.stringify({
             id: isMutationIconButton ? 'mutation-button' : 'mutation-icon',
           })}
+          data-mweb-context-level="system"
         >
           {baseMutation?.metadata.image ? (
             <Image image={baseMutation?.metadata.image} />
@@ -443,6 +445,7 @@ export const MiniOverlay: FC<IMiniOverlayProps> = ({
           $open={isOpen || mutationApps.length > 0}
           data-mweb-context-type="mweb-overlay"
           data-mweb-context-parsed={JSON.stringify({ id: 'open-apps-button' })}
+          data-mweb-context-level="system"
         >
           <ButtonOpen
             $open={isOpen}