feat: embed editor

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

@@ -11,6 +11,7 @@
         "filter": "Filter",
         "preview": "Preview",
         "submit": "Submit",
+        "run": "执行",
         "semanticType": {
             "nominal": "nominal",
             "ordinal": "ordinal",
@@ -39,6 +40,11 @@
             "qt_25": "25th Percentile",
             "qt_75": "75th Percentile",
             "qt_50": "Median"
+        },
+        "search": {
+            "searchViews": "Search Views",
+            "searchFields": "Search fields / variables",
+            "notFound": "No results found"
         }
     },
     "menu": {
@@ -354,9 +360,12 @@
             "hint": "Associated Measures refers to keep the dimensions similar, find correlated measures. Associated Dimensions refers to keep the measures similar, find correlated dimensions."
         },
         "bring": "Customize Analysis",
+        "exitEditor": "Exit Editor",
         "commandBar": {
             "painting": "data painter",
             "editing": "edit chart",
+            "editInGW": "Customized Analysis",
+            "editInEditor": "Edit in Editor",
             "associate": "associate views",
             "constraints": "analysis constraints"
         },

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

@@ -11,6 +11,7 @@
         "filter": "筛选",
         "preview": "预览",
         "submit": "提交",
+        "run": "执行",
         "semanticType": {
             "nominal": "类别类型",
             "ordinal": "有序类型",
@@ -39,6 +40,11 @@
             "qt_25": "25%分位数",
             "qt_75": "75%分位数",
             "qt_50": "中位数"
+        },
+        "search": {
+            "searchViews": "搜索视图",
+            "searchFields": "搜索字段/变量",
+            "notFound": "未找到匹配结果"
         }
     },
     "menu": {
@@ -354,9 +360,12 @@
             "hint": "『关联度量』是指探索和当前图表中，度量/指标关联程度更高的图表，这可以帮你研究哪些指标的表现和当前关注的指标相近。『关联维度』是指探索和当前图表中，维度相关度更高的图表，这可以帮助你研究对于当前的度量下，相似维度对度量分布的划分差异。"
         },
         "bring": "自定义分析",
+        "exitEditor": "退出编辑",
         "commandBar": {
             "painting": "数据绘板",
             "editing": "编辑图表",
+            "editInGW": "自助分析",
+            "editInEditor": "在编辑器配置",
             "associate": "联想",
             "constraints": "分析约束"
         },

packages/rath-client/src/components/encodeCreationPill.tsx → packages/rath-client/src/components/fieldPill/encodeCreationPill.tsx

@@ -11,8 +11,8 @@ import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import produce from 'immer';
 import { IFieldEncode } from '@kanaries/loa';
