style: 流水线G6样式

react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx

@@ -1,6 +1,9 @@
 import SubAreaTitle from '@/components/SubAreaTitle';
+import { getComputingResourceReq } from '@/services/pipeline';
 import { PipelineNodeModelSerialize } from '@/types';
-import { Form, Input, type FormProps } from 'antd';
+import { to } from '@/utils/promise';
+import { Form, Input, Select, type FormProps } from 'antd';
+import { useEffect, useState } from 'react';
 import styles from './index.less';
 const { TextArea } = Input;
 
@@ -10,6 +13,25 @@ type ExperimentParameterProps = {
 };
 
 function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
+  const [resourceStandardList, setResourceStandardList] = useState([]); // 资源规模列表
+
+  useEffect(() => {
+    getComputingResource();
+  }, []);
+
+  // 获取资源规格列表数据
+  const getComputingResource = async () => {
+    const params = {
+      page: 0,
+      size: 1000,
+      resource_type: '',
+    };
+    const [res] = await to(getComputingResourceReq(params));
+    if (res && res.data && res.data.content) {
+      setResourceStandardList(res.data.content);
+    }
+  };
+
   // 控制策略
   const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map(
     ([key, value]) => ({ key, value }),
@@ -103,7 +125,14 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
           },
         ]}
       >
-        <Input disabled />
+        <Select
+          options={resourceStandardList}
+          disabled
+          fieldNames={{
+            label: 'description',
+            value: 'standard',
+          }}
+        />
       </Form.Item>
       <Form.Item label="挂载路径" name="mount_path">
         <Input disabled />

react-ui/src/pages/Experiment/experimentText/index.less

@@ -27,5 +27,7 @@
     width: 100%;
     height: calc(100% - 56px);
     background-color: @background-color;
+    background-image: url(/assets/images/pipeline-canvas-back.png);
+    background-size: 100% 100%;
   }
 }

react-ui/src/pages/Pipeline/editPipeline/editPipeline.less

