[Feat] global preferences page

packages/rath-client/package.json

@@ -23,6 +23,7 @@
     "@material-ui/core": "^5.0.0-beta.5",
     "@zip.js/zip.js": "^2.6.60",
     "airtable": "^0.11.4",
+    "ajv": "^8.12.0",
     "ali-react-table": "^2.6.1",
     "buffer": "^6.0.3",
     "dayjs": "^1.11.6",
@@ -57,6 +58,7 @@
     "@testing-library/jest-dom": "^5.11.8",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.0",
+    "@types/ajv": "^1.0.0",
     "@types/crypto-js": "^4.1.0",
     "@types/jest": "^26.0.20",
     "@types/node": "^12.19.12",

packages/rath-client/public/locales/en-US.json

@@ -70,7 +70,9 @@
     },
     "preference": {
         "title": "preference",
-        "config": "Configuration"
+        "config": "Configuration",
+        "ui": "UI",
+        "json": "JSON"
     },
     "support": {
         "title": "How to Get Support",

packages/rath-client/public/locales/zh-CN.json

@@ -68,7 +68,9 @@
     },
     "preference": {
         "title": "个人偏好",
-        "config": "配置"
+        "config": "配置",
+        "ui": "表单",
+        "json": "JSON"
     },
     "support": {
         "title": "如何获取帮助/支持",

packages/rath-client/src/App.tsx

@@ -18,13 +18,16 @@ import Painter from './pages/painter';
 import Collection from './pages/collection';
 import Dashboard from './pages/dashboard';
 import CausalPage from './pages/causal';
+import PreferencePage from './pages/preference';
+import { diffJSON, getItem, getPreferencesSchema, loadPreferences, savePreferences, toJSONValues } from './pages/preference/utils';
 import PerformanceWindow from './components/performance-window';
 import useHotKey from './hooks/use-hotkey';
 
 
 function App() {
     const { langStore, commonStore, userStore } = useGlobalStore();
     const { appKey, navMode } = commonStore;
+    const { userName } = userStore;
 
     useEffect(() => {
         initRathWorker(commonStore.computationEngine);
@@ -45,6 +48,31 @@ function App() {
     useHotKey({
         'Control+Shift+P': () => setShowPerformanceWindow(on => !on),
     });
+
+    useEffect(() => {
+        const { loggedIn } = userStore;
+        const preferences = getPreferencesSchema();
+        loadPreferences().then(preferenceValues => {
+            if (preferenceValues) {
+                try {
+                    const prev = toJSONValues(preferences);
+                    const diff = diffJSON(JSON.parse(prev), preferenceValues);
+                    for (const [key, value] of Object.entries(diff)) {
+                        const item = getItem(preferences, key);
+                        // @ts-expect-error correct
+                        item?.onChange(value);
+                    }
+                } catch {
+                    // do nothing
+                }
+            } else {
+                savePreferences(preferences);
+            }
+        });
+        if (loggedIn && userName) {
+            // TODO: save online
+        }
+    }, [userName, userStore]);
 
     if (!langStore.loaded) {
         return (
@@ -74,6 +102,7 @@ function App() {
                     {appKey === PIVOT_KEYS.collection && <Collection />}
                     {appKey === PIVOT_KEYS.dashboard && <Dashboard />}
                     {appKey === PIVOT_KEYS.causal && <CausalPage />}
+                    {appKey === PIVOT_KEYS.preference && <PreferencePage />}
                     <CrInfo />
                 </div>
             </div>

packages/rath-client/src/components/userSettings.tsx

@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import { ActionButton, IDropdownOption, IconButton } from '@fluentui/react';
 import { observer } from 'mobx-react-lite';
 import { SUPPORT_LANG } from '../locales';
+import { PIVOT_KEYS } from '../constants';
+import useHotKey from '../hooks/use-hotkey';
 import { useGlobalStore } from '../store';
 import DropdownSelect from './dropDownSelect';
 
@@ -20,6 +22,9 @@ const UserSettings: React.FC = () => {
     const target = useRef<HTMLDivElement>(null);
     const { langStore, commonStore } = useGlobalStore();
     const { navMode } = commonStore;
+    useHotKey({
+        'Meta+Shift+P': () => commonStore.setAppKey(PIVOT_KEYS.preference),
+    });
     return (
         <Container
             style={navMode === 'icon' ? { flexDirection: 'column' } : { flexDirection: 'row', alignItems: 'center' }}
@@ -43,8 +48,8 @@ const UserSettings: React.FC = () => {
                 <ActionButton
                     text={commonStore.navMode === 'text' ? intl.get('preference.title') : ''}
                     iconProps={{ iconName: 'PlayerSettings' }}
-                    disabled
-                ></ActionButton>
+                    onClick={() => commonStore.setAppKey(PIVOT_KEYS.preference)}
+                />
             </div>
             <div>
                 <IconButton

packages/rath-client/src/constants.ts

@@ -13,6 +13,7 @@ export const PIVOT_KEYS = {
     collection: 'collection',
     dashboard: 'dashboard',
     causal: 'causal',
+    preference: 'preference',
 } as const;
 
 export const COMPUTATION_ENGINE = {

packages/rath-client/src/pages/preference/JSONEditor.tsx

@@ -0,0 +1,91 @@
+import intl from 'react-intl-universal';
+import { PrimaryButton } from "@fluentui/react";
+import { observer } from "mobx-react-lite";
+import AJV from 'ajv';
+import { useEffect, useRef, useState } from "react";
+import MonacoEditor, { EditorWillMount } from "react-monaco-editor";
+import styled from "styled-components";
+import { PreferencesSchema } from "./types";
+import { diffJSON, getItem, toJSONSchema, toJSONValues } from "./utils";
+
+
+const Container = styled.div`
+    height: 80vh;
+    overflow: auto;
+`;
+
+const Tools = styled.div`
+    margin: 1em 0;
+`;
+
+const JSONEditor = observer<{ schema: PreferencesSchema }>(function JSONEditor ({ schema }) {
+    const JSONSchema = toJSONSchema('Preferences', schema);
+    const editorRef = useRef<Parameters<EditorWillMount>[0]>();
+    const [content, setContent] = useState(toJSONValues(schema));
+    const [modified, setModified] = useState(false);
+
+    useEffect(() => {
+        editorRef.current?.languages.json.jsonDefaults.setDiagnosticsOptions({
+            validate: true,
+            schemas: [{
+                uri: '#', // "http://myserver/foo-schema.json",
+                fileMatch: ['*'],
+                schema: JSONSchema,
+            }],
+            schemaValidation: 'error',
+            allowComments: true,
+        });
+    }, [JSONSchema]);
+
+    const validate = new AJV().compile(JSONSchema);
+
+    const data = (() => {
+        try {
+            const d = JSON.parse(content);
+            const valid = validate(d);
+            return valid ? d : null;
+        } catch (error) {
+            return null;
+        }
+    })();
+
+    return (
+        <Container onKeyDown={e => e.stopPropagation()}>
+            <Tools>
+                <PrimaryButton
+                    text={intl.get('function.confirm')}
+                    disabled={!modified || data === null}
+                    onClick={() => {
+                        if (!data) {
+                            return;
+                        }
+                        const diff = diffJSON(JSON.parse(toJSONValues(schema)), data);
+                        for (const [key, value] of Object.entries(diff)) {
+                            const item = getItem(schema, key);
+                            item?.onChange(value as never);
+                        }
+                        setModified(false);
+                    }}
+                />
+            </Tools>
+            <MonacoEditor
+                language="json"
+                theme="vs"
+                editorWillMount={monaco => {
+                    editorRef.current = monaco;
+                }}
+                editorWillUnmount={() => {
+                    editorRef.current = undefined;
+                }}
+                value={content}
+                onChange={content => {
+                    setModified(true);
+                    setContent(content);
+                }}
+            />
+        </Container>
+    );
+});
+
+
+export default JSONEditor;

packages/rath-client/src/pages/preference/UIEditor.tsx

@@ -0,0 +1,21 @@
+import { memo } from "react";
+import styled from "styled-components";
+import Form from "./form";
+import { PreferencesSchema } from "./types";
+
+
+const Container = styled.div`
+    height: 80vh;
+    overflow: auto;
+`;
+
+const UIEditor = memo<{ schema: PreferencesSchema }>(function UIEditor ({ schema }) {
+    return (
+        <Container onKeyDown={e => e.stopPropagation()}>
+            <Form schema={schema} />
+        </Container>
+    );
+});
+
+
+export default UIEditor;