fix other merge conflict

Signed-off-by: Huong Nguyen <huongg1409@gmail>

src/components/flowchart/components/sliced-pipeline-action-bar/sliced-pipeline-action-bar.js

@@ -17,7 +17,7 @@ export const SlicedPipelineActionBar = ({
   const { outerWidth, sidebarWidth } = chartSize;
   const sidebarVisible = sidebarWidth > 140;
 
-  const transformX = sidebarVisible ? outerWidth / 2 + 100 : outerWidth / 2;
+  const transformX = sidebarVisible ? outerWidth / 2.5 : outerWidth / 3;
   if (slicedPipeline.length > 0) {
     return (
       <div

src/components/flowchart/components/sliced-pipeline-action-bar/sliced-pipeline-action-bar.scss

@@ -14,37 +14,107 @@
 
 $padding-top-bottom: 8px;
 $padding-right-left: 16px;
+$inner-gap: 12px;
 
 .sliced-pipeline-action-bar {
   background-color: var(--sliced-pipeline-action-bar--background);
   border-radius: 4px;
   bottom: 30px;
   display: flex;
   margin: 0;
-  padding: 0;
   position: absolute;
   transition: transform ease 0.7s;
+  padding: $padding-top-bottom $padding-right-left;
+
+  // create a ticket to investigate why there are so many opacities on button component
+  .pipeline-icon-toolbar__button {
+    opacity: 1;
+
+    svg {
+      fill: var(--sliced-pipeline-action-bar--color);
+      opacity: 1;
+    }
+  }
 }
 
 .sliced-pipeline-action-bar--info {
   align-items: center;
-  border-right: 1px solid #d9dcde;
   color: var(--sliced-pipeline-action-bar--color-faded);
   display: flex;
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
-  padding: $padding-top-bottom $padding-right-left;
+}
+
+.sliced-pipeline-action-bar--run-command {
+  display: flex;
+  padding: 0 $padding-right-left;
+  width: 780px;
+
+  .container {
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .command-value {
+    color: var(--sliced-pipeline-action-bar--color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-x: scroll;
+    background-color: var(--sliced-pipeline-action-bar--code-background);
+    padding: $padding-top-bottom $inner-gap;
+  }
+
+  .toolbox {
+    margin-left: 10px;
+  }
 }
 
 .sliced-pipeline-action-bar--cta {
-  padding: $padding-top-bottom $padding-right-left;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: $padding-top-bottom $inner-gap;
+  border: 1px solid var(--sliced-pipeline-action-bar--color);
+  border-radius: 4px;
+}
+
+.sliced-pipeline-action-bar--reset {
+  background: #f03b3a;
 
   .button__btn {
-    border: none;
-    color: var(--sliced-pipeline-action-bar--color);
     font-size: 14px;
     padding: 0;
-    width: 65px;
+    border: none;
+
+    &:hover {
+      background: none;
+    }
+  }
+}
+
+.sliced-pipeline-action-bar--slice {
+  cursor: pointer;
+
+  .pipeline-icon--container {
+    list-style-type: none;
+  }
+
+  .pipeline-icon {
+    width: 24px;
+    height: 24px;
+
+    path {
+      fill: var(--sliced-pipeline-action-bar--color);
+    }
+  }
+
+  .sliced-pipeline-action-bar--slice-text {
+    font-size: 14px;
+    color: var(--sliced-pipeline-action-bar--color);
+    font-weight: 600;
+    margin-left: 10px;
   }
 }

src/components/flowchart/flowchart.js

@@ -540,7 +540,7 @@ export class FlowChart extends Component {
     // If no filters are currently applied, reset the node filters.
     // This is done to ensure that clicking a node in an unfiltered state does not leave any stale filters.
     if (!this.props.isSlicingPipelineApplied) {
-      this.props.onResetSlicePipeline(null, null);
+      this.props.onResetSlicePipeline();
     }
   };
 
@@ -735,9 +735,11 @@ export class FlowChart extends Component {
       onApplySlice,
       runCommand,
       visibleGraph,
+      slicedPipeline,
     } = this.props;
     const { outerWidth = 0, outerHeight = 0 } = chartSize;
     const { slicedPipelineState } = this.state;
+
     return (
       <div
         className="pipeline-flowchart kedro"
@@ -802,7 +804,7 @@ export class FlowChart extends Component {
         <div ref={this.slicedPipelineActionRef}>
           <SlicedPipelineActionBar
             chartSize={chartSize}
-            slicedPipeline={slicedPipelineState.range}
+            slicedPipeline={slicedPipeline}
             isSlicingPipelineApplied={isSlicingPipelineApplied}
             onApplySlicingPipeline={() => onApplySlice(true)}
             onResetSlicingPipeline={this.resetSlicedPipeline}
@@ -860,7 +862,7 @@ export const mapStateToProps = (state, ownProps) => ({
   visibleCode: state.visible.code,
   visibleMetaSidebar: getVisibleMetaSidebar(state),
   slicedPipeline: getSlicedPipeline(state),
-  isSlicingPipelineApplied: state.slice.aply,
+  isSlicingPipelineApplied: state.slice.apply,
   runCommand: getRunCommand(state),
   ...ownProps,
 });

src/components/node-list/index.js

@@ -335,7 +335,7 @@ export const mapStateToProps = (state) => ({
   disabledModularPipeline: state.modularPipeline.disabled,
   inputOutputDataNodes: getInputOutputNodesForFocusedModularPipeline(state),
   modularPipelinesTree: getModularPipelinesTree(state),
-  isSlicingPipelineApplied: state.slice.aply,
+  isSlicingPipelineApplied: state.slice.apply,
 });
 
 export const mapDispatchToProps = (dispatch) => ({

src/components/node-list/node-list-tree.js

@@ -260,7 +260,7 @@ export const mapStateToProps = (state) => ({
   nodeSelected: getNodeSelected(state),
   expanded: state.modularPipeline.expanded,
   slicedPipeline: getSlicedPipeline(state),
-  isSlicingPipelineApplied: state.slice.aply,
+  isSlicingPipelineApplied: state.slice.apply,
 });
 
 export const mapDispatchToProps = (dispatch) => ({

src/selectors/nodes.js

@@ -2,7 +2,7 @@ import { createSelector } from 'reselect';
 import { select } from 'd3-selection';
 import { arrayToObject } from '../utils';
 import { getPipelineNodeIDs } from './pipeline';
-import { getFilteredPipeline } from './filtered-pipeline';
+import { getSlicedPipeline } from './sliced-pipeline';
 import {
   getNodeDisabled,
   getNodeDisabledTag,
@@ -259,12 +259,14 @@ export const getNodeDataObject = createSelector(
 export const getModularPipelinesTree = createSelector(
   [
     (state) => state.modularPipeline.tree,
-    (state) => state.filters.apply,
+    (state) => state.slice.apply,
     getNodeDataObject,
-    getFilteredPipeline,
+    getSlicedPipeline,
   ],
-  (modularPipelinesTree, isFiltersApplied, nodes, filteredPipeline) => {
-    if (!modularPipelinesTree) {return {};}
+  (modularPipelinesTree, isSlicingPipelineApplied, nodes, filteredPipeline) => {
+    if (!modularPipelinesTree) {
+      return {};
+    }
 
     // Helper function to update children data
     const updateChildrenData = (children, sourceNodes) => {
@@ -280,14 +282,14 @@ export const getModularPipelinesTree = createSelector(
       );
 
     // Determine the relevant nodes based on whether filters are applied
-    const relevantNodes = isFiltersApplied
+    const relevantNodes = isSlicingPipelineApplied
       ? filterNodes(nodes, filteredPipeline)
       : nodes;
 
     // Update modularPipelinesTree data and children data with relevantNodes
     Object.entries(modularPipelinesTree).forEach(
       ([modularPipelineID, modularPipeline]) => {
-        if (!isFiltersApplied) {
+        if (!isSlicingPipelineApplied) {
           modularPipeline.data = { ...nodes[modularPipelineID] };
         }
         updateChildrenData(modularPipeline.children, relevantNodes);

src/selectors/run-command.js

@@ -1,12 +1,12 @@
 import { createSelector } from 'reselect';
 
-const getFilters = (state) => state.filters;
+const getSlicedPipeline = (state) => state.slice;
 const getNodesNames = (state) => state.node.fullName;
 
 export const getRunCommand = createSelector(
-  [getFilters, getNodesNames],
-  (filters, nodesNames) => {
-    const { from, to } = filters;
+  [getSlicedPipeline, getNodesNames],
+  (slicedPipeline, nodesNames) => {
+    const { from, to } = slicedPipeline;
 
     if (!from && !to) {
       return null;