feat(console): add model viewer

console/.eslintignore

@@ -3,4 +3,5 @@ dist/
 node_modules/
 *.min.js
 BaseTable/
-stories/
+stories/
+packages/starwhale-ui/src/base/

console/.eslintrc.js

@@ -113,6 +113,7 @@ module.exports = {
         // @FIXME check
         'import/no-extraneous-dependencies': 'off',
         'import/no-restricted-imports': 'off',
+        'no-restricted-imports': 'off',
     },
     settings: {
         'react': {
@@ -133,5 +134,5 @@ module.exports = {
             },
         },
     ],
-    ignorePatterns: ['.eslintrc.js', 'craco.config.js', '__generated__'],
+    ignorePatterns: ['.eslintrc.js', 'craco.config.js', '__generated__', 'vite.config.ts'],
 }

console/package.json

@@ -123,8 +123,8 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit -p ./tsconfig.json",
-    "lint": "eslint -c .eslintrc.js './src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint --fix -c .eslintrc.js './src/**/*.{ts,tsx}'",
+    "lint": "eslint -c .eslintrc.js './{src,packages}/**/*.{ts,tsx}'",
+    "lint:fix": "eslint --fix -c .eslintrc.js './{src,packages}/**/*.{ts,tsx}'",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "start": "vite --host 0.0.0.0",
@@ -252,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/src/datastore/filter.ts

@@ -75,7 +75,7 @@ export class ColumnFilterModel {
             }
         ]
      */
