dotdata_widgets 0.1.10 → 0.2.0

package/lib/feature-descriptor/feature-descriptor-editor/AggregationEditor.js

@@ -1,113 +1,210 @@
+"use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-define(["require", "exports", "react", "@models/feature-descriptor", "./components"], function (require, exports, react_1, feature_descriptor_1, components_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.AggregationEditor = void 0;
-    react_1 = __importDefault(react_1);
-    const AggregationEditorTemplate = {
-        [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeCountRecords]: components_1.TemporalChangeCountEditor,
-        [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeMax]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeMean]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeMin]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeSum]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeCountRecords]: components_1.TemporalChangeCountEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeMax]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeMean]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeMin]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeSum]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioCountRecords]: components_1.TemporalChangeCountEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioMax]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioMean]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioMin]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioSum]: components_1.TemporalChangeEditor,
-        [feature_descriptor_1.Aggregation.Type.AsIs]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.C3]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "source_time_field", options: props.fields }),
-            react_1.default.createElement(components_1.StringSelectionField, { field: "source_field", options: props.fields }),
-            react_1.default.createElement(components_1.NumberField, { field: "lag" }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.CWT]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "source_time_field", options: props.fields }),
-            react_1.default.createElement(components_1.StringSelectionField, { field: "source_field", options: props.fields }),
-            react_1.default.createElement(components_1.NumberField, { field: "index" }),
-            react_1.default.createElement(components_1.NumberField, { field: "width" }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.ClosestTimeDifference]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "source_field", options: props.fields }),
-            react_1.default.createElement(components_1.StringSelectionField, { field: "target_field", options: props.fields }),
-            react_1.default.createElement(components_1.StringField, { field: "shift" }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.Count]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "field", options: props.fields }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.CountRecords]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "table", options: props.tables }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.CountUnique]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.DayOfWeek]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.Distance]: components_1.DistanceEditor,
-        [feature_descriptor_1.Aggregation.Type.StdDistance]: components_1.DistanceEditor,
-        [feature_descriptor_1.Aggregation.Type.SumDistance]: components_1.DistanceEditor,
-        [feature_descriptor_1.Aggregation.Type.Exist]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "table", options: props.tables }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.NullRatio]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "field", options: props.fields }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.RatioOfValue]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "field", options: props.fields }),
-            react_1.default.createElement(components_1.NumberField, { field: "ratio_value" }),
-            // TODO null_inclusion boolean
-        ],
-        [feature_descriptor_1.Aggregation.Type.Std]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "field", options: props.fields }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.SourceTimeDifference]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column1", options: props.columns }),
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column2", options: props.columns }),
-            react_1.default.createElement(components_1.StringField, { field: "unit" }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.StdSourceTimeDifference]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column1", options: props.columns }),
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column2", options: props.columns }),
-            react_1.default.createElement(components_1.StringField, { field: "unit" }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.Sum]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-        ],
-        [feature_descriptor_1.Aggregation.Type.TargetMeanEncode]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "field", options: props.fields }),
-            react_1.default.createElement(components_1.NumberField, { field: "encoder_id" }),
-        ],
-    };
-    const AggregationEditor = ({ aggregation }) => {
-        var _a, _b;
-        const [tmpAggregation, setTmpAggregation] = react_1.default.useState(() => aggregation);
-        console.log('sss', AggregationEditorTemplate[tmpAggregation.type]);
-        const template = (_b = (_a = AggregationEditorTemplate[tmpAggregation.type]) === null || _a === void 0 ? void 0 : _a.call(AggregationEditorTemplate, {
-            columns: ['aaaa', 'ddddd', ' d3d3d', 'table-name'],
-            fields: ['aaaa', 'ddddd', ' d3d3d', 'table-name'],
-            tables: ['aaaa', 'ddddd', ' d3d3d', 'table-name'],
-        })) !== null && _b !== void 0 ? _b : [];
-        console.log(tmpAggregation);
-        return (react_1.default.createElement(components_1.FdEditorOperationContext.Provider, { value: [tmpAggregation, x => setTmpAggregation(x)] },
-            react_1.default.createElement("div", { style: {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    flexWrap: 'wrap',
-                    gap: '5px 16px',
-                } },
-                react_1.default.createElement(components_1.AggregationTypeSelector, { selectedType: tmpAggregation.type, onTypeChange: type => setTmpAggregation({ type }) }),
-                template.map((fieldWidget) => fieldWidget))));
-    };
-    exports.AggregationEditor = AggregationEditor;
-});
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AggregationEditor = void 0;
+const react_1 = __importDefault(require("react"));
+const feature_descriptor_1 = require("../../models/feature-descriptor");
+const components_1 = require("./components");
+const context_1 = require("./context");
+const AggregationEditorTemplate = {
+    [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeCountRecords]: components_1.TemporalChangeCountEditor,
+    [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeMax]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeMean]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeMin]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.AbsoluteTemporalChangeSum]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.AnyBetween]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.lower_edge" }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.upper_edge" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.AnyValue]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.value" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.AsIs]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.column", tableColumns: props.tableColumns }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.C3]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.source_time_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.source_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.lag" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.CWT]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.source_time_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.source_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.index" }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.width" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.ClosestTimeDifference]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.source_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.target_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.shift" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.Count]: props => [
+        react_1.default.createElement(components_1.TableInlineField, { field: "aggregation.field", tables: Object.keys(props.tableColumns) }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.CountBetween]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.lower_edge" }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.upper_edge" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.CountOfValue]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.value" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.CountRecords]: props => [
+        react_1.default.createElement(components_1.TableInlineField, { field: "aggregation.table", tables: Object.keys(props.tableColumns) }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.CountUnique]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.DayOfWeek]: props => {
+        return [
+            react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.column", tableColumns: props.tableColumns }),
+        ];
+    },
+    [feature_descriptor_1.Aggregation.Type.Distance]: components_1.DistanceEditor,
+    [feature_descriptor_1.Aggregation.Type.Exist]: props => [
+        react_1.default.createElement(components_1.TableInlineField, { field: "aggregation.table", tables: Object.keys(props.tableColumns) }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.GridTargetMeanEncode]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.latitude_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.longitude_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.encoder_id" }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.distance" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.HistogramEqualityRatio]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.value" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.Hour]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.LatestKMax]: components_1.LastKEditor,
+    [feature_descriptor_1.Aggregation.Type.LatestKMaxMinusMin]: components_1.LastKEditor,
+    [feature_descriptor_1.Aggregation.Type.LatestKMean]: components_1.LastKEditor,
+    [feature_descriptor_1.Aggregation.Type.LatestKMin]: components_1.LastKEditor,
+    [feature_descriptor_1.Aggregation.Type.LatestKStd]: components_1.LastKEditor,
+    [feature_descriptor_1.Aggregation.Type.LatestKSum]: components_1.LastKEditor,
+    [feature_descriptor_1.Aggregation.Type.LatestTimeDifference]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.target_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.source_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.shift" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.Max]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.MaxDistance]: components_1.DistanceEditor,
+    [feature_descriptor_1.Aggregation.Type.MaxInterval]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.Mean]: (0, components_1.ColumnEditor)('field'),
+    [feature_descriptor_1.Aggregation.Type.MeanDistance]: components_1.DistanceEditor,
+    [feature_descriptor_1.Aggregation.Type.MeanInterval]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.MeanTimeDifference]: props => {
+        return [
+            react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.column1", tableColumns: props.tableColumns }),
+            react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.column2", tableColumns: props.tableColumns }),
+            react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.unit" }),
+        ];
+    },
+    [feature_descriptor_1.Aggregation.Type.Min]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.MinDistance]: components_1.DistanceEditor,
+    [feature_descriptor_1.Aggregation.Type.MinInterval]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.Month]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.N1RedundantMean]: (0, components_1.ColumnEditor)('field'),
+    [feature_descriptor_1.Aggregation.Type.N1RedundantNullRatio]: (0, components_1.ColumnEditor)('field'),
+    [feature_descriptor_1.Aggregation.Type.N1RedundantRatioOfValue]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.ratio_value" }),
+        react_1.default.createElement(components_1.BooleanInlineField, { field: "aggregation.null_inclusion" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.N1RedundantSum]: (0, components_1.ColumnEditor)('field'),
+    [feature_descriptor_1.Aggregation.Type.N1RedundantTopicWeightMean]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.text_topic_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.original_text_column_name", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.ratio_value" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.N1RedundantTopicWeightSum]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.text_topic_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.original_text_column_name", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.ratio_value" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.NgramCount]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.ChipInlineField, { field: "aggregation.ngram" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.NonBusinessDays]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.NullRatio]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.RatioBetween]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.lower_edge" }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.upper_edge" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.RatioOfValue]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.ratio_value" }),
+        react_1.default.createElement(components_1.BooleanInlineField, { field: "aggregation.null_inclusion" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.Std]: (0, components_1.ColumnEditor)('field'),
+    [feature_descriptor_1.Aggregation.Type.StdDistance]: components_1.DistanceEditor,
+    [feature_descriptor_1.Aggregation.Type.StdInterval]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.SumDistance]: components_1.DistanceEditor,
+    [feature_descriptor_1.Aggregation.Type.StdTimeDifference]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.column1", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.column2", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.unit" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.Sum]: (0, components_1.ColumnEditor)(),
+    [feature_descriptor_1.Aggregation.Type.SumDistance]: components_1.DistanceEditor,
+    [feature_descriptor_1.Aggregation.Type.TargetMeanEncode]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "aggregation.encoder_id" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.TargetTimeDifference]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.source_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.target_field", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.shift" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeCountRecords]: components_1.TemporalChangeCountEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeMax]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeMean]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeMin]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeSum]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioCountRecords]: components_1.TemporalChangeCountEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioMax]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioMean]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioMin]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.TemporalChangeRatioSum]: components_1.TemporalChangeEditor,
+    [feature_descriptor_1.Aggregation.Type.TimeDifference]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.column1", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "aggregation.column2", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "aggregation.unit" }),
+    ],
+    [feature_descriptor_1.Aggregation.Type.TopicWeightMax]: components_1.TopicEditor,
+    [feature_descriptor_1.Aggregation.Type.TopicWeightMean]: components_1.TopicEditor,
+    [feature_descriptor_1.Aggregation.Type.TopicWeightMin]: components_1.TopicEditor,
+    [feature_descriptor_1.Aggregation.Type.TopicWeightSum]: components_1.TopicEditor,
+    [feature_descriptor_1.Aggregation.Type.TopicWeightValue]: components_1.TopicEditor,
+};
+const AggregationEditor = ({ tableColumns }) => {
+    var _a;
+    const [state, dispatch] = (0, context_1.useFeatureDescriptorEditorContext)();
+    const aggregationDraft = state.aggregation;
+    const [isSummaryVisible, setIsSummaryVisible] = react_1.default.useState(true);
+    const templates = aggregationDraft.type
+        ? (_a = AggregationEditorTemplate[aggregationDraft.type]) === null || _a === void 0 ? void 0 : _a.call(AggregationEditorTemplate, {
+            tableColumns,
+        })
+        : [];
+    return (react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        react_1.default.createElement("div", { style: { display: 'inline-flex', height: '26px', alignItems: 'center' } }, isSummaryVisible ? (react_1.default.createElement("span", { className: "inline-displayed-value", onClick: () => setIsSummaryVisible(false) }, aggregationDraft.type)) : (react_1.default.createElement("span", { style: { width: '300px', marginTop: '6px' } },
+            react_1.default.createElement(components_1.AggregationTypeSelector, { onBlur: () => {
+                    setIsSummaryVisible(true);
+                }, selectedType: state.aggregation.type, onTypeChange: aggregationType => {
+                    dispatch(context_1.FeatureDescriptorEditorActions.Aggregation.setType({
+                        aggregationType,
+                    }));
+                } })))),
+        "(",
+        react_1.default.createElement(components_1.EditorTemplateRenderer, { templates: templates }),
+        ")"));
+};
+exports.AggregationEditor = AggregationEditor;
 //# sourceMappingURL=AggregationEditor.js.map

