Feat fold new

packages/graphic-walker/src/components/pivotTable/index.tsx

@@ -13,6 +13,7 @@ import { unstable_batchedUpdates } from 'react-dom';
 import MetricTable from './metricTable';
 import { toJS } from 'mobx';
 import LoadingLayer from '../loadingLayer';
+import { fold2 } from '../../lib/op/fold';
 
 interface PivotTableProps {
     themeKey?: IThemeKey;
@@ -35,7 +36,7 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
     const { vizStore, commonStore } = useGlobalStore();
     const { allFields, viewFilters, viewMeasures, sort, limit, draggableFieldState } = vizStore;
     const { rows, columns } = draggableFieldState;
-    const { showTableSummary, defaultAggregated } = visualConfig;
+    const { showTableSummary, defaultAggregated, folds } = visualConfig;
     const { tableCollapsedHeaderMap } = commonStore;
     const aggData = useRef<IRow[]>([]);
     const [topTreeHeaderRowNum, setTopTreeHeaderRowNum] = useState<number>(0);
@@ -128,11 +129,13 @@ const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableCompon
         setIsLoading(true);
         appRef.current?.updateRenderStatus('computing');
         const groupbyPromises: Promise<IRow[]>[] = groupbyCombList.map((dimComb) => {
-            const workflow = toWorkflow(viewFilters, allFields, dimComb, viewMeasures, defaultAggregated, sort, limit > 0 ? limit : undefined);
-            return dataQueryServer(computationFunction, workflow, limit > 0 ? limit : undefined).catch((err) => {
-                appRef.current?.updateRenderStatus('error');
-                return [];
-            });
+            const workflow = toWorkflow(viewFilters, allFields, dimComb, viewMeasures, defaultAggregated, sort, folds ?? [], limit > 0 ? limit : undefined);
+            return dataQueryServer(computationFunction, workflow, limit > 0 ? limit : undefined)
+                .then((res) => fold2(res, defaultAggregated, allFields, viewMeasures, dimComb, folds))
+                .catch((err) => {
+                    appRef.current?.updateRenderStatus('error');
+                    return [];
+                });
         });
         return new Promise<void>((resolve, reject) => {
             Promise.all(groupbyPromises)

packages/graphic-walker/src/components/selectContext/index.tsx

@@ -0,0 +1,93 @@
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { Listbox, Transition } from '@headlessui/react';
+import { CheckIcon, Cog6ToothIcon } from '@heroicons/react/24/outline';
+
+export interface ISelectContextOption {
+    key: string;
+    label: string;
+    disabled?: boolean;
+}
+interface ISelectContextProps {
+    options?: ISelectContextOption[];
+    disable?: boolean;
+    selectedKeys?: string[];
+    onSelect?: (selectedKeys: string[]) => void;
+    className?: string;
+    required?: boolean;
+}
+const SelectContext: React.FC<ISelectContextProps> = (props) => {
+    const { options = [], disable = false, selectedKeys = [], onSelect, className = '', required } = props;
+
+    const [selected, setSelected] = useState<ISelectContextOption[]>(options.filter((opt) => selectedKeys.includes(opt.key)));
+
+    useEffect(() => {
+        setSelected(options.filter((opt) => selectedKeys.includes(opt.key)));
+    }, [options, selectedKeys]);
+
+    const selectedKeysRef = useRef(selectedKeys);
+    selectedKeysRef.current = selectedKeys;
+
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+
+    useEffect(() => {
+        const keys = selected.map((opt) => opt.key);
+        if (keys.length !== selectedKeysRef.current.length || keys.some((key) => !selectedKeysRef.current.includes(key))) {
+            onSelectRef.current?.(keys);
+        }
+    }, [selected]);
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+
+    return (
+        <Listbox multiple value={selected} onChange={setSelected}>
+            <div className={`relative ${className}`}>
+                <div className="relative w-full flex items-center space-x-2">
+                    <span className="flex-1 block truncate text-start">{props.children}</span>
+                    <Listbox.Button className="grow-0 shrink-0 flex items-center relative">
+                        <Cog6ToothIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
+                        {required && selected.length === 0 && (
+                            <span
+                                className="absolute top-0 right-0 h-1.5 w-1.5 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 pointer-events-none"
+                                aria-hidden
+                            />
+                        )}
+                        {selected.length > 0 && (
+                            <span className="absolute top-0 right-0 h-4 px-1 translate-x-1/2 -translate-y-1/2 scale-[67%] flex items-center justify-center rounded-full bg-indigo-400/75 text-white text-xs font-normal pointer-events-none">
+                                {selected.length > 10 ? '10+' : selected.length}
+                            </span>
+                        )}
+                    </Listbox.Button>
+                </div>
+                <Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
+                    <Listbox.Options className="absolute mt-1 max-h-60 min-w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        {options.map((option) => (
+                            <Listbox.Option
+                                key={option.key}
+                                className={({ active }) =>
+                                    `relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'}`
+                                }
+                                value={option}
+                            >
+                                {({ selected }) => (
+                                    <>
+                                        <span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>{option.label}</span>
+                                        {selected ? (
+                                            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                            </span>
+                                        ) : null}
+                                    </>
+                                )}
+                            </Listbox.Option>
+                        ))}
+                    </Listbox.Options>
+                </Transition>
+            </div>
+        </Listbox>
+    );
+};
+
+export default SelectContext;

