fix(moduletree): remove leading line for inactive root node (#4108)

* fix(moduletree): remove leading line for inactive root node

* test(moduletree): update snapshot

- snapshot is updated because an additional css class sector is added to fix leading
  horizontal line

* fix(moduletree): change back css order and update snapshot

* refactor

* fix(moduletree)

* test: update snapshot

---------

Co-authored-by: Leslie Yip <[email protected]>
Co-authored-by: Papattarada Apithanangsiri <[email protected]>

Author: 3 people

website/src/views/modules/ModuleTree.scss

@@ -58,6 +58,10 @@ $connector-size: 0.75rem;
   min-width: 4.5rem;
 }
 
+.inactiveRootNode::before {
+  display: none;
+}
+
 .prefix {
   font-size: 0.75rem;
   white-space: nowrap;

website/src/views/modules/ModuleTree.tsx

@@ -131,12 +131,15 @@ const Tree: React.FC<TreeDisplay> = (props) => {
   const moduleActive = props.getModuleCondensed(name);
 
   // If module is deprecated (undefined) then we grey out, remove color classname
+  // Hide the left horizontal line for the root node (layer 1) if the module is inactive
+  const isInactiveRoot = layer === 1 && !moduleActive;
 
   return (
     <div
       className={classnames(styles.node, styles.moduleNode, {
         [`hoverable color-${layer}`]: !!moduleActive,
         [styles.leftNode]: prereqTreeOnLeft,
+        [styles.inactiveRootNode]: isInactiveRoot,
       })}
     >
       {prefix && <span className={styles.prefix}>{prefix}</span>}
@@ -173,7 +176,7 @@ export const ModuleTreeComponent: React.FC<Props> = (props) => {
                   layer={1}
                   node={moduleCode}
                   getModuleCondensed={props.getModuleCondensed}
-                  prereqTreeOnLeft={false}
+                  prereqTreeOnLeft={prereqTreeOnLeft}
                 />
               </ConditionalReverse>
             </li>

website/src/views/modules/__snapshots__/ModuleTree.test.tsx.snap

@@ -201,7 +201,7 @@ exports[`ModuleTreeComponent should grey out modules that are not in module bank
           </li>
         </ul>
         <div
-          class="node moduleNode"
+          class="node moduleNode leftNode inactiveRootNode"
         >
           <div>
             <mockedlink
@@ -351,7 +351,7 @@ exports[`ModuleTreeComponent should render prereq branch with nOf condition: PC2
           </li>
         </ul>
         <div
-          class="node moduleNode"
+          class="node moduleNode leftNode inactiveRootNode"
         >
           <div>
             <mockedlink
@@ -883,7 +883,7 @@ exports[`ModuleTreeComponent should render prereq tree of module: CS3244 1`] = `
           </li>
         </ul>
         <div
-          class="node moduleNode"
+          class="node moduleNode leftNode inactiveRootNode"
         >
           <div>
             <mockedlink
@@ -1010,7 +1010,7 @@ exports[`ModuleTreeComponent should render prereq tree to the right when tree di
         class="branch"
       >
         <div
-          class="node moduleNode"
+          class="node moduleNode inactiveRootNode"
         >
           <div>
             <mockedlink
@@ -1078,7 +1078,7 @@ exports[`ModuleTreeComponent should render requirements fulfilled tree of module
         class="branch leftBranch"
       >
         <div
-          class="node moduleNode"
+          class="node moduleNode leftNode inactiveRootNode"
         >
           <div>
             <mockedlink