optimize(console): support dnd list, panel chart responsive etc (#1568)

* fix: roc auc column error, add dnd list

* optimize: dnd list interactive

* optimize: section empty placeholder

* optimize: panel delete confirm

* optimize: make chart responsive

* optimize: grid layout & fullscreen

* fix: lint error

console/package.json

@@ -91,6 +91,7 @@
     "react-refresh": "^0.14.0",
     "react-router": "5.2.1",
     "react-router-dom": "^5.2.0",
+    "react-sortablejs": "^6.1.4",
     "react-syntax-highlighter": "^15.4.5",
     "react-uid": "^2.3.2",
     "react-use": "^17.3.2",
@@ -101,6 +102,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "rvfc-polyfill": "^1.0.4",
     "semver": "^7.3.5",
+    "sortablejs": "^1.15.0",
     "styled-components": "^5.3.5",
     "styletron-engine-atomic": "^1.4.8",
     "styletron-react": "^6.0.1",
@@ -195,6 +197,7 @@
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/preview-web": "^6.5.10",
     "@storybook/react": "^6.5.4",
+    "@types/sortablejs": "^1.15.0",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "@typescript-eslint/typescript-estree": "^5.23.0",
@@ -249,4 +252,4 @@
     "framer-motion": "4.1.17",
     "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3"
   }
-}
+}

console/packages/starwhale-core/package.json

@@ -43,6 +43,7 @@
     "history": "4.10.1",
     "klona": "^2.0.5",
     "lodash": "4.17.21",
+    "react-sortablejs": "^6.1.4",
     "rxjs": "^7.5.7",
     "tsc": "^2.0.4",
     "tslib": "2.4.0"
@@ -59,6 +60,7 @@
     "@types/lodash": "4.14.182",
     "@types/react": "17.0.42",
     "@types/react-dom": "17.0.14",
+    "@types/sortablejs": "^1.15.0",
     "@types/systemjs": "^0.20.6",
     "@vitejs/plugin-react": "^2.2.0",
     "esbuild": "0.15.7",

console/packages/starwhale-core/src/events/common.ts

