fix: chart resize

src/components/echarts/chart.tsx

@@ -1,4 +1,4 @@
-import { throttle } from 'echarts/core';
+import { throttle } from 'lodash';
 import { useCallback, useEffect, useRef } from 'react';
 import echarts, { ECOption } from '.';
 
@@ -9,6 +9,8 @@ const Chart: React.FC<{
 }> = ({ options, width, height }) => {
   const container = useRef<HTMLDivElement>(null);
   const chart = useRef<echarts.EChartsType>();
+  const resizeable = useRef(false);
+  const resizeObserver = useRef<ResizeObserver>();
 
   const init = useCallback(() => {
     if (container.current) {
@@ -30,27 +32,48 @@ const Chart: React.FC<{
   }, []);
 
   useEffect(() => {
-    init();
+    if (container.current) {
+      init();
+    }
     return () => {
       chart.current?.dispose();
     };
   }, [init]);
 
   useEffect(() => {
+    resizeable.current = false;
     resize();
     setOption(options);
   }, [options]);
 
-  // resize on window resize
+  useEffect(() => {
+    let timer: any = null;
+    timer = setTimeout(() => {
+      resizeable.current = true;
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+
   useEffect(() => {
     const handleResize = throttle(() => {
-      resize();
+      if (resizeable.current) {
+        chart.current?.resize();
+      }
     }, 100);
-    window.addEventListener('resize', handleResize);
+
+    if (container.current) {
+      resizeObserver.current = new ResizeObserver(handleResize);
+
+      resizeObserver.current.observe(container.current);
+    }
     return () => {
-      window.removeEventListener('resize', handleResize);
+      if (container.current) {
+        resizeObserver.current?.unobserve(container.current);
+      }
     };
-  }, [resize]);
+  }, []);
 
   return <div ref={container} style={{ width: width, height }}></div>;
 };

src/components/echarts/index.ts

@@ -1,5 +1,4 @@
 import type {
-  // 系列类型的定义后缀都为 SeriesOption
   BarSeriesOption,
   GaugeSeriesOption,
   LineSeriesOption
@@ -8,18 +7,16 @@ import { BarChart, GaugeChart, LineChart } from 'echarts/charts';
 import type {
   DatasetComponentOption,
   GridComponentOption,
-  // 组件类型的定义后缀都为 ComponentOption
   TitleComponentOption,
   TooltipComponentOption
 } from 'echarts/components';
 import {
-  // 数据集组件
   DatasetComponent,
   GridComponent,
   LegendComponent,
   TitleComponent,
   TooltipComponent,
-  // 内置数据转换器组件 (filter, sort)
+  // (filter, sort)
   TransformComponent
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
@@ -27,7 +24,6 @@ import * as echarts from 'echarts/core';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 
-// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
 type ECOption = ComposeOption<
   | BarSeriesOption
   | LineSeriesOption
@@ -38,7 +34,7 @@ type ECOption = ComposeOption<
   | GaugeSeriesOption
 >;
 
-// 注册必须的组件
+// register components and charts
 echarts.use([
   LegendComponent,
   TitleComponent,

src/hooks/use-overlay-scroller.ts

@@ -49,16 +49,15 @@ export default function useOverlayScroller(options?: any) {
   scrollEventElement.current =
     instanceRef.current?.elements()?.scrollEventElement;
 
-  const throttledScroll = React.useMemo(
+  const throttledScroll = React.useCallback(
-    () =>
+    throttle(() => {
-      throttle(() => {
+      scrollEventElement.current?.scrollTo?.({
-        scrollEventElement.current?.scrollTo?.({
+        top: scrollEventElement.current.scrollHeight,
-          top: scrollEventElement.current.scrollHeight,
+        behavior: 'smooth'
-          behavior: 'smooth'
+      });
-        });
+      instanceRef.current?.update?.();
-        instanceRef.current?.update?.();
+    }, 100),
-      }, 300),
+    [(scrollEventElement.current, instanceRef.current)]
-    [scrollEventElement.current, instanceRef.current]
   );
 
   const scrollauto = React.useCallback(() => {

src/pages/dashboard/components/resource-utilization.tsx

@@ -37,78 +37,6 @@ const TypeKeyMap = {
   }
 };
 
-const option = {
-  title: {
-    text: ''
-  },
-  legend: {
-    itemWidth: 8,
-    itemHeight: 8,
-    data: []
-  },
-  grid: {
-    left: 0,
-    right: 20,
-    bottom: 20,
-    containLabel: true
-  },
-  tooltip: {
-    trigger: 'axis',
-    formatter(params: any) {
-      let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;
-      params.forEach((item: any) => {
-        result += `<span class="tooltip-item">
-       <span class="tooltip-item-name">
-         <span style="display:inline-block;margin-right:5px;border-radius:8px;width:8px;height:8px;background-color:${item.color};"></span>
-         <span class="tooltip-title">${item.seriesName}</span>:
-       </span>
-        <span class="tooltip-value">${item.data.value}</span>
-        </span>`;
-      });
-      return `<div class="tooltip-wrapper">${result}</div>`;
-    }
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: true,
-    axisTick: {
-      show: true,
-      lineStyle: {
-        color: chartColorMap.tickLineColor
-      }
-    },
-    axisLabel: {
-      color: chartColorMap.axislabelColor,
-      // fontFamily: 'unset',
-      fontSize: 12
-    },
-    axisLine: {
-      show: false
-    },
-    data: []
-  },
-  yAxis: {
-    max: 100,
-    min: 0,
-    splitLine: {
-      show: true,
-      lineStyle: {
-        type: 'dashed'
-      }
-    },
-    axisLabel: {
-      color: chartColorMap.axislabelColor,
-      // fontFamily: 'unset',
-      fontSize: 12
-    },
-    axisTick: {
-      show: false
-    },
-    type: 'value'
-  },
-  series: []
-};
-
 const UtilizationOvertime: React.FC = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.history || {};

src/pages/playground/components/message-input.tsx

@@ -353,6 +353,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
               type="text"
               icon={<ClearOutlined />}
               size="middle"
+              disabled={loading}
               onClick={handleClearAll}
             ></Button>
           </Tooltip>

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -217,7 +217,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     };
 
     const handleApplyToAllModels = (e: any) => {
-      console.log('checkbox change:', e.target.checked);
       isApplyToAllModels.current = e.target.checked;
       if (e.target.checked) {
         setGlobalParams({
@@ -334,7 +333,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     }, [modelList, intl]);
 
     useEffect(() => {
-      console.log('globalParams:', globalParams.model, globalParams);
       setParams({
         ...params,
         model: model,
@@ -384,7 +382,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         <div className="header">
           <span className="title">
             <Select
-              style={{ minWidth: '120px', maxWidth: '200px' }}
+              style={{ minWidth: '120px', maxWidth: '180px' }}
               variant="borderless"
               options={modelFullList}
               onChange={handleModelChange}
@@ -404,7 +402,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
               }}
             ></Select>
           </span>
-          <ReferenceParams usage={tokenResult}></ReferenceParams>
+          <ReferenceParams usage={tokenResult} scaleable></ReferenceParams>
           <span className="action">
             <Dropdown
               menu={{

src/pages/playground/components/reference-params.tsx

@@ -1,11 +1,13 @@
 import { WarningOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Alert, Space, Tooltip } from 'antd';
+import classNames from 'classnames';
 import _ from 'lodash';
 import '../style/reference-params.less';
 
 interface ReferenceParamsProps {
   showOutput?: boolean;
+  scaleable?: boolean;
   usage: {
     error?: boolean;
     errorMessage?: string;
@@ -20,7 +22,7 @@ interface ReferenceParamsProps {
 
 const ReferenceParams = (props: ReferenceParamsProps) => {
   const intl = useIntl();
-  const { usage, showOutput = true } = props;
+  const { usage, showOutput = true, scaleable } = props;
   if (!usage || _.isEmpty(usage)) {
     return null;
   }
@@ -41,8 +43,16 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
     );
   }
   return (
-    <div className="reference-params">
+    <div
-      <span className="usage">
+      className={classNames('reference-params', {
+        scaleable: scaleable
+      })}
+    >
+      <span
+        className={classNames('usage', {
+          scaleable: scaleable
+        })}
+      >
         <Tooltip
           title={
             <Space>
@@ -65,7 +75,11 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
       </span>
 
       {showOutput && (
-        <span className="usage">
+        <span
+          className={classNames('usage', {
+            scaleable: scaleable
+          })}
+        >
           <Tooltip
             title={
               <Space>

src/pages/playground/style/model-item.less

@@ -4,6 +4,7 @@
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
   height: 100%;
+  background-color: var(--color-white-1);
 
   .header {
     padding-inline: 2px 16px;

src/pages/playground/style/reference-params.less

@@ -6,7 +6,16 @@
   color: var(--ant-orange);
   gap: 20px;
 
+  &.scaleable {
+    gap: 15px;
+  }
+
   .usage {
     cursor: pointer;
+    line-height: 16px;
+
+    &.scaleable {
+      transform: scale(0.9);
+    }
   }
 }