pixel-react 1.5.9 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  3. package/lib/components/AppHeader/types.d.ts +18 -6
  4. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  5. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  6. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  7. package/lib/components/FieldSet/FieldSet.d.ts +5 -0
  8. package/lib/components/FieldSet/index.d.ts +1 -0
  9. package/lib/components/FieldSet/types.d.ts +7 -0
  10. package/lib/components/FileDropzone/types.d.ts +8 -0
  11. package/lib/components/MachineInputField/types.d.ts +1 -1
  12. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  13. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  14. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  15. package/lib/components/PopUpModal/types.d.ts +14 -0
  16. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  17. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  18. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  19. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  20. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  21. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  22. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  23. package/lib/components/TableTree/TableTree.d.ts +4 -24
  24. package/lib/components/TableTree/data.d.ts +112 -273
  25. package/lib/components/TableTree/types.d.ts +28 -0
  26. package/lib/index.d.ts +149 -32
  27. package/lib/index.esm.js +1104 -742
  28. package/lib/index.esm.js.map +1 -1
  29. package/lib/index.js +1109 -742
  30. package/lib/index.js.map +1 -1
  31. package/lib/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +2 -2
  33. package/src/assets/Themes/BaseTheme.scss +5 -14
  34. package/src/assets/Themes/DarkTheme.scss +5 -2
  35. package/src/assets/icons/arrow_up.svg +1 -1
  36. package/src/assets/icons/export.svg +5 -0
  37. package/src/assets/icons/import.svg +5 -0
  38. package/src/assets/icons/info_icon.svg +4 -16
  39. package/src/assets/icons/replace_file.svg +14 -0
  40. package/src/assets/icons/web_service_icon.svg +3 -0
  41. package/src/assets/styles/_fonts.scss +4 -2
  42. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  43. package/src/components/AppHeader/AppHeader.tsx +158 -139
  44. package/src/components/AppHeader/types.ts +19 -6
  45. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  46. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  47. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  48. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  49. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  50. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  51. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  52. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  53. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  54. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  55. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  56. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  57. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  58. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  59. package/src/components/Checkbox/Checkbox.tsx +1 -7
  60. package/src/components/DatePicker/DatePicker.scss +15 -1
  61. package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
  62. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  63. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  66. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  67. package/src/components/FieldSet/FieldSet.scss +9 -0
  68. package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
  69. package/src/components/FieldSet/FieldSet.tsx +29 -0
  70. package/src/components/FieldSet/index.ts +1 -0
  71. package/src/components/FieldSet/types.ts +8 -0
  72. package/src/components/FileDropzone/FileDropzone.scss +1 -1
  73. package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
  74. package/src/components/FileDropzone/FileDropzone.tsx +5 -0
  75. package/src/components/FileDropzone/FilePreview.tsx +1 -1
  76. package/src/components/FileDropzone/types.ts +8 -0
  77. package/src/components/Icon/Icons.scss +1 -1
  78. package/src/components/Icon/iconList.ts +11 -7
  79. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  80. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  81. package/src/components/MachineInputField/types.ts +1 -1
  82. package/src/components/MultiSelect/Dropdown.tsx +7 -3
  83. package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
  84. package/src/components/MultiSelect/MultiSelect.tsx +4 -20
  85. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
  86. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  87. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  88. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  89. package/src/components/PopUpModal/types.ts +14 -0
  90. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  91. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  92. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  93. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  94. package/src/components/Select/Select.tsx +3 -4
  95. package/src/components/Select/components/Dropdown.tsx +34 -34
  96. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  97. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  98. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  99. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  100. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  101. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  102. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  103. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  104. package/src/components/TableTree/TableTree.scss +154 -123
  105. package/src/components/TableTree/TableTree.stories.tsx +148 -96
  106. package/src/components/TableTree/TableTree.tsx +250 -282
  107. package/src/components/TableTree/data.ts +318 -569
  108. package/src/components/TableTree/types.ts +30 -0
  109. package/src/components/Toast/Toast.tsx +1 -1
  110. package/src/index.ts +11 -0