package/lib/feature-descriptor/feature-descriptor-editor/FeatureDescriptorEditor.js

@@ -1,25 +1,36 @@
+"use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-define(["require", "exports", "react", "@models/feature-descriptor", "./AggregationEditor", "./FilterEditor"], function (require, exports, react_1, feature_descriptor_1, AggregationEditor_1, FilterEditor_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.FeatureDescriptorEditor = void 0;
-    react_1 = __importDefault(react_1);
-    const FeatureDescriptorEditor = () => {
-        const aggregation = {
-            type: feature_descriptor_1.Aggregation.Type.CountRecords,
-            table: 'table-name',
-        };
-        const filter = {
-            type: feature_descriptor_1.Filter.Type.FullPass,
-        };
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("p", null, "Aggregation:"),
-            react_1.default.createElement(AggregationEditor_1.AggregationEditor, { aggregation: aggregation }),
-            react_1.default.createElement("p", null, "Filter:"),
-            react_1.default.createElement(FilterEditor_1.FilterEditor, { filter: filter })));
-    };
-    exports.FeatureDescriptorEditor = FeatureDescriptorEditor;
-});
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureDescriptorEditor = void 0;
+const react_1 = __importDefault(require("react"));
+const AggregationEditor_1 = require("./AggregationEditor");
+const FilterEditor_1 = require("./FilterEditor");
+const JoinEditor_1 = require("./JoinEditor");
+const FeatureOperationEditorWrapper = (props) => {
+    return (react_1.default.createElement("div", { style: { display: 'flex' } },
+        react_1.default.createElement("span", { style: {
+                width: '110px',
+                marginRight: '5px',
+                lineHeight: '26px',
+                display: 'flex',
+                justifyContent: 'space-between',
+            } },
+            react_1.default.createElement("span", { style: { marginLeft: '20px' } }, props.label),
+            react_1.default.createElement("span", { className: "equal-sign" }, "=")),
+        props.children));
+};
+const FeatureDescriptorEditor = (props) => {
+    return (react_1.default.createElement("div", { className: "feature-descriptor-editor" },
+        "FeatureDescriptor(",
+        react_1.default.createElement(FeatureOperationEditorWrapper, { label: "join" },
+            react_1.default.createElement(JoinEditor_1.JoinEditor, { tableColumns: props.tableColumns })),
+        react_1.default.createElement(FeatureOperationEditorWrapper, { label: "filter" },
+            react_1.default.createElement(FilterEditor_1.FilterEditor, { tableColumns: props.tableColumns })),
+        react_1.default.createElement(FeatureOperationEditorWrapper, { label: "aggregation" },
+            react_1.default.createElement(AggregationEditor_1.AggregationEditor, { tableColumns: props.tableColumns })),
+        ")"));
+};
+exports.FeatureDescriptorEditor = FeatureDescriptorEditor;
 //# sourceMappingURL=FeatureDescriptorEditor.js.map

