Those conditions looks quite hard to understand! Could we try to make them more readable? I haven't spent that much time trying to understand it yet so I might have omitted some edge cases, but from the few cases I can think of, the following conditions would be more readable imo:

const isBlockHighlighted = selectionIsNested && ( isSelected || isParentSelected );
const isDimmed =  ! isBlockHighlighted;

I'm not sure how isDescendantOfParentSelected could play a role here, is there a case where a component is highlighted when a "sibling" is selected?

As I understand, isDimmed should only be true for blocks that are outside the selection and its descendants, right? There was a suggestion to do a different think, but as far as I understand we didn't decide to go that way. It's not clear to me if we want to dim other blocks when a top level one is selected (even if it has children), or just when we start going 1+ level deep into nested blocks.

There are some redundant checks:

• If isDescendantSelected ⇒ isDescendantOfParentSelected. So isDescendantSelected || isDescendantOfParentSelected == isDescendantSelected

I'm not sure how isDescendantOfParentSelected could play a role here, is there a case where a component is highlighted when a "sibling" is selected?

In my version it's the case when you select first child of root block. Without this check the rest of the components stays highlighted.

Next thing is that I need to dim only the bottom most descendant in each branch which should be dimmed to avoid multiplication of opacity applied to block in hierarchy. In other words if I apply opacity to block parent which fits criteria to be dimmed and them apply opacity for the block itself the block will have opacity 0.4 instead of desire 0.2. This opacity increased depending of nesting level. I hope that make sense

There is also edge case that do not dim when RootList block is selected as well.

I gave a shot for what you proposed and it does not works as expected but I will try to refactor original checks to increase clarity and write some comments in the code

@koke I have noticed your comment now so I want to refer to what you wrote as well

There are some redundant checks:
If isDescendantSelected ⇒ isDescendantOfParentSelected. So isDescendantSelected || isDescendantOfParentSelected == isDescendantSelected

That's true according to same branch.

The case for check 'isDescendantOfParentSelected' according to below image is when we have 1-4 selected (red) and isTouchable should be set to true for 1-2, 1-5. Also 1-4-5 ,1-4-3 should be touchable(green). The blue one circle represents block that should be dimmed.

I agree that we can simplify this:
const isTouchable = isSelected || isDescendantSelected || isDescendantOfParentSelected || isParentSelected || parentId === '';
to this:
const isTouchable = isSelected || isDescendantOfParentSelected || isParentSelected || parentId === '';

1-5 should have isDescendantOfParentSelected true and isDescendantSelected false because 1-4 is not descendant of 1-5 but is descendant of 1-5 parent

That's right, I knew one of them was redundant but I got my logic backwards 😅

I'm still not sure about isDimmed and try to check if we can simplify

WDYT about create const with getBlockParents( selectedBlockClientId ) and use it instead of calling it 2 times?

After reading this comment, it did look a bit related to the firstToSelect search, so I think we could have the equivalent (please double check my logic here 😉):

• isDescendantSelected: if the selection is one of the descendants, then this must be a parent of the selection, which also means it will be the lowest common ancestor. So isDescendantSelected = commonAncestor === clientId
• isDescendantOfParentSelected: similar to the previous one, if the parent of this block is an ancestor of the selection, but the selection is not one of this block's descendants, then the lowest common ancestor if this block's parent: isDescendantOfParentSelected = commonAncestor === parentId

@koke I temporary go with @dratwas suggest.

However I agree with this one isDescendantSelected = commonAncestor === clientId

but not sure about this
isDescendantOfParentSelected = commonAncestor === parentId

Shouldn't we check the common ancestor with parent of selected block ?

Then it will look like this:
const commonAncestorParent = getLowestCommonAncestorWithSelectedBlock( parentId );
const isDescendantOfParentSelected = commonAncestorParent === parentId;

Right, I think that would change the behavior a bit. The commonAncestor == parentId would not include the case where isDescendantSelected == true. It would be more accurate to say isDescendantOfSiblingSelected, which might not be what you had in mind when doing the calculations. I think we can combine both:

const isDescendantSelected = commonAncestor === clientId;
const isDescendantOfParentSelected = isDescendantSelected || commonAncestor === parentId;

But at this stage, this feels more like nitpicking, so I'm happy with either approach, we shouldn't block on this one to merge.