pixel-react 1.6.9 → 1.7.0

package/src/components/ConnectingBranch/ConnectingBranch.tsx

@@ -1,182 +1,182 @@
-import React, { useEffect, useRef, useState } from 'react';
-import './ConnectingBranch.scss';
-import { MachineData, MachineInstance, indexType } from './types';
-import { ArcherContainer, ArcherElement } from 'react-archer';
-import MachineInstances from './BranchComponents/MachineInstances';
-import Typography from '../Typography';
-
-const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
-  const datasetRef = useRef<HTMLDivElement | null>(null);
-  const [datasetHeight, setDatasetHeight] = useState<number>(0);
-  const [curveHeights, setCurveHeights] = useState<number[]>([]);
-  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-
-  const calculateVerticalLineHeight = (
-    machineInstances: MachineInstance[],
-    datasetHeight: number,
-    gap: number
-  ): number => {
-    const totalDataSets = machineInstances.reduce((acc, instance) => {
-      return acc + (instance.runLevelExecutionDataSets?.length || 0);
-    }, 0);
-    return totalDataSets * datasetHeight + totalDataSets * gap;
-  };
-
-  useEffect(() => {
-    if (datasetRef.current) {
-      setDatasetHeight(datasetRef.current.offsetHeight);
-    }
-  }, []);
-
-  const calculateCurveHeight = () => {
-    const heights = itemRefs.current.map((_, index) => {
-      if (index === 0) return 0;
-      return datasetHeight * 1.3;
-    });
-    setCurveHeights(heights);
-  };
-
-  useEffect(() => {
-    calculateCurveHeight();
-  }, [datasetHeight]);
-
-  const calculateRowSpan = (machine: MachineData): number => {
-    const baseRows = 1;
-    const childrenRows = machine.machineInstances?.length || 0;
-    return Math.max(baseRows + childrenRows, 1);
-  };
-
-  const machineCount =
-    machineData?.executionSettings?.machines?.selectedMachines?.length;
-  const isOddMachineCount = machineCount % 2 !== 0;
-
-  let currentRow = 1;
-
-  const calculateTotalRows = (): number => {
-    return machineData.executionSettings.machines.selectedMachines.reduce(
-      (totalRows: indexType, machine: MachineData) =>
-        totalRows + calculateRowSpan(machine),
-      1
-    );
-  };
-
-  const oddCountRow = Math.round(calculateTotalRows() / 2);
-  const middleIndex = Math.floor(
-    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="rootMachine">
-                    <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">
-                    <ArcherElement
-                      id={`machine${index}`}
-                      key={index}
-                      relations={[
-                        {
-                          targetId: 'rootMachine',
-                          targetAnchor: 'left',
-                          sourceAnchor: 'left',
-                        },
-                      ]}
-                    >
-                      <div className="ff-input-box-container">
-                        {/* Todo: here  we will add select dropdown */}
-                      </div>
-                    </ArcherElement>
-                  </div>
-                  <MachineInstances
-                    data={machine}
-                    verticalLineHeight={verticalLineHeight}
-                    datasetHeight={datasetHeight}
-                    curveHeights={curveHeights}
-                    itemRefs={itemRefs}
-                    datasetRef={datasetRef}
-                  />
-                </div>
-              </React.Fragment>
-            );
-          }
-        )}
-        {/* Select Machine Input */}
-        <div
-          className="ff-select-machine-input"
-          style={{
-            gridRow: `${currentRow}`,
-          }}
-        >
-          <ArcherElement
-            id="footerInput"
-            relations={[
-              {
-                targetId: 'rootMachine',
-                targetAnchor: 'left',
-                sourceAnchor: 'left',
-              },
-            ]}
-          >
-            <div className="ff-input-box-container">
-              {/* Todo: here  we will add multi select dropdown */}
-            </div>
-          </ArcherElement>
-        </div>
-      </div>
-    </ArcherContainer>
-  );
-};
-
-export default ConnectingBranch;
+import React, { useEffect, useRef, useState } from 'react';
+import './ConnectingBranch.scss';
+import { MachineData, MachineInstance, indexType } from './types';
+import { ArcherContainer, ArcherElement } from 'react-archer';
+import MachineInstances from './BranchComponents/MachineInstances';
+import Typography from '../Typography';
+
+const ConnectingBranch: React.FC = ({ machineData }: MachineData) => {
+  const datasetRef = useRef<HTMLDivElement | null>(null);
+  const [datasetHeight, setDatasetHeight] = useState<number>(0);
+  const [curveHeights, setCurveHeights] = useState<number[]>([]);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const calculateVerticalLineHeight = (
+    machineInstances: MachineInstance[],
+    datasetHeight: number,
+    gap: number
+  ): number => {
+    const totalDataSets = machineInstances.reduce((acc, instance) => {
+      return acc + (instance.runLevelExecutionDataSets?.length || 0);
+    }, 0);
+    return totalDataSets * datasetHeight + totalDataSets * gap;
+  };
+
+  useEffect(() => {
+    if (datasetRef.current) {
+      setDatasetHeight(datasetRef.current.offsetHeight);
+    }
+  }, []);
+
+  const calculateCurveHeight = () => {
+    const heights = itemRefs.current.map((_, index) => {
+      if (index === 0) return 0;
+      return datasetHeight * 1.3;
+    });
+    setCurveHeights(heights);
+  };
+
+  useEffect(() => {
+    calculateCurveHeight();
+  }, [datasetHeight]);
+
+  const calculateRowSpan = (machine: MachineData): number => {
+    const baseRows = 1;
+    const childrenRows = machine.machineInstances?.length || 0;
+    return Math.max(baseRows + childrenRows, 1);
+  };
+
+  const machineCount =
+    machineData?.executionSettings?.machines?.selectedMachines?.length;
+  const isOddMachineCount = machineCount % 2 !== 0;
+
+  let currentRow = 1;
+
+  const calculateTotalRows = (): number => {
+    return machineData.executionSettings.machines.selectedMachines.reduce(
+      (totalRows: indexType, machine: MachineData) =>
+        totalRows + calculateRowSpan(machine),
+      1
+    );
+  };
+
+  const oddCountRow = Math.round(calculateTotalRows() / 2);
+  const middleIndex = Math.floor(
+    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="rootMachine">
+                    <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">
+                    <ArcherElement
+                      id={`machine${index}`}
+                      key={index}
+                      relations={[
+                        {
+                          targetId: 'rootMachine',
+                          targetAnchor: 'left',
+                          sourceAnchor: 'left',
+                        },
+                      ]}
+                    >
+                      <div className="ff-input-box-container">
+                        {/* Todo: here  we will add select dropdown */}
+                      </div>
+                    </ArcherElement>
+                  </div>
+                  <MachineInstances
+                    data={machine}
+                    verticalLineHeight={verticalLineHeight}
+                    datasetHeight={datasetHeight}
+                    curveHeights={curveHeights}
+                    itemRefs={itemRefs}
+                    datasetRef={datasetRef}
+                  />
+                </div>
+              </React.Fragment>
+            );
+          }
+        )}
+        {/* Select Machine Input */}
+        <div
+          className="ff-select-machine-input"
+          style={{
+            gridRow: `${currentRow}`,
+          }}
+        >
+          <ArcherElement
+            id="footerInput"
+            relations={[
+              {
+                targetId: 'rootMachine',
+                targetAnchor: 'left',
+                sourceAnchor: 'left',
+              },
+            ]}
+          >
+            <div className="ff-input-box-container">
+              {/* Todo: here  we will add multi select dropdown */}
+            </div>
+          </ArcherElement>
+        </div>
+      </div>
+    </ArcherContainer>
+  );
+};
+
+export default ConnectingBranch;

