pixel-react-excel-sheet 1.0.32 → 1.0.33

package/src/components/ConnectingBranch/ConnectingBranch.scss

@@ -1,208 +1,210 @@
-.ff-grid-container {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr 0.8fr 5fr;
-  grid-auto-rows: auto;
-
-  .ff-selectedMachines {
-    display: contents;
-  }
-
-  .ff-selectedMachines-input {
-    grid-column: 2 / 3;
+.connecting-branch-container {
+  .ff-connecting-branch-grid-container {
     display: grid;
-  }
-
-  .ff-input-box-container {
-    margin-bottom: 24px;
-    border-radius: 4px;
-    width: 100%;
-  }
+    grid-template-columns:
+      minmax(100px, 0.5fr) minmax(240px, 1.5fr) minmax(130px, 0.8fr)
+      5fr;
+    grid-auto-rows: auto;
 
-  .ff-machine-instance-row {
-    display: contents;
-  }
+    .ff-selectedMachines {
+      display: contents;
+    }
 
-  .ff-selectedMachines-connecting-line {
-    grid-column: 3 / 4;
-    position: relative;
+    .ff-selectedMachines-input {
+      grid-column: 2 / 3;
+      display: grid;
+    }
 
-    .ff-line {
-      position: absolute;
-      height: 1px;
-      background-color: var(--brand-color);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+    .ff-input-box-container {
+      margin-bottom: 24px;
       width: 100%;
     }
 
-    .ff-left-icon {
-      height: 8px;
-      width: 8px;
-      background-color: var(--brand-color);
-      border-radius: 50%;
-      margin-right: 5px;
+    .ff-machine-instance-row {
+      display: contents;
     }
 
-    .ff-selectedMachines-connecting-line-text {
-      position: absolute;
-      top: -10px;
-      left: 50%;
-      transform: translateX(-50%);
-      background-color: var(--brand-color);
-      color: var(--tooltip-text-color);
-      padding: 4px;
-      border-radius: 12px;
-      text-align: center;
-    }
+    .ff-selectedMachines-connecting-line {
+      grid-column: 3 / 4;
+      position: relative;
+
+      .ff-line {
+        position: absolute;
+        height: 1px;
+        background-color: var(--brand-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+      }
+
+      .ff-left-icon {
+        height: 8px;
+        width: 8px;
+        background-color: var(--brand-color);
+        border-radius: 50%;
+        margin-right: 5px;
+      }
+
+      .ff-selectedMachines-connecting-line-text {
+        position: absolute;
+        top: -10px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: var(--brand-color);
+        color: var(--tooltip-text-color);
+        padding: 4px;
+        border-radius: 12px;
+        text-align: center;
+      }
+
+      .ff-right-icon {
+        width: 0;
+        height: 0;
+        border-top: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+        border-left: 8px solid var(--brand-color);
+        margin-left: 84px;
+        bottom: -4px;
+      }
 
-    .ff-right-icon {
-      width: 0;
-      height: 0;
-      border-top: 4px solid transparent;
-      border-bottom: 4px solid transparent;
-      border-left: 8px solid var(--brand-color);
-      margin-left: 84px;
-      bottom: -4px;
+      &.ff-second-line {
+        position: relative;
+        margin-left: 20px;
+      }
+      .ff-vertical-line {
+        position: absolute;
+        left: 24px;
+        top: 0;
+        width: 1px;
+        height: auto;
+        background-color: var(--brand-color);
+      }
     }
 
-    &.ff-second-line {
-      position: relative;
-      margin-left: 20px;
+    .ff-machine-instance {
+      grid-column: 4 / 5;
     }
-    .ff-vertical-line {
-      position: absolute;
-      left: 24px;
-      top: 0;
-      width: 1px;
-      height: auto;
-      background-color: var(--brand-color);
+    .ff-machine-env-button {
+      padding: 4px 0;
+      margin-bottom: 16px;
+    }
+    .ff-selectedMachines-connecting-line {
+      margin-top: 16px;
     }
-  }
 
-  .ff-machine-instance {
-    grid-column: 4 / 5;
-  }
-  .ff-machine-env-button {
-    padding: 4px 0;
-    margin-bottom: 16px;
-  }
-  .ff-selectedMachines-connecting-line {
-    margin-top: 16px;
-  }
+    .ff-selectedMachines-connecting-line.ff-no-instance-line {
+      margin-top: 16px;
+    }
 
-  .ff-selectedMachines-connecting-line.ff-no-instance-line {
-    margin-top: 16px;
-  }
+    .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {
+      width: 100%;
+      background-color: var(--brand-color);
+      height: 1px;
+      position: relative;
+    }
 
-  .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {
-    width: 100%;
-    background-color: var(--brand-color);
-    height: 1px;
-    position: relative;
-  }
+    .ff-run-level-execution-dataset {
+      height: 66px;
+      margin-bottom: 8px;
+      border-radius: 4px;
+      margin-bottom: 16px;
+      position: relative;
 
-  .ff-run-level-execution-dataset {
-    height: 66px;
-    margin-bottom: 8px;
-    border-radius: 4px;
-    margin-bottom: 16px;
-    position: relative;
-
-    .ff-curved-connector {
-      position: absolute;
-      left: -70px;
-      transform: translateX(-50%);
-      width: 40px;
-      height: 0;
-
-      .ff-curve {
-        position: relative;
-        width: 80px;
+      .ff-curved-connector {
+        position: absolute;
+        left: -70px;
+        transform: translateX(-50%);
+        width: 40px;
         height: 0;
-        border: 1px dashed var(--brand-color);
-        border-top: none;
-        border-right: none;
-        border-bottom-left-radius: 8px;
-        display: flex;
-        flex-direction: column-reverse;
 
-        .ff-curve-right-icon {
-          width: 0;
+        .ff-curve {
+          position: relative;
+          width: 80px;
           height: 0;
-          border-top: 4px solid transparent;
-          border-bottom: 4px solid transparent;
-          border-left: 8px solid var(--brand-color);
-          margin-left: 81px;
-          position: absolute;
-          bottom: -4px;
+          border: 1px dashed var(--brand-color);
+          border-top: none;
+          border-right: none;
+          border-bottom-left-radius: 8px;
+          display: flex;
+          flex-direction: column-reverse;
+
+          .ff-curve-right-icon {
+            width: 0;
+            height: 0;
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            border-left: 8px solid var(--brand-color);
+            margin-left: 81px;
+            position: absolute;
+            bottom: -4px;
+          }
+
+          .ff-selectedMachines-connecting-line-text {
+            position: absolute;
+            left: 50%;
+            top: 75px;
+            transform: translateX(-50%);
+            background-color: var(--brand-color);
+            color: var(--tooltip-text-color);
+            font-weight: 400;
+            font-size: 8px;
+            padding: 4px;
+            border-radius: 12px;
+            text-align: center;
+            width: 44px;
+          }
         }
 
-        .ff-selectedMachines-connecting-line-text {
-          position: absolute;
-          left: 50%;
-          top: 75px;
-          transform: translateX(-50%);
-          background-color: var(--brand-color);
-          color: var(--tooltip-text-color);
-          font-weight: 400;
-          font-size: 8px;
-          padding: 4px;
-          border-radius: 12px;
-          text-align: center;
-          width: 44px;
+        .ff-connector-0 {
+          border: none;
+          bottom: 3px;
         }
-      }
-
-      .ff-connector-0 {
-        border: none;
-        bottom: 3px;
-      }
 
-      .ff-curve-right-icon-0 {
-        display: none;
+        .ff-curve-right-icon-0 {
+          display: none;
+        }
       }
     }
-  }
 
-  .ff-select-machine-input {
-    grid-column: 2 / 3;
-  }
+    .ff-select-machine-input {
+      grid-column: 2 / 3;
+    }
 
-  .ff-grid-item.ff-dynamic-item {
-    grid-column: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    place-self: first baseline;
-    top: 1px;
-    left: 20px;
-  }
+    .ff-grid-item.ff-dynamic-item {
+      grid-column: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      place-self: first baseline;
+      top: 1px;
+      left: 20px;
+    }
 
-  .ff-script-count-container {
-    grid-column: 1;
-    align-self: center;
-    background-color: var(--brand-color);
-    color: var(--tooltip-text-color);
-    text-align: center;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 4px;
-
-    .ff-script-count-box {
+    .ff-script-count-container {
+      grid-column: 1;
+      align-self: center;
+      background-color: var(--brand-color);
+      color: var(--tooltip-text-color);
+      text-align: center;
+      border-radius: 4px;
       display: flex;
-      flex-direction: column;
       justify-content: center;
       align-items: center;
-      width: 100%;
-      height: 100%;
+      padding: 4px;
+
+      .ff-script-count-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 }
-
 // Styles for stories
 .ff-parent-node-container {
   border: 1px solid green;

package/src/components/ConnectingBranch/ConnectingBranch.tsx

@@ -76,119 +76,120 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
     machineData.executionSettings.machines.selectedMachines.length / 2
   );
   return (
-    <ArcherContainer
-      strokeColor="var(--brand-color)"
-      strokeWidth={1}
-      startMarker={true}
-      endMarker={false}
-      noCurves
-    >
-      <div className="ff-grid-container">
-        {machineData?.executionSettings?.machines?.selectedMachines.map(
-          (machine: MachineData, index: indexType) => {
-            const rowStart = currentRow;
-            const rowSpan = calculateRowSpan(machine);
-            currentRow += rowSpan;
-            const gap = 16;
-            const verticalLineHeight = calculateVerticalLineHeight(
-              machine?.machineInstances,
-              datasetHeight,
-              gap
-            );
-
-            return (
-              <React.Fragment key={index}>
-                {/* Show ff-script-count-box only for the middle index */}
-                {((!isOddMachineCount && index === middleIndex) ||
-                  (isOddMachineCount && index === 0)) && (
-                  <ArcherElement id="rootNode">
-                    <div
-                      className="ff-grid-item ff-dynamic-item"
-                      style={{
-                        gridRow: `${
-                          !isOddMachineCount ? rowStart : oddCountRow
-                        }`,
-                      }}
-                    >
-                      <div className="ff-script-count-container">
-                        <div className="ff-script-count-box">
-                          <Typography fontSize={12} fontWeight="regular">
-                            {
-                              machineData?.executionSettings?.machines
-                                ?.totalNoScript
-                            }
-                          </Typography>
-                          <Typography fontSize={12} fontWeight="regular">
-                            Scripts
-                          </Typography>
+    <div className="connecting-branch-container">
+      <ArcherContainer
+        strokeColor="var(--brand-color)"
+        strokeWidth={1}
+        startMarker={true}
+        endMarker={false}
+        noCurves
+      >
+        <div className="ff-connecting-branch-grid-container">
+          {machineData?.executionSettings?.machines?.selectedMachines.map(
+            (machine: MachineData, index: indexType) => {
+              const rowStart = currentRow;
+              const rowSpan = calculateRowSpan(machine);
+              currentRow += rowSpan;
+              const gap = 16;
+              const verticalLineHeight = calculateVerticalLineHeight(
+                machine?.machineInstances,
+                datasetHeight,
+                gap
+              );
+              return (
+                <React.Fragment key={index}>
+                  {/* Show ff-script-count-box only for the middle index */}
+                  {((!isOddMachineCount && index === middleIndex) ||
+                    (isOddMachineCount && index === 0)) && (
+                    <ArcherElement id="rootNode">
+                      <div
+                        className="ff-grid-item ff-dynamic-item"
+                        style={{
+                          gridRow: `${
+                            !isOddMachineCount ? rowStart : oddCountRow
+                          }`,
+                        }}
+                      >
+                        <div className="ff-script-count-container">
+                          <div className="ff-script-count-box">
+                            <Typography fontSize={12} fontWeight="regular">
+                              {
+                                machineData?.executionSettings?.machines
+                                  ?.totalNoScript
+                              }
+                            </Typography>
+                            <Typography fontSize={12} fontWeight="regular">
+                              Scripts
+                            </Typography>
+                          </div>
                         </div>
                       </div>
+                    </ArcherElement>
+                  )}
+                  {/* Selected Machine */}
+                  <div
+                    className="ff-selectedMachines"
+                    style={{
+                      gridRow: `${rowStart} / span ${rowSpan}`,
+                    }}
+                  >
+                    <div className="ff-selectedMachines-input">
+                      <div className="ff-input-box-container">
+                        <ArcherElement
+                          id={`parentnode${index}`}
+                          key={machine?.clientId}
+                          relations={[
+                            {
+                              targetId: 'rootNode',
+                              targetAnchor: 'left',
+                              sourceAnchor: 'left',
+                            },
+                          ]}
+                        >
+                          {/* Todo: here  we will add select dropdown */}
+                          {getParentNodeComponent(false, machine, index)}
+                        </ArcherElement>
+                        {getParentNodeComponentActionItems(machine, index)}
+                      </div>
                     </div>
-                  </ArcherElement>
-                )}
-                {/* Selected Machine */}
-                <div
-                  className="ff-selectedMachines"
-                  style={{
-                    gridRow: `${rowStart} / span ${rowSpan}`,
-                  }}
-                >
-                  <div className="ff-selectedMachines-input">
-                    <div className="ff-input-box-container">
-                      <ArcherElement
-                        id={`parentnode${index}`}
-                        key={index}
-                        relations={[
-                          {
-                            targetId: 'rootNode',
-                            targetAnchor: 'left',
-                            sourceAnchor: 'left',
-                          },
-                        ]}
-                      >
-                        {/* Todo: here  we will add select dropdown */}
-                        {getParentNodeComponent(false, machine, index)}
-                      </ArcherElement>
-                      {getParentNodeComponentActionItems(machine, index)}
-                    </div>
+                    <MachineInstances
+                      parentNode={index}
+                      data={machine}
+                      verticalLineHeight={verticalLineHeight}
+                      datasetHeight={datasetHeight}
+                      curveHeights={curveHeights}
+                      itemRefs={itemRefs}
+                      datasetRef={datasetRef}
+                      getChildNodeComponent={getChildNodeComponent}
+                    />
                   </div>
-                  <MachineInstances
-                    parentNode={index}
-                    data={machine}
-                    verticalLineHeight={verticalLineHeight}
-                    datasetHeight={datasetHeight}
-                    curveHeights={curveHeights}
-                    itemRefs={itemRefs}
-                    datasetRef={datasetRef}
-                    getChildNodeComponent={getChildNodeComponent}
-                  />
-                </div>
-              </React.Fragment>
-            );
-          }
-        )}
-        {/* Select Machine Input */}
-        <div
-          className="ff-select-machine-input"
-          style={{
-            gridRow: `${currentRow}`,
-          }}
-        >
-          <ArcherElement
-            id="lastNode"
-            relations={[
-              {
-                targetId: 'rootNode',
-                targetAnchor: 'left',
-                sourceAnchor: 'left',
-              },
-            ]}
+                </React.Fragment>
+              );
+            }
+          )}
+          {/* Select Machine Input */}
+          <div
+            className="ff-select-machine-input"
+            style={{
+              gridRow: `${currentRow}`,
+            }}
           >
-            <div>{getParentNodeComponent(true)}</div>
-          </ArcherElement>
+            <ArcherElement
+              id="lastNode"
+              relations={[
+                {
+                  targetId: 'rootNode',
+                  targetAnchor: 'left',
+                  sourceAnchor: 'left',
+                },
+              ]}
+            >
+              <div>{getParentNodeComponent(true)}</div>
+            </ArcherElement>
+          </div>
         </div>
-      </div>
-    </ArcherContainer>
+      </ArcherContainer>
+    </div>
   );
 };