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>

Author: Ni-2

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}