@@ -28,3 +28,11 @@ export class DataHoverClearEvent extends BusEventBase {
 export class DataSelectEvent extends BusEventWithPayload<DataHoverPayload> {
     static type = 'data-select'
 }
+
+export class DragStartEvent extends BusEventBase {
+    static type = 'drag-start'
+}
+
+export class DragEndEvent extends BusEventBase {
+    static type = 'drag-end'
+}

console/packages/starwhale-core/src/store/store.ts

@@ -3,7 +3,6 @@
 import create from 'zustand'
 import { devtools, subscribeWithSelector, persist } from 'zustand/middleware'
 import produce from 'immer'
-import { arrayMove, arrayRemove } from 'react-movable'
 import _ from 'lodash'
 import WidgetFactory, { WidgetType } from '../widget/WidgetFactory'
 import { getTreePath } from '../utils/path'
@@ -42,15 +41,15 @@ export function createCustomStore(initState: Partial<WidgetStoreState> = {}) {
                     ...(initState as any),
                     key: name,
                     time: 0,
-                    onLayoutOrderChange: (paths: any, oldIndex: number, newIndex: number) =>
+                    onLayoutOrderChange: (paths: any, newOrderList: { id: string }[]) =>
                         set(
                             produce((state) => {
                                 const nodes = _.get(get(), paths)
                                 console.log(get(), nodes, paths)
-                                const ordered =
-                                    newIndex === -1
-                                        ? arrayRemove(nodes, oldIndex)
-                                        : arrayMove(nodes, oldIndex, newIndex)
+
+                                const ordered = newOrderList
+                                    .map((item) => nodes.find((v: any) => v?.id === item.id))
+                                    .filter((v: any) => !!v)
                                 _.set(state, paths, ordered)
                             })
                         ),

console/packages/starwhale-core/src/types/index.ts

@@ -76,7 +76,7 @@ export interface WidgetRendererProps<O extends object = any, F extends object =
     fieldConfig: Partial<F>
     onOptionChange?: (options: Partial<O>) => void
     onFieldChange?: (options: Partial<F>) => void
-    onLayoutOrderChange?: (oldIndex: number, newIndex: number) => void
+    onLayoutOrderChange?: (list: any[]) => void
     onLayoutChildrenChange?: (widgets: any, payload: Record<string, any>) => void
     onLayoutCurrentChange?: (widgets: any, payload: Record<string, any>) => void
     eventBus: EventBus

console/packages/starwhale-core/src/utils/replacer.ts

@@ -52,7 +52,6 @@ export const replacer = (matches: Matcher[]) => {
                 const rawValue = _.get(raw, property)
                 if (isDynamicValue(rawValue) && injected?.[injectKey]) {
                     const origin = rawValue.replace(`{{${injectKey}}}`, injected[injectKey])
-                    console.log('toorigin', rawValue, origin)
 
                     data = produce(data, (temp: any) => {
                         _.set(temp, property, origin)

console/packages/starwhale-core/src/widget/WidgetRenderTree.tsx

@@ -1,40 +1,41 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import deepEqual from 'fast-deep-equal'
 import { Subscription } from 'rxjs'
 import { updatePanelSetting } from '@/domain/panel/services/panel'
-import { useParams } from 'react-router'
 import { toaster } from 'baseui/toast'
-import { useJob } from '@/domain/job/hooks/useJob'
 import { useEditorContext } from '../context/EditorContextProvider'
 import withWidgetDynamicProps from './withWidgetDynamicProps'
 import { WidgetRenderer } from './WidgetRenderer'
 import WidgetFormModel from '../form/WidgetFormModel'
 import { useFetchPanelSetting } from '@/domain/panel/hooks/useSettings'
 import { WidgetProps } from '../types'
 import { PanelAddEvent } from '../events'
-import { BusEvent, BusEventType } from '../events/types'
+import { BusEventType } from '../events/types'
 import { PanelEditEvent, PanelSaveEvent, SectionAddEvent } from '../events/app'
-import widget from '../../../starwhale-widgets/src/SectionWidget/index'
 import { PANEL_DYNAMIC_MATCHES, replacer } from '../utils/replacer'
 import _ from 'lodash'
 import produce from 'immer'
 import WidgetFormModal from '../form/WidgetFormModal'
+import { useDeepEffect } from '../../../../src/hooks/useDeepEffects'
 
 export const WrapedWidgetNode = withWidgetDynamicProps(function WidgetNode(props: WidgetProps) {
-    const { childWidgets, path } = props
+    const { childWidgets, path = [] } = props
     return (
         <WidgetRenderer {...props}>
             {childWidgets &&
                 childWidgets.length > 0 &&
-                childWidgets.map(({ children: childChildren, ...childRest }, i) => (
-                    <WrapedWidgetNode
-                        // @ts-ignore
-                        key={[...path, 'children', i]}
-                        path={[...path, 'children', i]}
-                        childWidgets={childChildren}
-                        {...childRest}
-                    />
-                ))}
+                childWidgets.map((node, i) => {
+                    const { children: childChildren, id, ...childRest } = node ?? {}
+                    return (
+                        <WrapedWidgetNode
+                            key={id ?? i}
+                            id={id}
+                            path={[...path, 'children', i]}
+                            childWidgets={childChildren}
+                            {...childRest}
+                        />
+                    )
+                })}
         </WidgetRenderer>
     )
 })
@@ -46,7 +47,7 @@ export function WidgetRenderTree() {
     const tree = store((state) => state.tree, deepEqual)
     // @ts-ignore
     const [editWidget, setEditWidget] = useState<BusEventType>(null)
-    const [isPanelModalOpen, setisPanelModalOpen] = React.useState(true)
+    const [isPanelModalOpen, setisPanelModalOpen] = React.useState(false)
 
     // @ts-ignore
     const handleAddSection = ({ path, type }) => {
@@ -84,21 +85,20 @@ export function WidgetRenderTree() {
     // use  api store
     // @FIXME refactor load/save, now only global inject what about table row inject ?
     const setting = useFetchPanelSetting(projectId, key)
-    useEffect(() => {
+    useDeepEffect(() => {
         // @FIXME make sure dynamicVars to be exists!
         if (setting.data && dynamicVars?.prefix) {
             try {
                 let data = JSON.parse(setting.data)
                 for (let id in data?.widgets) {
                     _.set(data.widgets, id, replacer(PANEL_DYNAMIC_MATCHES).toOrigin(data.widgets[id], dynamicVars))
                 }
-                console.log('origin', data)
                 if (store.getState().time < data?.time) store.setState(data)
             } catch (e) {
                 console.log(e)
             }
         }
-    }, [setting, dynamicVars?.prefix])
+    }, [setting.data, dynamicVars?.prefix])
 
     // subscription
     useEffect(() => {
@@ -162,7 +162,7 @@ export function WidgetRenderTree() {
 
     const form = new WidgetFormModel().initPanelSchema()
 
-    console.log('editWidget', editWidget)
+    console.log('tree', tree)
     return (
         <div>
             {Nodes}

console/packages/starwhale-core/src/widget/withWidgetDynamicProps.tsx

@@ -21,9 +21,9 @@ export default function withWidgetDynamicProps(WrappedWidgetRender: WidgetRender
         // console.log('【model】', model.current.type, model.current.id, model)
 
         const handleLayoutOrderChange = useCallback(
-            (oldIndex, newIndex) => {
+            (newList) => {
                 const paths = ['tree', ...path, 'children']
-                api.onLayoutOrderChange(paths, oldIndex, newIndex)
+                api.onLayoutOrderChange(paths, newList)
             },
             [api]
         )
@@ -38,6 +38,7 @@ export default function withWidgetDynamicProps(WrappedWidgetRender: WidgetRender
             (widget: any, payload: Record<string, any>) => {
                 // @FIXME path utils
                 const paths = ['tree', ...path]
+                console.log(paths, payload)
                 api.onLayoutChildrenChange(paths, getParentPath(paths), widget, payload)
             },
             [api]

console/packages/starwhale-ui/package.json

@@ -41,6 +41,7 @@
     "history": "4.10.1",
     "klona": "^2.0.5",
     "lodash": "4.17.21",
+    "react-sortablejs": "^6.1.4",
     "rxjs": "7.5.6",
     "tsc": "^2.0.4",
     "tslib": "2.4.0"
@@ -57,6 +58,7 @@
     "@types/lodash": "4.14.182",
     "@types/react": "17.0.42",
     "@types/react-dom": "17.0.14",
+    "@types/sortablejs": "^1.15.0",
     "@types/systemjs": "^0.20.6",
     "@vitejs/plugin-react": "^2.2.0",
     "esbuild": "0.15.7",

console/packages/starwhale-ui/src/IconFont/index.tsx

@@ -5,6 +5,7 @@ import './fonts/iconfont.css'
 import projectSvg from './project.svg'
 import settingSvg from './setting.svg'
 import emptySvg from './empty.svg'
+import emptyChart from './empty-chart.svg'
 import searchEmptySvg from './search-empty.svg'
 import googleSvg from './google.svg'
 
@@ -83,6 +84,7 @@ const hijacked = {
     setting2: settingSvg,
     google: googleSvg,
     empty: emptySvg,
+    emptyChart: emptyChart,
     searchEmpty: searchEmptySvg,
 }
 

console/packages/starwhale-widgets/package.json

@@ -43,6 +43,7 @@
     "history": "4.10.1",
     "klona": "^2.0.5",
     "lodash": "4.17.21",
+    "react-sortablejs": "^6.1.4",
     "rxjs": "7.5.6",
     "tslib": "2.4.0"
   },
@@ -58,6 +59,7 @@
     "@types/lodash": "4.14.182",
     "@types/react": "17.0.42",
     "@types/react-dom": "17.0.14",
+    "@types/sortablejs": "^1.15.0",
     "@types/systemjs": "^0.20.6",
     "@vitejs/plugin-react": "^2.2.0",
     "esbuild": "0.15.7",