@@ -20,6 +20,7 @@ const Branches = ({
20
20
  onAddBrowser,
21
21
  onDeleteBrowser,
22
22
  onAddRunBrowser,
23
+ onUpdateDataSetList,
23
24
  }: BranchesProps) => {
24
25
  const evenRow = rowIndex % 2 === 0;
25
26
  const lastMachineInstance = checkEmpty(
@@ -33,10 +34,12 @@ const Branches = ({
33
34
  if (
34
35
  currentBranch &&
35
36
  nextBranch &&
36
- 'id' in currentBranch &&
37
- 'id' in nextBranch
37
+ 'machineInstanceId' in currentBranch &&
38
+ 'machineInstanceId' in nextBranch
38
39
  ) {
39
- return currentBranch.id === nextBranch.id ? 'dotted' : 'solid';
40
+ return currentBranch.machineInstanceId === nextBranch.machineInstanceId
41
+ ? 'dashed'
42
+ : 'solid';
40
43
  }
41
44
  return 'solid';
42
45
  };
@@ -94,7 +97,10 @@ const Branches = ({
94
97
  numberOfRuns = 'numberOfRuns' in machineInstance
95
98
  ? machineInstance.numberOfRuns
96
99
  : 0,
97
- id = '',
100
+ machineInstanceId = '',
101
+ peVariableSetId = '',
102
+ globalVariableSetId = '',
103
+ testDataSetId = '',
98
104
  } = machineInstance as ExecutionContext;
99
105
  return (
100
106
  <Fragment key={ffid()}>
@@ -124,17 +130,35 @@ const Branches = ({
124
130
  'ff-connecting-branch-datalist-reverse': !evenRow,
125
131
  })}
126
132
  >
127
- <Icon name="datalist_icon" className="ff-connecting-icon" />
128
- <Typography
129
- className="ff-connecting-text"
130
- color="var(--ff-connecting-branch-color)"
133
+ <div
134
+ id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
135
+ className="ff-dataset-list-branch"
136
+ onClick={() =>
137
+ onUpdateDataSetList(
138
+ `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
139
+ {
140
+ peVariableSetId: peVariableSetId,
141
+ globalVariableSetId: globalVariableSetId,
142
+ testDataSetId: testDataSetId,
143
+ },
144
+ true,
145
+ numberOfRuns,
146
+ machineInstanceId
147
+ )
148
+ }
131
149
  >
132
- Dataset List
133
- </Typography>
150
+ <Icon name="datalist_icon" className="ff-connecting-icon" />
151
+ <Typography
152
+ className="ff-connecting-text"
153
+ color="var(--ff-connecting-branch-color)"
154
+ >
155
+ Dataset List
156
+ </Typography>
157
+ </div>
134
158
  <Icon
135
159
  name="plus_icon"
136
160
  className="ff-connecting-icon"
137
- onClick={() => onAddRunBrowser(id)}
161
+ onClick={() => onAddRunBrowser(machineInstanceId)}
138
162
  color="var(--ff-connecting-branch-color)"
139
163
  />
140
164
  <Typography
@@ -146,7 +170,9 @@ const Branches = ({
146
170
  <Icon
147
171
  name="delete"
148
172
  className="ff-connecting-delete-icon"
149
- onClick={() => onDeleteBrowser(id, numberOfRuns)}
173
+ onClick={() =>
174
+ onDeleteBrowser(machineInstanceId, numberOfRuns)
175
+ }
150
176
  color="var(--ff-connecting-branch-delete-color)"
151
177
  />
152
178
  </div>
@@ -154,9 +180,14 @@ const Branches = ({
154
180
  ) : (
155
181
  <div className="ff-connecting-branch-browser-button">
156
182
  <Button
183
+ id={`ff-sequential-branch-add-${machineInstanceId}`}
157
184
  variant="tertiary"
158
- label="Browser / Devices"
159
- onClick={onAddBrowser}
185
+ label="Add Environrment"
186
+ onClick={() =>
187
+ onAddBrowser(
188
+ `ff-sequential-branch-add-${machineInstanceId}`
189
+ )
190
+ }
160
191
  />
161
192
  </div>
162
193
  )}
@@ -1,4 +1,4 @@
1
- import { ExecutionContext } from '../../types';
1
+ import { dataSetValues, ExecutionContext } from '../../types';
2
2
 
3
3
  export interface BranchesProps {
4
4
  machineInstances: ExecutionContext[] | {}[];
@@ -7,9 +7,16 @@ export interface BranchesProps {
7
7
  machineColumnWidth: number;
8
8
  nextRowMachineInstance?: ExecutionContext | {} | undefined;
9
9
  previousRowMachineInstance?: ExecutionContext | {} | undefined;
10
- onAddBrowser: () => void;
10
+ onAddBrowser: (modalId: string) => void;
11
11
  onDeleteBrowser: (id: string, runCount: number) => void;
12
12
  onAddRunBrowser: (id: string) => void;
13
+ onUpdateDataSetList: (
14
+ id: string,
15
+ dataSetObject: dataSetValues,
16
+ isInstance?: boolean,
17
+ noOfRuns?: number,
18
+ machineInstanceId?: string
19
+ ) => void;
13
20
  }
14
21
 
15
22
  export interface branchTypeProps {
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
2
2
  import { ExecutionContext } from '../../types';
3
3
  import { ConnectingBranchesProps } from './types';
4
4
  import { Fragment } from 'react/jsx-runtime';
5
- import {ffid} from '../../../../utils/ffID/ffid';
5
+ import { ffid } from '../../../../utils/ffID/ffid';
6
6
  import Branches from '../Branches/Branches';
7
7
  import './ConnectingBranches.scss';
8
8
 
@@ -13,6 +13,7 @@ const ConnectingBranches = ({
13
13
  onAddBrowser,
14
14
  onDeleteBrowser,
15
15
  onAddRunBrowser,
16
+ onUpdateDataSetList,
16
17
  }: ConnectingBranchesProps) => {
17
18
  const [machineInstance, setMachineInstance] = useState<
18
19
  ExecutionContext[] | {}[]
@@ -56,6 +57,7 @@ const ConnectingBranches = ({
56
57
  previousRowMachineInstance={
57
58
  machineInstancesRow[index - 1]?.[machineColumnCount - 1]
58
59
  }
60
+ onUpdateDataSetList={onUpdateDataSetList}
59
61
  />
60
62
  </Fragment>
61
63
  ))}
@@ -1,10 +1,17 @@
1
- import { ExecutionContext } from '../../types';
1
+ import { dataSetValues, ExecutionContext } from '../../types';
2
2
 
3
3
  export interface ConnectingBranchesProps {
4
4
  machineBranchInstances: ExecutionContext[] | {}[];
5
5
  machineColumnCount: number;
6
6
  machineColumnWidth: number;
7
- onAddBrowser: () => void;
7
+ onAddBrowser: (modalId: string) => void;
8
8
  onDeleteBrowser: (id: string, runCount: number) => void;
9
9
  onAddRunBrowser: (id: string) => void;
10
+ onUpdateDataSetList: (
11
+ id: string,
12
+ dataSetObject: dataSetValues,
13
+ isInstance?: boolean,
14
+ noOfRuns?: number,
15
+ machineInstanceId?: string
16
+ ) => void;
10
17
  }
@@ -7,10 +7,19 @@ export interface SequentialConnectingBranchProps {
7
7
  selectedMachine?: Option;
8
8
  machineOptionsList?: Option[];
9
9
  onHandleSelect?: (option: Option) => void;
10
- onAddBrowserInstance?: () => void;
10
+ onAddBrowserInstance?: (modalId: string) => void;
11
11
  onUpdateAddBrowserInstance?: () => void;
12
12
  onDeleteBrowserInstance?: (id: string, runCount: number) => void;
13
- onAddRunBrowserInstance?: (id: string) => void;
13
+ onAddRunBrowserInstance?: (machineInstanceId: string) => void;
14
+ onDeleteMachineInstance?: () => void;
15
+ onUpdateDataSetList: (
16
+ id: string,
17
+ dataSetObject: dataSetValues,
18
+ isInstance?: boolean,
19
+ noOfRuns?: number,
20
+ machineInstanceId?: string
21
+ ) => void;
22
+ dataSetValues: dataSetValues;
14
23
  }
15
24
 
16
25
  // Type for machine information
@@ -29,7 +38,7 @@ export interface DeviceInfo {
29
38
  }
30
39
 
31
40
  export interface ExecutionContext {
32
- id: string;
41
+ machineInstanceId: string;
33
42
  clientId: string;
34
43
  numberOfRuns: number;
35
44
  executionEnv?: 'Local'; // Change to specific enum if more environments exist
@@ -43,3 +52,9 @@ export interface ExecutionContext {
43
52
  globalVariableSetId: string;
44
53
  testDataSetId: string;
45
54
  }
55
+
56
+ export interface dataSetValues {
57
+ peVariableSetId: string;
58
+ globalVariableSetId: string;
59
+ testDataSetId: string;
60
+ }
@@ -1,171 +1,202 @@
1
- @use '../../assets/styles/fonts';
1
+ html,
2
+ * {
3
+ font-family: 'Open Sans';
4
+ }
2
5
 
3
- .ff-tree-container {
4
- width: 100%;
5
- font-size: 12px;
6
- color: var(--brand-color);
7
- transition: all 0.3s ease;
8
- @extend .fontSm;
6
+ .tree-table-space-block {
7
+ display: inline-block;
8
+ width: 20px;
9
+ }
9
10
 
10
- table {
11
- border-collapse: collapse;
12
- width: 100%;
13
- text-align: left;
14
- position: relative; /* Ensure the table has a relative position for z-index to work */
15
- }
11
+ .hidden {
12
+ display: none;
13
+ }
16
14
 
17
- .ff-toggle-arrow-icon {
18
- height: 12px;
19
- width: 12px;
20
- margin-left: 8px;
21
- display: grid;
22
- place-items: center;
23
- transform: rotate(0deg);
24
-
25
- svg {
26
- path {
27
- fill: var(--brand-color);
28
- }
29
- }
15
+ .show {
16
+ display: table-row;
17
+ }
30
18
 
31
- &.ff-expanded {
32
- transform: rotate(0deg);
33
- }
19
+ .btn-toggle {
20
+ &.expand {
21
+ cursor: pointer;
22
+ }
34
23
 
35
- &.ff-collapsed {
36
- transform: rotate(-90deg);
37
- }
24
+ &.is-close {
25
+ background: #f1f1f1;
26
+ border: 1px solid transparent;
27
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
38
28
  }
39
29
 
40
- th {
41
- vertical-align: middle;
42
- height: 32px;
43
- background-color: var(--slider-table-color);
44
- color: var(--text-color);
45
- font-weight: 600;
46
- text-transform: uppercase;
30
+ &::before {
31
+ display: none;
47
32
  }
48
33
 
34
+ &::after {
35
+ display: none;
36
+ }
37
+ }
38
+
39
+ .tree-table-wrap {
40
+ width: 100%;
41
+ }
42
+
43
+ .tree-table {
44
+ border: 1px solid #f1f1f1;
45
+ table-layout: fixed;
46
+ width: 100%;
47
+ border-collapse: collapse;
48
+ overflow: scroll;
49
49
  tr {
50
- .ff-action-section {
50
+ .table-tree-row-action {
51
51
  display: none;
52
52
  }
53
-
54
53
  &:hover {
55
54
  background-color: var(--hover-color);
56
-
57
- .ff-title-action-container {
58
- display: flex;
55
+ .table-tree-row-action {
56
+ display: inline-flex;
57
+ align-items: center;
59
58
  }
60
59
  }
61
60
  }
62
61
 
63
- .ff-title-container {
64
- display: flex;
65
- align-items: center;
66
- gap: 4px;
67
-
68
- .ff-toggle-folder {
69
- display: flex;
70
- cursor: pointer;
71
- }
72
-
73
- &.ff-folder {
74
- font-weight: 600;
75
- }
76
-
77
- &.ff-file {
78
- font-weight: 400;
62
+ th {
63
+ color: var(--brand-color);
64
+ text-align: center;
65
+ padding: 10px 0;
66
+ background: var(--slider-table-color);
67
+ font-size: 13px;
68
+ width: 400px;
69
+ text-align: left;
70
+ &:first-child {
71
+ width: 400px;
72
+ position: sticky;
73
+ left: 0;
79
74
  }
75
+ }
80
76
 
81
- .ff-title {
82
- display: flex;
83
- gap: 4px;
84
- white-space: nowrap;
85
- overflow: hidden;
86
- text-overflow: ellipsis;
87
- font-weight: 400;
88
- cursor: pointer;
89
-
90
- .ff-title-label {
91
- display: flex;
92
- align-items: center;
93
- }
77
+ td {
78
+ font-size: 14px;
79
+ color: var(--brand-color);
80
+ white-space: nowrap;
81
+ text-overflow: ellipsis;
82
+ overflow: hidden;
83
+ text-align: left;
84
+ height: 32px;
94
85
 
95
- .ff-hover-icon {
96
- display: none;
97
- position: absolute;
98
- right: 10px;
86
+ &:first-child {
87
+ overflow: initial;
88
+ width: 400px;
89
+ position: sticky;
90
+ left: 0;
91
+ background-color: white;
92
+ &:hover {
93
+ background-color: var(--hover-color);
99
94
  }
100
95
  }
101
- }
102
96
 
103
- .ff-node-li {
104
- --indent-size: 18px;
105
- --total-children-height: var(--node-height);
97
+ .tree-table-space-block {
98
+ border: 1px solid transparent;
99
+ display: inline-block;
100
+ width: 20px;
101
+ height: 20px;
102
+ line-height: 16px;
103
+ text-align: center;
104
+ vertical-align: top;
105
+ font-size: 19px;
106
+ position: relative;
107
+ box-sizing: border-box;
108
+ margin-top: 7px;
109
+ border-radius: 50%;
106
110
 
107
- td {
108
- padding: 0 8px;
109
- white-space: nowrap;
110
- text-overflow: ellipsis;
111
111
  &:first-child {
112
- padding-left: calc(var(--level) * var(--indent-size));
113
- height: 32px;
114
- z-index: 0;
112
+ margin-left: 7px;
115
113
  }
116
114
 
117
- .first-div {
118
- background-color: white;
119
- display: flex;
120
- width: 100%;
121
- height: 32px;
115
+ &.btn-toggle {
116
+ // border: 1px solid var(--brand-color);
117
+ position: relative;
118
+ cursor: pointer;
119
+ width: 22px;
120
+ height: 22px;
121
+ z-index: 12;
122
122
 
123
- &:hover {
124
- background-color: var(--hover-color);
123
+ &::before {
124
+ display: none;
125
125
  }
126
+ }
127
+
128
+ &.last-block {
126
129
  &::before {
127
- content: '';
128
- position: absolute;
129
- top: 0;
130
- left: calc(var(--level) * var(--indent-size) - 4px);
131
- width: 1px;
132
- height: calc(var(--total-children-height));
133
- background-color: var(--tree-connecting-lines-color);
134
- z-index: 9999;
130
+ display: none;
135
131
  }
136
132
 
137
- // Horizontal line connecting child node to parent
138
133
  &::after {
139
- content: '';
140
134
  position: absolute;
141
- top: 50%;
142
- left: calc(var(--level) * var(--indent-size) - 4px);
135
+ content: '';
143
136
  width: 12px;
144
137
  height: 1px;
145
- background-color: var(--tree-connecting-lines-color);
146
- z-index: 10; /* Ensure it stays above the content */
138
+ background: var(--tree-connecting-lines-color);
139
+ top: 50%;
140
+ margin-top: -1px;
141
+ left: -10px;
147
142
  }
148
-
149
- &.ff-is-last::before {
150
- height: calc(var(--node-height) / 2);
143
+ }
144
+ &.no-folder {
145
+ width: 8px;
146
+ &::after {
147
+ position: absolute;
148
+ content: '';
149
+ width: 18px;
150
+ height: 1px;
151
+ background: var(--tree-connecting-lines-color);
152
+ top: 50%;
153
+ margin-top: -1px;
154
+ left: -10px;
151
155
  }
152
156
  }
153
- }
154
157
 
155
- // Remove the lines for root level
156
- &[style*='--level: 0']::before,
157
- &[style*='--level: 0']::after {
158
- content: none;
158
+ &:not(.last-block)::before {
159
+ position: absolute;
160
+ content: '';
161
+ width: 1px;
162
+ height: 40px;
163
+ background: var(--tree-connecting-lines-color);
164
+ left: 50%;
165
+ top: -12px;
166
+ z-index: -1;
167
+ }
159
168
  }
160
169
  }
161
170
  }
162
171
 
163
- .ff-title-action-container {
164
- display: none;
172
+ .tree-table-td-content {
173
+ display: inline-flex;
165
174
  align-items: center;
175
+ padding: 7px;
176
+ font-size: 12px;
177
+ font-family: 'Poppins';
178
+ }
179
+
180
+ .hidden {
181
+ display: none;
182
+ }
183
+
184
+ .show {
185
+ visibility: visible;
166
186
  }
167
- th:first-child,
168
- td:first-child {
169
- position: sticky;
170
- left: 0;
187
+ .tree-row-expanded,
188
+ .tree-row-collapsed {
189
+ svg {
190
+ height: 12px;
191
+ width: 12px;
192
+ path {
193
+ fill: var(--brand-color);
194
+ }
195
+ }
196
+ }
197
+ .tree-row-collapsed {
198
+ svg {
199
+ transform: rotate(-90deg);
200
+ transition: all;
201
+ }
171
202
  }