-import { IFieldMeta } from '../interfaces';
-import { AGGREGATION_LIST } from '../global';
+import { IFieldMeta } from '../../interfaces';
+import { AGGREGATION_LIST } from '../../global';
 import BasePillPlaceholder from './basePillPlaceholder';
 
 const Cont = styled.div`

packages/rath-client/src/components/fieldPill/fieldPlaceholder.tsx

@@ -0,0 +1,128 @@
+import { ContextualMenu, IContextualMenuItem, IContextualMenuListProps, IRenderFunction, Icon, SearchBox } from '@fluentui/react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { IFieldMeta } from '../../interfaces';
+
+export const PillPlaceholder = styled.div`
+    color: #000;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    /* border-radius: 10px; */
+    border-style: dashed;
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    cursor: pointer;
+    font-size: 12px;
+    height: 20px;
+    min-width: 150px;
+    padding: 0 10px;
+    user-select: none;
+    margin-right: 4px;
+    display: flex;
+    align-items: center;
+    -webkit-align-items: center;
+    overflow-y: hidden;
+    justify-content: center;
+    .cancel-icon {
+        cursor: pointer;
+    }
+`;
+
+export function fields2options (fields: readonly IFieldMeta[]): IContextualMenuItem[] {
+    return fields.map((f) => ({
+        key: f.fid,
+        text: f.name || f.fid,
+    }))
+}
+
+interface FieldPlaceholderProps {
+    fields: readonly IFieldMeta[];
+    onAdd: (fid: string) => void;
+}
+const FieldPlaceholder: React.FC<FieldPlaceholderProps> = (props) => {
+    const { fields, onAdd } = props;
+    const [showContextualMenu, setShowContextualMenu] = useState<boolean>(false);
+
+    const container = useRef<HTMLDivElement>(null);
+    const [fieldOptions, setFieldOptions] = useState<IContextualMenuItem[]>(fields2options(fields));
+
+    useEffect(() => {
+        setFieldOptions(fields2options(fields));
+    }, [fields])
+
+    const onHideContextualMenu = useCallback(() => {
+        setShowContextualMenu(false);
+    }, []);
+
+    const onChange = React.useCallback((ev?: React.ChangeEvent<HTMLInputElement>, newValue?: string) => {
+        if (typeof ev === 'undefined' || typeof newValue === 'undefined' || newValue === '') {
+            setFieldOptions(fields2options(fields))
+            return;
+        }
+        const filteredItems = fieldOptions.filter(
+          item => item.text && item.text.toLowerCase().indexOf(newValue.toLowerCase()) !== -1,
+        );
+
+        if (!filteredItems || !filteredItems.length) {
+          filteredItems.push({
+            key: 'no_results',
+            onRender: (item, dismissMenu) => (
+              <div key="no_results" >
+                <Icon iconName="SearchIssue" title={intl.get('common.search.notFound')} />
+                <span>No vars found</span>
+              </div>
+            ),
+          });
+        }
+
+        setFieldOptions(filteredItems);
+      }, [fieldOptions, fields]);
+
+    const renderMenuList = React.useCallback(
+        (menuListProps?: IContextualMenuListProps, defaultRender?: IRenderFunction<IContextualMenuListProps>) => {
+            return (
+                <div>
+                    <div style={{ borderBottom: '1px solid #ccc' }}>
+                        <SearchBox
+                            ariaLabel={intl.get('common.search.searchFields')}
+                            placeholder={intl.get('common.search.searchFields')}
+                            onChange={onChange}
+                            onAbort={() => {
+                                setFieldOptions(fields2options(fields))
+                            }}
+                        />
+                    </div>
+                    {defaultRender && defaultRender(menuListProps)}
+                </div>
+            );
+        },
+        [onChange, fields]
+    );
+    return (
+        <PillPlaceholder
+            ref={container}
+            onClick={(e) => {
+                e.stopPropagation();
+                setShowContextualMenu(true);
+            }}
+        >
+            + {intl.get('common.addVar')}
+            <ContextualMenu
+                items={fieldOptions}
+                onRenderMenuList={renderMenuList}
+                hidden={!showContextualMenu}
+                target={container}
+                onItemClick={(ev, item) => {
+                    item && onAdd(item.key);
+                    onHideContextualMenu();
+                }}
+                onDismiss={onHideContextualMenu}
+            />
+        </PillPlaceholder>
+    );
+};
+
+export default FieldPlaceholder;

packages/rath-client/src/components/filterCreationPill.tsx → packages/rath-client/src/components/fieldPill/filterCreationPill.tsx

@@ -14,10 +14,10 @@ import styled from 'styled-components';
 import intl from 'react-intl-universal';
 import produce from 'immer';
 import { IFilter } from '@kanaries/loa';
-import { IFieldMeta } from '../interfaces';
+import { IFieldMeta } from '../../interfaces';
+import SetSelection from '../fieldFilter/setSelection';
+import RangeSelection from '../fieldFilter/rangeSelection';
 import BasePillPlaceholder from './basePillPlaceholder';
-import SetSelection from './fieldFilter/setSelection';
-import RangeSelection from './fieldFilter/rangeSelection';
 
 function getFieldRange(field: IFieldMeta): [number, number] {
     let _min = field.features.min || 0;

packages/rath-client/src/interfaces.ts

@@ -198,8 +198,14 @@ export interface IVegaSubset {
     }
 }
 
+export enum IVisSpecType {
+    vegaSubset = 'vegaSubset',
+    vegaLite = 'vegaLite',
+    vega = 'vega'
+}
 export interface IInsightVizView {
     viewId: string;
+    specType: IVisSpecType;
     spec: IVegaSubset;
     fields: IFieldMeta[];
     filters: IFilter[];
@@ -258,4 +264,6 @@ export interface IRawFeatures {
     unique: number;
     missing: number;
     mismatch: number;
-}
+}
+
+export type ISpecSourceType = 'default' | 'custom';

packages/rath-client/src/pages/causal/datasetPanel.tsx

@@ -13,7 +13,7 @@ import { FC, useCallback, useMemo, useRef } from 'react';
 import produce from 'immer';
 import intl from 'react-intl-universal'
 import { useGlobalStore } from '../../store';
-import FilterCreationPill from '../../components/filterCreationPill';
+import FilterCreationPill from '../../components/fieldPill/filterCreationPill';
 import LaTiaoConsole from '../../components/latiaoConsole/index';
 import type { IFieldMeta } from '../../interfaces';
 import { FilterCell } from './filters';

packages/rath-client/src/pages/causal/exploration/autoVis/index.tsx

@@ -6,7 +6,7 @@ import { NodeSelectionMode, useCausalViewContext } from "../../../../store/causa
 import { useGlobalStore } from "../../../../store";
 import { IFieldMeta } from "../../../../interfaces";
 import ViewField from "../../../megaAutomation/vizOperation/viewField";
-import FieldPlaceholder from "../../../../components/fieldPlaceholder";
+import FieldPlaceholder from "../../../../components/fieldPill/fieldPlaceholder";
 import MetaList from "./metaList";
 import Vis from "./vis";
 import NeighborList from "./neighborList";

packages/rath-client/src/pages/dashboard/dashboard-detail.tsx

@@ -4,7 +4,6 @@ import { FC, useCallback, useState } from 'react';
 import styled from 'styled-components';
 import DashboardDraft from './dashboard-draft';
 
-
 const PageLayout = styled.div`
     flex-grow: 1;
     flex-shrink: 1;
@@ -70,13 +69,13 @@ const DashboardDetail: FC<DashboardDetailProps> = ({ cursor, goBack, ratio, samp
                 <ActionButton iconProps={{ iconName: mode === 'edit' ? 'AnalyticsView' : 'Edit' }} onClick={toggleMode} />
                 <Slider
                     label="Resize"
-                    min={Math.min(...Object.keys(viewScales).map(d => parseInt(d, 10)))}
-                    max={Math.max(...Object.keys(viewScales).map(d => parseInt(d, 10)))}
+                    min={Math.min(...Object.keys(viewScales).map((d) => parseInt(d, 10)))}
+                    max={Math.max(...Object.keys(viewScales).map((d) => parseInt(d, 10)))}
                     showValue
                     value={scaleIdx}
-                    onChange={idx => setScaleIdx(idx)}
+                    onChange={(idx) => setScaleIdx(idx)}
                     originFromZero
-                    valueFormat={val => `${viewScales[val as keyof typeof viewScales] ?? 1}`}
+                    valueFormat={(val) => `${viewScales[val as keyof typeof viewScales] ?? 1}`}
                     styles={{
                         root: {
                             display: 'inline-flex',