packages/graphic-walker/src/components/tabs/editableTab.tsx

@@ -38,7 +38,6 @@ const Slider = (props: { className?: string; children: React.ReactNode; safeDist
             e.stopPropagation();
             const rect = ref.current?.children[0]?.getBoundingClientRect();
             if (rect) {
-                console.log(rect);
                 setX((x) => Math.min(rect.width - props.safeDistance, Math.max(0, x + e.deltaY)));
             }
             return false;

packages/graphic-walker/src/constants.ts

@@ -5,3 +5,6 @@ export const DATE_TIME_DRILL_LEVELS = [
 export const DATE_TIME_FEATURE_LEVELS = [
   "year", "quarter", "month", "week", "weekday", "day", "hour", "minute", "second"
 ] as const;
+
+export const MEA_KEY_ID = 'gw_mea_key_fid';
+export const MEA_VAL_ID = 'gw_mea_val_fid';

packages/graphic-walker/src/fields/aestheticFields.tsx

@@ -36,7 +36,7 @@ const AestheticFields: React.FC = props => {
     }, [geoms[0]])
     return <div>
         {
-            channels.map(dkey => <AestheticFieldContainer name={dkey.id} key={dkey.id}>
+            channels.map((dkey, i, { length }) => <AestheticFieldContainer name={dkey.id} key={dkey.id} style={{ position: 'relative', zIndex: length - i }}>
                 <Droppable droppableId={dkey.id} direction="horizontal">
                     {(provided, snapshot) => (
                         // <OBFieldContainer dkey={dkey} provided={provided} />

packages/graphic-walker/src/fields/components.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { GLOBAL_CONFIG } from '../config';
 
-export const FieldListContainer: React.FC<{ name: string }> = (props) => {
+export const FieldListContainer: React.FC<{ name: string; style?: Omit<CSSProperties, 'translate'> }> = (props) => {
     const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
     return (
-        <FieldListSegment className="m-0.5 border border-gray-200 dark:border-gray-700">
+        <FieldListSegment className="m-0.5 border border-gray-200 dark:border-gray-700 relative" style={props.style}>
             <div className="fl-header border-r border-gray-200 dark:border-gray-800 cursor-default select-none">
                 <h4 className="font-normal">{t(props.name)}</h4>
             </div>
@@ -16,11 +16,11 @@ export const FieldListContainer: React.FC<{ name: string }> = (props) => {
     );
 };
 
-export const AestheticFieldContainer: React.FC<{ name: string }> = (props) => {
+export const AestheticFieldContainer: React.FC<{ name: string; style?: CSSProperties }> = (props) => {
     const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
     return (
-        <div className="m-0.5 text-xs border border-gray-200 dark:border-gray-700">
+        <div className="m-0.5 text-xs border border-gray-200 dark:border-gray-700" style={props.style}>
             <div className="border-b border-gray-200 dark:border-gray-800 p-2 cursor-default select-none">
                 <h4 className="font-normal">{t(props.name)}</h4>
             </div>
@@ -78,7 +78,9 @@ export const FieldListSegment = styled.div`
         }
     }
     div.fl-container {
-        flex-grow: 10;
+        flex-grow: 10;    
+        position: relative;
+        z-index: 1;
     }
 `;
 

packages/graphic-walker/src/fields/datasetFields/meaFields.tsx

@@ -7,6 +7,7 @@ import DataTypeIcon from '../../components/dataTypeIcon';
 import ActionMenu from '../../components/actionMenu';
 import { useMenuActions } from './utils';
 import { FieldPill } from './fieldPill';
+import { MEA_KEY_ID } from '../../constants';
 
 interface Props {
     provided: DroppableProvided;
@@ -25,7 +26,7 @@ const MeaFields: React.FC<Props> = (props) => {
                     {(provided, snapshot) => {
                         return (
                             <div className="block">
-                                <ActionMenu title={f.name || f.fid} menu={menuActions[index]} enableContextMenu disabled={snapshot.isDragging}>
+                                <ActionMenu title={f.name || f.fid} menu={menuActions[index]} enableContextMenu disabled={snapshot.isDragging || f.fid === MEA_KEY_ID}>
                                     <FieldPill
                                         className={`flex dark:text-white pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-purple-100 dark:hover:bg-purple-800 rounded-full truncate border border-transparent ${
                                             snapshot.isDragging ? 'bg-purple-100 dark:bg-purple-800' : ''

packages/graphic-walker/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -5,11 +5,12 @@ import { useGlobalStore } from '../../store';
 import { DroppableProvided } from 'react-beautiful-dnd';
 import { ChevronUpDownIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
-import { COUNT_FIELD_ID } from '../../constants';
+import { COUNT_FIELD_ID, MEA_KEY_ID, MEA_VAL_ID } from '../../constants';
 import DropdownContext from '../../components/dropdownContext';
 import { GLOBAL_CONFIG } from '../../config';
 import { Draggable, DroppableStateSnapshot } from '@kanaries/react-beautiful-dnd';
 import styled from 'styled-components';
+import SelectContext, { type ISelectContextOption } from '../../components/selectContext';
 
 const PillActions = styled.div`
     overflow: visible !important;
@@ -24,7 +25,8 @@ interface SingleEncodeEditorProps {
 const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
     const { dkey, provided, snapshot } = props;
     const { vizStore } = useGlobalStore();
-    const { draggableFieldState, visualConfig } = vizStore;
+    const { draggableFieldState, visualConfig, allFields } = vizStore;
+    const folds = visualConfig.folds ?? [];
     const channelItem = draggableFieldState[dkey.id][0];
     const { t } = useTranslation();
 
@@ -35,16 +37,33 @@ const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
         }));
     }, []);
 
+    const foldOptions = useMemo<ISelectContextOption[]>(() => {
+        const validFoldBy = allFields.filter((f) => f.analyticType === 'measure' && f.fid !== MEA_VAL_ID);
+        return validFoldBy.map<ISelectContextOption>((f) => ({
+            key: f.fid,
+            label: f.name,
+        }));
+    }, [allFields]);
+
     return (
         <div className="p-1 select-none relative" {...provided.droppableProps} ref={provided.innerRef}>
-            <div className={`p-1.5 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 flex item-center justify-center grow text-gray-500 dark:text-gray-400 ${snapshot.draggingFromThisWith || snapshot.isDraggingOver || !channelItem ? 'opacity-100' : 'opacity-0'} relative z-0`}>
+            <div
+                className={`p-1.5 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 flex item-center justify-center grow text-gray-500 dark:text-gray-400 ${
+                    (channelItem && !snapshot.draggingFromThisWith) || snapshot.isDraggingOver ? 'opacity-0' : 'opacity-100'
+                } relative z-0`}
+            >
                 {t('actions.drop_field')}
             </div>
             {channelItem && (
                 <Draggable key={channelItem.dragId} draggableId={channelItem.dragId} index={0}>
                     {(provided, snapshot) => {
                         return (
-                            <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} className="flex items-stretch absolute z-10 top-0 left-0 right-0 bottom-0 m-1">
+                            <div
+                                ref={provided.innerRef}
+                                {...provided.draggableProps}
+                                {...provided.dragHandleProps}
+                                className="flex items-stretch absolute z-10 top-0 left-0 right-0 bottom-0 m-1"
+                            >
                                 <div
                                     onClick={() => {
                                         vizStore.removeField(dkey.id, 0);
@@ -54,18 +73,28 @@ const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
                                     <TrashIcon className="w-4" />
                                 </div>
                                 <PillActions className="flex-1 flex items-center border border-gray-200 dark:border-gray-700 border-l-0 px-2 space-x-2 truncate">
-                                    <span className="flex-1 truncate">
-                                        {channelItem.name}
-                                    </span>
-                                    {channelItem.analyticType === "measure" && channelItem.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+                                    {channelItem.fid === MEA_KEY_ID && (
+                                        <SelectContext
+                                            options={foldOptions}
+                                            selectedKeys={folds}
+                                            onSelect={(keys) => {
+                                                vizStore.setVisualConfig('folds', keys);
+                                            }}
+                                            className="flex-1"
+                                        >
+                                            <span className="flex-1 truncate">{channelItem.name}</span>
+                                        </SelectContext>
+                                    )}
+                                    {channelItem.fid !== MEA_KEY_ID && <span className="flex-1 truncate">{channelItem.name}</span>}{' '}
+                                    {channelItem.analyticType === 'measure' && channelItem.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
                                         <DropdownContext
                                             options={aggregationOptions}
                                             onSelect={(value) => {
                                                 vizStore.setFieldAggregator(dkey.id, 0, value);
                                             }}
                                         >
                                             <span className="bg-transparent text-gray-700 dark:text-gray-200 float-right focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 flex items-center ml-2">
-                                                {channelItem.aggName || ""}
+                                                {channelItem.aggName || ''}
                                                 <ChevronUpDownIcon className="w-3" />
                                             </span>
                                         </DropdownContext>