-    addQuery(
+    static getQuery(
         columnName: string,
         value: string,
         operator: OPERATOR,
@@ -103,8 +103,8 @@ export class ColumnFilterModel {
             default:
                 break
         }
-        let operands = [{ columnName }]
-        if (!queryType) return
+        const operands = [{ columnName }]
+        if (!queryType) return undefined
         operands.push({ [queryType]: value } as any)
 
         return {
@@ -121,7 +121,7 @@ export class ColumnFilterModel {
             .filter((item: any) => item?.value && item?.op && item?.property)
             .map((item: any) => {
                 const field = fields.find((f) => f.name === item.property) as any
-                return this.addQuery(field?.name, item.value, item.op, field?.type as DataTypes)
+                return ColumnFilterModel.getQuery(field?.name, item.value, item.op, field?.type as DataTypes)
             })
         if (filters.length === 1) return filters[0]?.filter
 

console/packages/starwhale-core/src/form/WidgetForm.tsx

@@ -14,8 +14,13 @@ function WidgetForm({ formData, onChange, onSubmit, form }: any, ref: any) {
             validator={validator}
             onSubmit={onSubmit}
             // @ts-ignore
-            ref={(form) => (ref.current = form)}
-            onChange={(e) => onChange?.(e.formData)}
+            ref={(f) => {
+                // eslint-disable-next-line no-param-reassign
+                ref.current = f
+            }}
+            onChange={(e) => {
+                onChange?.(e.formData)
+            }}
         />
     )
 }

console/packages/starwhale-core/src/form/WidgetFormModel.ts

@@ -84,7 +84,7 @@ class WidgetFormModel implements WidgetFieldConfig {
         const { schema, uiSchema = {} } = this.widget?.config?.fieldConfig ?? {}
         Object.keys(uiSchema).forEach((property) => {
             if (uiSchema[property]?.[UI_DATA_KEY] === UI_DATA.DataTableColumns) {
-                this.addField(dataTableColumnsField(property, columnTypes, schema, uiSchema))
+                this.addField(dataTableColumnsField(property, columnTypes, schema))
             }
         })
         return this

console/packages/starwhale-core/src/form/schemas/fields.ts

@@ -1,8 +1,9 @@
-import { RJSFSchema, UiSchema } from '@rjsf/utils'
+import { RJSFSchema } from '@rjsf/utils'
 import { ColumnSchemaDesc } from '@starwhale/core/datastore'
 import { WidgetFactory } from '@starwhale/core/widget'
 
 export const UI_DATA_KEY = 'ui:data'
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export enum UI_DATA {
     DataTableColumns = 'DataTableColumns',
 }
@@ -24,7 +25,7 @@ export const chartTypeField = (): RJSFSchema | undefined => {
     }
 }
 
-export const tableNameField = (tables: any, schema?: RJSFSchema, uiSchema?: UiSchema): RJSFSchema | undefined => {
+export const tableNameField = (tables: any, schema?: RJSFSchema): RJSFSchema | undefined => {
     if (!tables || tables.length === 0) return undefined
     const { type } = schema?.tableName ?? {}
 
@@ -68,8 +69,7 @@ export const chartTitleField = (): RJSFSchema | undefined => ({
 export const dataTableColumnsField = (
     property: string,
     columnTypes: ColumnSchemaDesc[],
-    schema?: RJSFSchema,
-    uiSchema?: UiSchema
+    schema?: RJSFSchema
 ): RJSFSchema | undefined => {
     if (!columnTypes || columnTypes.length === 0) return undefined
 

console/packages/starwhale-core/src/utils/path.tsx

@@ -8,7 +8,7 @@ export function getTreePath(state: any, id: string) {
     }
 
     function walk(nodes: WidgetTreeNode[], paths: any) {
-        return nodes.map((node: WidgetTreeNode, i) => {
+        nodes.forEach((node: WidgetTreeNode, i) => {
             const currPaths = []
             if (node.id === id) {
                 rtn = {

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

@@ -2,7 +2,7 @@ import { useLayoutEffect, useMemo, useRef } from 'react'
 
 type Fn<ARGS extends any[], R> = (...args: ARGS) => R
 
-const useEventCallback = <A extends any[], R>(fn: Fn<A, R>): Fn<A, R> => {
+export const useEventCallback = <A extends any[], R>(fn: Fn<A, R>): Fn<A, R> => {
     const ref = useRef<Fn<A, R>>(fn)
     useLayoutEffect(() => {
         ref.current = fn

console/packages/starwhale-core/src/utils/useForceUpdate.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
 export default function useForceUpdate() {
-    const [_, setValue] = useState(0)
+    const [, setValue] = useState(0)
     return () => setValue((prevState) => prevState + 1)
 }

console/packages/starwhale-core/src/widget/WidgetModel.ts

@@ -51,10 +51,9 @@ class WidgetModel implements WidgetConfig {
         if (!id) {
             this.generateId()
         }
-        // @FIXME check properties
-        for (const key in properties) {
+        Object.keys(properties).forEach((key) => {
             ;(this as any)[key] = properties[key]
-        }
+        })
     }
 
     setDynamicVars(globalDynamicVars: any) {
@@ -106,9 +105,9 @@ class WidgetModel implements WidgetConfig {
 
     getPersistProperty(): WidgetConfig {
         const properties = {} as WidgetConfig
-        for (const key in PersistProperty) {
+        Object.keys(PersistProperty).forEach((key) => {
             ;(properties as any)[key] = (this as any)[key]
-        }
+        })
         return properties
     }
 

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

@@ -1,4 +1,4 @@
-import React from 'react'
+// eslint-disable-next-line max-classes-per-file
 import { WidgetComponent, WidgetConfig, WidgetFieldConfig, WidgetMeta } from '../types'
 
 export type WidgetState = Record<string, unknown>

console/packages/starwhale-ui/.eslintrc

@@ -1,5 +1,4 @@
 {
   "rules": {
-    "no-restricted-imports": ["error", { "patterns": ["@grafana/runtime", "@grafana/data/*", "@grafana/ui/*", "@grafana/e2e/*"] }]
   }
 }

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3410006 */
-  src: url('iconfont.woff2?t=1667979623500') format('woff2'),
-       url('iconfont.woff?t=1667979623500') format('woff'),
-       url('iconfont.ttf?t=1667979623500') format('truetype');
+  src: url('iconfont.woff2?t=1671173216154') format('woff2'),
+       url('iconfont.woff?t=1671173216154') format('woff'),
+       url('iconfont.ttf?t=1671173216154') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-file2:before {
+  content: "\e657";
+}
+
 .icon-a-Addabove:before {
   content: "\e654";
 }

console/packages/starwhale-ui/src/IconFont/fonts/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "33295022",
+      "name": "file2",
+      "font_class": "file2",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
     {
       "icon_id": "32592454",
       "name": "Add above",

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

@@ -8,6 +8,7 @@ import emptySvg from './empty.svg'
 import emptyChart from './empty-chart.svg'
 import searchEmptySvg from './search-empty.svg'
 import googleSvg from './google.svg'
+import invalidFile from './invalid-file.svg'
 
 const iconTypes = [
     'arrow2_down',
@@ -70,6 +71,8 @@ const iconTypes = [
     'a-Addabove',
     'a-Addbelow',
     'arrow2',
+    'file',
+    'file2',
 ]
 
 interface IIconFontProps {
@@ -86,6 +89,7 @@ const hijacked = {
     empty: emptySvg,
     emptyChart,
     searchEmpty: searchEmptySvg,
+    invalidFile,
 }
 
 export default function IconFont({ size = 14, type = 'user', kind = 'inherit', style = {} }: IIconFontProps) {