package/lib/feature-descriptor/feature-descriptor-editor/FilterEditor.js

@@ -1,65 +1,73 @@
+"use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-define(["require", "exports", "react", "@models/feature-descriptor", "./components"], function (require, exports, react_1, feature_descriptor_1, components_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.FilterEditor = void 0;
-    react_1 = __importDefault(react_1);
-    const FilterEditorTemplate = {
-        [feature_descriptor_1.Filter.Type.AboveValue]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-            react_1.default.createElement(components_1.NumberField, { field: "min_inclusive" }),
-        ],
-        [feature_descriptor_1.Filter.Type.BelowValue]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-            react_1.default.createElement(components_1.NumberField, { field: "max_exclusive" }),
-        ],
-        [feature_descriptor_1.Filter.Type.FullPass]: () => [],
-        [feature_descriptor_1.Filter.Type.NgramFilter]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-            // TODO string[]
-            // <StringField field="ngram" />,
-        ],
-        [feature_descriptor_1.Filter.Type.RangeOfValues]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-            react_1.default.createElement(components_1.NumberField, { field: "max_exclusive" }),
-            react_1.default.createElement(components_1.NumberField, { field: "min_inclusive" }),
-        ],
-        [feature_descriptor_1.Filter.Type.HourOfDay]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-            react_1.default.createElement(components_1.NumberField, { field: "min_hour_inclusive" }),
-            react_1.default.createElement(components_1.NumberField, { field: "max_hour_exclusive" }),
-        ],
-        [feature_descriptor_1.Filter.Type.Value]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-            react_1.default.createElement(components_1.StringField, { field: "value" }),
-        ],
-        [feature_descriptor_1.Filter.Type.Weekday]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-        ],
-        [feature_descriptor_1.Filter.Type.Weekend]: (props) => [
-            react_1.default.createElement(components_1.StringSelectionField, { field: "column", options: props.columns }),
-        ],
-    };
-    /*  prettier-ignore-end */
-    const FilterEditor = ({ filter }) => {
-        var _a, _b;
-        const [tmpFilter, setTmpFilter] = react_1.default.useState(() => filter);
-        const template = (_b = (_a = FilterEditorTemplate[tmpFilter.type]) === null || _a === void 0 ? void 0 : _a.call(FilterEditorTemplate, {
-            columns: ['aaaa', 'ddddd', ' d3d3d', 'table-name'],
-        })) !== null && _b !== void 0 ? _b : [];
-        console.log(tmpFilter);
-        return (react_1.default.createElement(components_1.FdEditorOperationContext.Provider, { value: [tmpFilter, x => setTmpFilter(x)] },
-            react_1.default.createElement("div", { style: {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    flexWrap: 'wrap',
-                    gap: '5px 16px',
-                } },
-                react_1.default.createElement(components_1.FilterTypeSelector, { selectedType: tmpFilter.type, onTypeChange: type => setTmpFilter({ type }) }),
-                template.map((fieldWidget) => fieldWidget))));
-    };
-    exports.FilterEditor = FilterEditor;
-});
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterEditor = void 0;
+const react_1 = __importDefault(require("react"));
+const feature_descriptor_1 = require("../../models/feature-descriptor");
+const context_1 = require("./context");
+const components_1 = require("./components");
+const FilterEditorTemplate = {
+    [feature_descriptor_1.Filter.Type.Above]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "filter.column", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { key: Math.random(), field: "filter.min_inclusive" }),
+    ],
+    [feature_descriptor_1.Filter.Type.Below]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "filter.column", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "filter.max_exclusive" }),
+    ],
+    [feature_descriptor_1.Filter.Type.Between]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "filter.column", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "filter.min_inclusive" }),
+        react_1.default.createElement(components_1.NumberInlineField, { field: "filter.max_exclusive" }),
+    ],
+    [feature_descriptor_1.Filter.Type.FullPass]: () => [],
+    [feature_descriptor_1.Filter.Type.HourOfDay]: props => {
+        return [
+            react_1.default.createElement(components_1.TableColumnInlineField, { field: "filter.column", tableColumns: props.tableColumns }),
+            react_1.default.createElement(components_1.NumberInlineField, { field: "filter.min_hour_inclusive" }),
+            react_1.default.createElement(components_1.NumberInlineField, { field: "filter.max_hour_exclusive" }),
+        ];
+    },
+    [feature_descriptor_1.Filter.Type.NgramFilter]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "filter.column", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.ChipInlineField, { field: "filter.ngram" }),
+    ],
+    [feature_descriptor_1.Filter.Type.Value]: props => [
+        react_1.default.createElement(components_1.TableColumnInlineField, { field: "filter.column", tableColumns: props.tableColumns }),
+        react_1.default.createElement(components_1.StringInlineField, { field: "filter.value" }),
+    ],
+    [feature_descriptor_1.Filter.Type.Weekday]: props => {
+        return [
+            react_1.default.createElement(components_1.TableColumnInlineField, { field: "filter.column", tableColumns: props.tableColumns }),
+        ];
+    },
+    [feature_descriptor_1.Filter.Type.Weekend]: props => {
+        return [
+            react_1.default.createElement(components_1.TableColumnInlineField, { field: "filter.column", tableColumns: props.tableColumns }),
+        ];
+    },
+};
+const FilterEditor = ({ tableColumns }) => {
+    var _a, _b, _c;
+    const [state, dispatch] = (0, context_1.useFeatureDescriptorEditorContext)();
+    const filterDraft = state.filter;
+    const [isSummaryVisible, setIsSummaryVisible] = react_1.default.useState(true);
+    const templates = (_c = (_b = ((filterDraft === null || filterDraft === void 0 ? void 0 : filterDraft.type) &&
+        ((_a = FilterEditorTemplate[filterDraft.type]) === null || _a === void 0 ? void 0 : _a.call(FilterEditorTemplate, {
+            tableColumns,
+        })))) !== null && _b !== void 0 ? _b : []) !== null && _c !== void 0 ? _c : [];
+    return (react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        react_1.default.createElement("div", { style: { display: 'inline-flex', height: '26px', alignItems: 'center' } }, isSummaryVisible ? (react_1.default.createElement("span", { className: "inline-displayed-value", onClick: () => setIsSummaryVisible(false) }, filterDraft.type)) : (react_1.default.createElement("span", { style: { width: '130px', marginTop: '6px' } },
+            react_1.default.createElement(components_1.FilterTypeSelector, { onBlur: () => {
+                    setIsSummaryVisible(true);
+                }, selectedType: filterDraft.type, onTypeChange: filterType => {
+                    dispatch(context_1.FeatureDescriptorEditorActions.Filter.setType({ filterType }));
+                } })))),
+        "(",
+        react_1.default.createElement(components_1.EditorTemplateRenderer, { templates: templates }),
+        ")"));
+};
+exports.FilterEditor = FilterEditor;
 //# sourceMappingURL=FilterEditor.js.map