package/src/components/ConnectingBranch/data.ts

@@ -1,137 +1,137 @@
-const machineData = {
-  executionSettings: {
-    machines: {
-      multiple: true,
-      totalNoScript: 250,
-      selectedMachines: [
-        {
-          clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
-          executionDataSet: {
-            peVariableSetId: 'UUID',
-            globalVariableSetId: 'UUID',
-            testDataSetId: 'UUID',
-          },
-
-          machineInstances: [
-            {
-              clientId:
-                'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
-              numberOfRuns: '3',
-              executionEnv: 'Local',
-              browserName: 'Google Chrome',
-              browserVersion: '107.0.5304.88',
-              systemUrl: '',
-              machineInfo: {
-                osName: 'Windows 11 Home Single Language',
-                osVersion: '10.0.22000',
-                hostName: 'LAPTOP-T793RVQN',
-              },
-              deviceInfo: [],
-              headless: false,
-              runLevelExecutionDataSets: [
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                  runScriptCount: 12,
-                },
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                  runScriptCount: 12,
-                },
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                  runScriptCount: 12,
-                },
-              ],
-            },
-            {
-              clientId:
-                'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
-              numberOfRuns: '3',
-              executionEnv: 'Local',
-              browserName: 'Google Chrome',
-              browserVersion: '107.0.5304.88',
-              systemUrl: '',
-              machineInfo: {
-                osName: 'Windows 11 Home Single Language',
-                osVersion: '10.0.22000',
-                hostName: 'LAPTOP-T793RVQN',
-              },
-              deviceInfo: [],
-              headless: false,
-              runLevelExecutionDataSets: [
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
-          executionDataSet: {
-            peVariableSetId: 'UUID',
-            globalVariableSetId: 'UUID',
-            testDataSetId: 'UUID',
-          },
-          totalScript: 250,
-          machineInstances: [
-            {
-              clientId:
-                'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
-              numberOfRuns: '3',
-              executionEnv: 'Local',
-              browserName: 'Google Chrome',
-              browserVersion: '107.0.5304.88',
-              systemUrl: '',
-              machineInfo: {
-                osName: 'Windows 11 Home Single Language',
-                osVersion: '10.0.22000',
-                hostName: 'LAPTOP-T793RVQN',
-              },
-              deviceInfo: [],
-              headless: false,
-              runLevelExecutionDataSets: [
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                },
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                },
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                },
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                },
-                {
-                  peVariableSetId: 'UUID_1',
-                  globalVariableSetId: 'UUID',
-                  testDataSetId: 'UUID',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      executionType: 'SEND_SUITE_TO_ALL',
-    },
-  },
-};
-
-export default machineData;
+const machineData = {
+  executionSettings: {
+    machines: {
+      multiple: true,
+      totalNoScript: 250,
+      selectedMachines: [
+        {
+          clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+          executionDataSet: {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
+
+          machineInstances: [
+            {
+              clientId:
+                'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+              numberOfRuns: '3',
+              executionEnv: 'Local',
+              browserName: 'Google Chrome',
+              browserVersion: '107.0.5304.88',
+              systemUrl: '',
+              machineInfo: {
+                osName: 'Windows 11 Home Single Language',
+                osVersion: '10.0.22000',
+                hostName: 'LAPTOP-T793RVQN',
+              },
+              deviceInfo: [],
+              headless: false,
+              runLevelExecutionDataSets: [
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                },
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                },
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                  runScriptCount: 12,
+                },
+              ],
+            },
+            {
+              clientId:
+                'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+              numberOfRuns: '3',
+              executionEnv: 'Local',
+              browserName: 'Google Chrome',
+              browserVersion: '107.0.5304.88',
+              systemUrl: '',
+              machineInfo: {
+                osName: 'Windows 11 Home Single Language',
+                osVersion: '10.0.22000',
+                hostName: 'LAPTOP-T793RVQN',
+              },
+              deviceInfo: [],
+              headless: false,
+              runLevelExecutionDataSets: [
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          clientId: 'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+          executionDataSet: {
+            peVariableSetId: 'UUID',
+            globalVariableSetId: 'UUID',
+            testDataSetId: 'UUID',
+          },
+          totalScript: 250,
+          machineInstances: [
+            {
+              clientId:
+                'flinko-client-win-daa67320-d70c-438e-b417-62d76669e7a2',
+              numberOfRuns: '3',
+              executionEnv: 'Local',
+              browserName: 'Google Chrome',
+              browserVersion: '107.0.5304.88',
+              systemUrl: '',
+              machineInfo: {
+                osName: 'Windows 11 Home Single Language',
+                osVersion: '10.0.22000',
+                hostName: 'LAPTOP-T793RVQN',
+              },
+              deviceInfo: [],
+              headless: false,
+              runLevelExecutionDataSets: [
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                },
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                },
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                },
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                },
+                {
+                  peVariableSetId: 'UUID_1',
+                  globalVariableSetId: 'UUID',
+                  testDataSetId: 'UUID',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      executionType: 'SEND_SUITE_TO_ALL',
+    },
+  },
+};
+
+export default machineData;

package/src/components/ConnectingBranch/index.ts

@@ -1 +1 @@
-export { default } from './ConnectingBranch';
+export { default } from './ConnectingBranch';