@@ -1,80 +0,0 @@
-#graph {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-.editPipelineProps {
-  :global {
-    label {
-      width: 100%;
-
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
-.editPipelinePropsContent {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 43px;
-  margin-bottom: 20px;
-  padding: 0 24px;
-  color: #1d1d20;
-  font-size: 15px;
-  font-family: 'Alibaba';
-  background: #f8fbff;
-}
-.centerContainer {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-.buttonList {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  width: 100%;
-  height: 45px;
-  padding: 0 30px;
-  background: #ffffff;
-  box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
-}
-.rightmenu {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 120px;
-  height: 146px;
-  overflow-y: auto;
-  color: #333333;
-  font-size: 12px;
-
-  background-color: #ffffff;
-}
-
-.rightmenuItem {
-  padding: 10px 20px;
-  cursor: pointer;
-}
-.rightmenuItem:hover {
-  color: #ffffff;
-  background-color: rgba(24, 144, 255, 0.3);
-}
-
-.ref-row {
-  display: flex;
-  align-items: center;
-
-  .select-button {
-    display: flex;
-    flex: none;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100px;
-    margin-left: 10px;
-    padding-right: 0;
-    padding-left: 0;
-  }
-}

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -2,14 +2,13 @@ import KFIcon from '@/components/KFIcon';
 import { useStateRef, useVisible } from '@/hooks';
 import { getWorkflowById, saveWorkflow } from '@/services/pipeline/index.js';
 import { to } from '@/utils/promise';
-import { useEmotionCss } from '@ant-design/use-emotion-css';
 import G6 from '@antv/g6';
 import { Button, message } from 'antd';
 import { useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { s8 } from '../../../utils';
 import GlobalParamsDrawer from '../components/GlobalParamsDrawer';
-import Styles from './editPipeline.less';
+import styles from './index.less';
 import ModelMenus from './modelMenus';
 import Props from './props';
 import { findAllParentNodes, findFirstDuplicate } from './utils';
@@ -20,42 +19,6 @@ const EditPipeline = () => {
   const navgite = useNavigate();
   let contextMenu = {};
   const locationParams = useParams(); //新版本获取路由参数接口
-
-  const pipelineContainer = useEmotionCss(() => {
-    return {
-      display: 'flex',
-      backgroundColor: '#fff',
-      height: '98vh',
-      position: 'relative',
-    };
-  });
-  const rightmenu = useEmotionCss(() => {
-    return {
-      position: 'absolute',
-      width: '120px',
-      height: '146px',
-      left: '0px',
-      top: '0px',
-
-      color: '#333333',
-      overflowY: 'auto',
-    };
-  });
-  const rightmenuItem = useEmotionCss(() => {
-    return {
-      padding: '10px 20px',
-      cursor: 'pointer',
-      fontSize: '12px',
-    };
-  });
-  const graphStyle = useEmotionCss(() => {
-    return {
-      width: '100%',
-      backgroundSize: '100% 100%',
-      backgroundImage: 'url(/assets/images/pipeline-canvas-back.png)',
-      flex: 1,
-    };
-  });
   const graphRef = useRef();
   const paramsDrawerRef = useRef();
   const propsRef = useRef();
@@ -730,10 +693,10 @@ const EditPipeline = () => {
     };
   };
   return (
-    <div className={pipelineContainer}>
+    <div className={styles['pipeline-container']}>
       <ModelMenus onParDragEnd={onDragEnd}></ModelMenus>
-      <div className={Styles.centerContainer}>
-        <div className={Styles.buttonList}>
+      <div className={styles['pipeline-container__content']}>
+        <div className={styles['pipeline-container__content__top']}>
           <Button
             type="default"
             icon={<KFIcon type="icon-quanjucanshu" />}
@@ -768,7 +731,7 @@ const EditPipeline = () => {
             保存并返回
           </Button>
         </div>
-        <div className={graphStyle} ref={graphRef} id={Styles.graphStyle}></div>
+        <div className={styles['pipeline-container__content__graph']} ref={graphRef}></div>
       </div>
       <Props ref={propsRef} onParentChange={formChange}></Props>
       <GlobalParamsDrawer

react-ui/src/pages/Pipeline/editPipeline/index.less

@@ -0,0 +1,29 @@
+.pipeline-container {
+  display: flex;
+  height: 100%;
+  background-color: #fff;
+
+  &__content {
+    flex: 1;
+    height: 100%;
+
+    &__top {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      width: 100%;
+      height: 45px;
+      padding: 0 30px;
+      background: #ffffff;
+      box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
+    }
+
+    &__graph {
+      width: 100%;
+      height: calc(100% - 45px);
+      background-color: @background-color;
+      background-image: url(/assets/images/pipeline-canvas-back.png);
+      background-size: 100% 100%;
+    }
+  }
+}

react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx

@@ -24,7 +24,7 @@ const ModelMenus = ({ onParDragEnd }) => {
   };
   const { Panel } = Collapse;
   return (
-    <div style={{ width: '250px', height: '99%' }} className={Styles.collapse}>
+    <div className={Styles.collapse}>
       <div className={Styles.modelMenusTitle}>组件库</div>
       {modelMenusList && modelMenusList.length > 0 ? (
         <Collapse

react-ui/src/pages/Pipeline/editPipeline/modelMenus.less

@@ -1,35 +1,24 @@
-.collapseList {
-}
-.collapseItem {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  padding: 0 16px;
-  color: #575757;
-  font-size: 14px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.collapseItem:hover {
-  background: rgba(22, 100, 255, 0.08);
-  color:#1664ff;
-}
 .collapse {
+  width: 250px;
+  height: 100%;
+
   :global {
     .ant-collapse {
+      height: calc(100% - 60px);
+      overflow-y: auto;
       background-color: #fff;
       border-color: transparent !important;
     }
     .ant-collapse > .ant-collapse-item > .ant-collapse-header {
       margin-bottom: 5px;
+      padding: 20px 16px 15px 16px;
       background-color: #fff;
       border-color: transparent;
-      padding: 20px 16px 15px 16px;
     }
 
     .ant-collapse > .ant-collapse-item {
       margin: 0 10px;
-      border-bottom:0.5px dashed rgba(20, 49, 179, 0.12);
+      border-bottom: 0.5px dashed rgba(20, 49, 179, 0.12);
       border-radius: 0px;
     }
     .ant-collapse .ant-collapse-content {
@@ -41,10 +30,23 @@
     }
   }
 }
-.modelMenusTitle{
-  padding: 12px 25px;
+.collapseItem {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 16px;
+  color: #575757;
+  font-size: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.collapseItem:hover {
+  color: #1664ff;
+  background: rgba(22, 100, 255, 0.08);
+}
+.modelMenusTitle {
   margin-bottom: 10px;
-  color:#111111;
-font-size:16px;
-font-family: 'Alibaba';
-}
+  padding: 12px 25px;
+  color: #111111;
+  font-size: 16px;
+}

react-ui/src/pages/Pipeline/editPipeline/props.jsx

@@ -8,7 +8,7 @@ import { pick } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import PropsLabel from '../components/PropsLabel';
 import ResourceSelectorModal, { ResourceSelectorType } from '../components/ResourceSelectorModal';
-import styles from './editPipeline.less';
+import styles from './props.less';
 import { createMenuItems } from './utils';
 const { TextArea } = Input;
 
@@ -188,275 +188,273 @@ const Props = forwardRef(({ onParentChange }, ref) => {
   );
 
   return (
-    <>
-      <Drawer
-        title="编辑任务"
-        placement="right"
-        rootStyle={{ marginTop: '45px' }}
-        getContainer={false}
-        closeIcon={false}
-        onClose={onClose}
-        afterOpenChange={afterOpenChange}
-        open={open}
-        width={520}
-        className={styles.editPipelineProps}
+    <Drawer
+      title="编辑任务"
+      placement="right"
+      rootStyle={{ marginTop: '45px' }}
+      getContainer={false}
+      closeIcon={false}
+      onClose={onClose}
+      afterOpenChange={afterOpenChange}
+      open={open}
+      width={520}
+      className={styles.editPipelineProps}
+    >
+      <Form
+        name="form"
+        form={form}
+        layout="vertical"
+        labelCol={{
+          span: 24,
+        }}
+        wrapperCol={{
+          span: 24,
+        }}
+        style={{
+          maxWidth: 600,
+        }}
+        autoComplete="off"
       >
-        <Form
-          name="form"
-          form={form}
-          layout="vertical"
-          labelCol={{
-            span: 24,
-          }}
-          wrapperCol={{
-            span: 24,
-          }}
-          style={{
-            maxWidth: 600,
-          }}
-          autoComplete="off"
+        <div className={styles.editPipelinePropsContent}>
+          <SubAreaTitle image="/assets/images/static-message.png" title="基本信息"></SubAreaTitle>
+        </div>
+        <Form.Item
+          label="任务名称"
+          name="label"
+          rules={[
+            {
+              required: true,
+              message: '请输入任务名称',
+            },
+          ]}
         >
-          <div className={styles.editPipelinePropsContent}>
-            <SubAreaTitle image="/assets/images/static-message.png" title="基本信息"></SubAreaTitle>
-          </div>
-          <Form.Item
-            label="任务名称"
-            name="label"
-            rules={[
-              {
-                required: true,
-                message: '请输入任务名称',
-              },
-            ]}
-          >
-            <Input placeholder="请输入任务名称" allowClear />
-          </Form.Item>
-          <Form.Item
-            label="任务ID"
-            name="id"
-            rules={[
-              {
-                required: true,
-                message: '请输入任务id',
-              },
-            ]}
-          >
-            <Input disabled />
-          </Form.Item>
-          <div className={styles.editPipelinePropsContent}>
-            <SubAreaTitle image="/assets/images/duty-message.png" title="任务信息"></SubAreaTitle>
+          <Input placeholder="请输入任务名称" allowClear />
+        </Form.Item>
+        <Form.Item
+          label="任务ID"
+          name="id"
+          rules={[
+            {
+              required: true,
+              message: '请输入任务id',
+            },
+          ]}
+        >
+          <Input disabled />
+        </Form.Item>
+        <div className={styles.editPipelinePropsContent}>
+          <SubAreaTitle image="/assets/images/duty-message.png" title="任务信息"></SubAreaTitle>
+        </div>
+        <Form.Item label="镜像" required>
+          <div className={styles['ref-row']}>
+            <Form.Item name="image" noStyle rules={[{ required: true, message: '请输入镜像' }]}>
+              <Input placeholder="请输入或选择镜像" allowClear />
+            </Form.Item>
+            <Form.Item noStyle>
+              <Button
+                type="link"
+                icon={getSelectBtnIcon({ item_type: 'image' })}
+                onClick={() => selectResource('image', { item_type: 'image' })}
+                className={styles['select-button']}
+              >
+                选择镜像
+              </Button>
+            </Form.Item>
           </div>
-          <Form.Item label="镜像" required>
-            <div className={styles['ref-row']}>
-              <Form.Item name="image" noStyle rules={[{ required: true, message: '请输入镜像' }]}>
-                <Input placeholder="请输入或选择镜像" allowClear />
-              </Form.Item>
-              <Form.Item noStyle>
-                <Button
-                  type="link"
-                  icon={getSelectBtnIcon({ item_type: 'image' })}
-                  onClick={() => selectResource('image', { item_type: 'image' })}
-                  className={styles['select-button']}
-                >
-                  选择镜像
-                </Button>
-              </Form.Item>
-            </div>
-          </Form.Item>
+        </Form.Item>
+        <Form.Item
+          name="working_directory"
+          label={
+            <PropsLabel
+              menuItems={menuItems}
+              title="工作目录"
+              onClick={(value) => {
+                handleParameterClick('working_directory', value);
+              }}
+            />
+          }
+        >
+          <Input placeholder="请输入工作目录" allowClear />
+        </Form.Item>
+        <Form.Item
+          name="command"
+          label={
+            <PropsLabel
+              menuItems={menuItems}
+              title="启动命令"
+              onClick={(value) => {
+                handleParameterClick('command', value);
+              }}
+            />
+          }
+        >
+          <TextArea placeholder="请输入启动命令" allowClear />
+        </Form.Item>
+        <Form.Item
+          label="资源规格"
+          name="resources_standard"
+          rules={[
+            {
+              required: true,
+              message: '请选择资源规格',
+            },
+          ]}
+        >
+          <Select
+            showSearch
+            placeholder="请选择资源规格"
+            filterOption={filterResourceStandard}
+            options={resourceStandardList}
+            fieldNames={{
+              label: 'description',
+              value: 'standard',
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          name="mount_path"
+          label={
+            <PropsLabel
+              menuItems={menuItems}
+              title="挂载路径"
+              onClick={(value) => {
+                handleParameterClick('mount_path', value);
+              }}
+            />
+          }
+        >
+          <Input placeholder="请输入挂载路径" allowClear />
+        </Form.Item>
+        <Form.Item
+          name="env_variables"
+          label={
+            <PropsLabel
+              menuItems={menuItems}
+              title="环境变量"
+              onClick={(value) => {
+                handleParameterClick('env_variables', value);
+              }}
+            />
+          }
+        >
+          <TextArea placeholder="请输入环境变量" allowClear />
+        </Form.Item>
+        {controlStrategyList.map((item) => (
           <Form.Item
-            name="working_directory"
+            key={item.key}
+            name={['control_strategy', item.key]}
             label={
               <PropsLabel
                 menuItems={menuItems}
-                title="工作目录"
+                title={item.value.label}
                 onClick={(value) => {
-                  handleParameterClick('working_directory', value);
+                  handleParameterClick(['control_strategy', item.key], {
+                    ...item.value,
+                    value,
+                  });
                 }}
               />
             }
+            getValueProps={(e) => {
+              return { value: e.value };
+            }}
+            getValueFromEvent={(e) => {
+              return {
+                ...item.value,
+                value: e.target.value,
+              };
+            }}
           >
-            <Input placeholder="请输入工作目录" allowClear />
+            <Input placeholder={item.value.label} allowClear />
           </Form.Item>
+        ))}
+        <div className={styles.editPipelinePropsContent}>
+          <SubAreaTitle image="/assets/images/duty-message.png" title="输入参数"></SubAreaTitle>
+        </div>
+        {inParametersList.map((item) => (
           <Form.Item
-            name="command"
+            key={item.key}
             label={
               <PropsLabel
                 menuItems={menuItems}
-                title="启动命令"
+                title={item.value.label + '(' + item.key + ')'}
                 onClick={(value) => {
-                  handleParameterClick('command', value);
+                  handleParameterClick(['in_parameters', item.key], {
+                    ...item.value,
+                    value,
+                  });
                 }}
               />
             }
+            required={item.value.require ? true : false}
           >
-            <TextArea placeholder="请输入启动命令" allowClear />
-          </Form.Item>
-          <Form.Item
-            label="资源规格"
-            name="resources_standard"
-            rules={[
-              {
-                required: true,
-                message: '请选择资源规格',
-              },
-            ]}
-          >
-            <Select
-              showSearch
-              placeholder="请选择资源规格"
-              filterOption={filterResourceStandard}
-              options={resourceStandardList}
-              fieldNames={{
-                label: 'description',
-                value: 'standard',
-              }}
-            />
-          </Form.Item>
-          <Form.Item
-            name="mount_path"
-            label={
-              <PropsLabel
-                menuItems={menuItems}
-                title="挂载路径"
-                onClick={(value) => {
-                  handleParameterClick('mount_path', value);
+            <div className={styles['ref-row']}>
+              <Form.Item
+                name={['in_parameters', item.key]}
+                noStyle
+                rules={[{ required: item.value.require ? true : false }]}
+                getValueProps={(e) => {
+                  return { value: e.value };
                 }}
-              />
-            }
-          >
-            <Input placeholder="请输入挂载路径" allowClear />
+                getValueFromEvent={(e) => {
+                  return {
+                    ...item.value,
+                    value: e.target.value,
+                  };
+                }}
+              >
+                <Input placeholder={item.value.label} allowClear />
+              </Form.Item>
+              {item.value.type === 'ref' && (
+                <Form.Item noStyle>
+                  <Button
+                    type="link"
+                    icon={getSelectBtnIcon(item.value)}
+                    onClick={() => selectResource(['in_parameters', item.key], item.value)}
+                    className={styles['select-button']}
+                  >
+                    {item.value.label}
+                  </Button>
+                </Form.Item>
+              )}
+            </div>
           </Form.Item>
+        ))}
+        <div className={styles.editPipelinePropsContent}>
+          <SubAreaTitle image="/assets/images/duty-message.png" title="输出参数"></SubAreaTitle>
+        </div>
+        {outParametersList.map((item) => (
           <Form.Item
-            name="env_variables"
+            key={item.key}
+            name={['out_parameters', item.key]}
             label={
               <PropsLabel
                 menuItems={menuItems}
-                title="环境变量"
+                title={item.value.label + '(' + item.key + ')'}
                 onClick={(value) => {
-                  handleParameterClick('env_variables', value);
+                  handleParameterClick(['out_parameters', item.key], {
+                    ...item.value,
+                    value,
+                  });
                 }}
               />
             }
+            rules={[{ required: item.value.require ? true : false }]}
+            getValueProps={(e) => {
+              return { value: e.value };
+            }}
+            getValueFromEvent={(e) => {
+              return {
+                ...item.value,
+                value: e.target.value,
+              };
+            }}
           >
-            <TextArea placeholder="请输入环境变量" allowClear />
+            <Input placeholder={item.value.label} allowClear />
           </Form.Item>
-          {controlStrategyList.map((item) => (
-            <Form.Item
-              key={item.key}
-              name={['control_strategy', item.key]}
-              label={
-                <PropsLabel
-                  menuItems={menuItems}
-                  title={item.value.label}
-                  onClick={(value) => {
-                    handleParameterClick(['control_strategy', item.key], {
-                      ...item.value,
-                      value,
-                    });
-                  }}
-                />
-              }
-              getValueProps={(e) => {
-                return { value: e.value };
-              }}
-              getValueFromEvent={(e) => {
-                return {
-                  ...item.value,
-                  value: e.target.value,
-                };
-              }}
-            >
-              <Input placeholder={item.value.label} allowClear />
-            </Form.Item>
-          ))}
-          <div className={styles.editPipelinePropsContent}>
-            <SubAreaTitle image="/assets/images/duty-message.png" title="输入参数"></SubAreaTitle>
-          </div>
-          {inParametersList.map((item) => (
-            <Form.Item
-              key={item.key}
-              label={
-                <PropsLabel
-                  menuItems={menuItems}
-                  title={item.value.label + '(' + item.key + ')'}
-                  onClick={(value) => {
-                    handleParameterClick(['in_parameters', item.key], {
-                      ...item.value,
-                      value,
-                    });
-                  }}
-                />
-              }
-              required={item.value.require ? true : false}
-            >
-              <div className={styles['ref-row']}>
-                <Form.Item
-                  name={['in_parameters', item.key]}
-                  noStyle
-                  rules={[{ required: item.value.require ? true : false }]}
-                  getValueProps={(e) => {
-                    return { value: e.value };
-                  }}
-                  getValueFromEvent={(e) => {
-                    return {
-                      ...item.value,
-                      value: e.target.value,
-                    };
-                  }}
-                >
-                  <Input placeholder={item.value.label} allowClear />
-                </Form.Item>
-                {item.value.type === 'ref' && (
-                  <Form.Item noStyle>
-                    <Button
-                      type="link"
-                      icon={getSelectBtnIcon(item.value)}
-                      onClick={() => selectResource(['in_parameters', item.key], item.value)}
-                      className={styles['select-button']}
-                    >
-                      {item.value.label}
-                    </Button>
-                  </Form.Item>
-                )}
-              </div>
-            </Form.Item>
-          ))}
-          <div className={styles.editPipelinePropsContent}>
-            <SubAreaTitle image="/assets/images/duty-message.png" title="输出参数"></SubAreaTitle>
-          </div>
-          {outParametersList.map((item) => (
-            <Form.Item
-              key={item.key}
-              name={['out_parameters', item.key]}
-              label={
-                <PropsLabel
-                  menuItems={menuItems}
-                  title={item.value.label + '(' + item.key + ')'}
-                  onClick={(value) => {
-                    handleParameterClick(['out_parameters', item.key], {
-                      ...item.value,
-                      value,
-                    });
-                  }}
-                />
-              }
-              rules={[{ required: item.value.require ? true : false }]}
-              getValueProps={(e) => {
-                return { value: e.value };
-              }}
-              getValueFromEvent={(e) => {
-                return {
-                  ...item.value,
-                  value: e.target.value,
-                };
-              }}
-            >
-              <Input placeholder={item.value.label} allowClear />
-            </Form.Item>
-          ))}
-        </Form>
-      </Drawer>
-    </>
+        ))}
+      </Form>
+    </Drawer>
   );
 });
 

react-ui/src/pages/Pipeline/editPipeline/props.less

@@ -0,0 +1,38 @@
+.editPipelineProps {
+  :global {
+    label {
+      width: 100%;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.editPipelinePropsContent {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 43px;
+  margin-bottom: 20px;
+  padding: 0 24px;
+  color: @text-color;
+  font-size: @font-size;
+  background: #f8fbff;
+}
+.ref-row {
+  display: flex;
+  align-items: center;
+
+  .select-button {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100px;
+    margin-left: 10px;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}