package/lib/feature-descriptor/feature-descriptor-editor/JoinEditor.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JoinEditor = void 0;
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const components_1 = require("./components");
+const context_1 = require("./context");
+const JoinEditor = ({ tableColumns }) => {
+    const [state, dispatch] = (0, context_1.useFeatureDescriptorEditorContext)();
+    function addCondition() {
+        dispatch(context_1.FeatureDescriptorEditorActions.Join.addNewCondition());
+    }
+    function removeCondition(id) {
+        dispatch(context_1.FeatureDescriptorEditorActions.Join.removeCondition({ id }));
+    }
+    const tables = Object.keys(tableColumns);
+    return (react_1.default.createElement("div", { style: { display: 'inline-flex' } },
+        react_1.default.createElement("div", { style: {
+                height: '26px',
+                alignItems: 'center',
+                whiteSpace: 'nowrap',
+            } },
+            "Join(",
+            react_1.default.createElement(components_1.TableInlineField, { field: "join.target_table", tables: tables }),
+            ' ',
+            react_1.default.createElement("span", { style: { marginRight: '6px' } }, ","),
+            react_1.default.createElement(components_1.TableInlineField, { field: "join.source_table", tables: tables }),
+            ' ',
+            react_1.default.createElement("span", { style: { marginRight: '6px' } }, ","),
+            "join_conditions=["),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("div", null, react_1.default.createElement(react_1.default.Fragment, null, state.join.join_conditions.map((condition, idx) => {
+                return (react_1.default.createElement("div", { key: condition.id, style: {
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                    } },
+                    react_1.default.createElement(material_1.IconButton, { color: "default", style: { height: '26px' }, onClick: () => removeCondition(condition.id) },
+                        react_1.default.createElement(Delete_1.default, { style: { width: '16px' } })),
+                    react_1.default.createElement(components_1.JoinConditionEditor, { conditionId: condition.id, tableColumns: tableColumns }),
+                    idx + 1 === state.join.join_conditions.length && (react_1.default.createElement("span", { style: { alignSelf: 'center', marginLeft: '6px' } },
+                        "])",
+                        react_1.default.createElement(material_1.Button, { variant: "text", onClick: addCondition }, "+ add new join")))));
+            }))))));
+};
+exports.JoinEditor = JoinEditor;
+//# sourceMappingURL=JoinEditor.js.map

package/lib/feature-descriptor/feature-descriptor-editor/components/EditorTemplateRenderer.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorTemplateRenderer = void 0;
+const react_1 = __importDefault(require("react"));
+function EditorTemplateRenderer(props) {
+    return (react_1.default.createElement(react_1.default.Fragment, null, props.templates.map((fieldWidget, idx) => (react_1.default.createElement(react_1.default.Fragment, null,
+        fieldWidget,
+        idx + 1 < props.templates.length ? (react_1.default.createElement("span", { style: { marginRight: '3px' } }, ",")) : null)))));
+}
+exports.EditorTemplateRenderer = EditorTemplateRenderer;
+//# sourceMappingURL=EditorTemplateRenderer.js.map