@kanaries/graphic-walker 0.2.13 → 0.2.15

package/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+import { IDraggableStateKey } from "../../interfaces";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DropdownSelect from "./singleEncodeDropDown";
+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 DropdownContext from "../../components/dropdownContext";
+import { AGGREGATOR_LIST } from "../fieldsContext";
+import { Draggable, DroppableStateSnapshot } from "@kanaries/react-beautiful-dnd";
+
+interface SingleEncodeEditorProps {
+    dkey: IDraggableStateKey;
+    provided: DroppableProvided;
+    snapshot: DroppableStateSnapshot;
+}
+const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
+    const { dkey, provided, snapshot } = props;
+    const { vizStore } = useGlobalStore();
+    const { draggableFieldState, visualConfig } = vizStore;
+    const channelItem = draggableFieldState[dkey.id][0];
+    const { t } = useTranslation();
+
+    const aggregationOptions = useMemo(() => {
+        return AGGREGATOR_LIST.map((op) => ({
+            value: op,
+            label: t(`constant.aggregator.${op}`),
+        }));
+    }, []);
+
+    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`}>
+                {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
+                                    onClick={() => {
+                                        vizStore.removeField(dkey.id, 0);
+                                    }}
+                                    className="grow-0 shrink-0 px-1.5 flex items-center justify-center bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 cursor-pointer"
+                                >
+                                    <TrashIcon className="w-4" />
+                                </div>
+                                <div 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 && (
+                                        <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 || ""}
+                                                <ChevronUpDownIcon className="w-3" />
+                                            </span>
+                                        </DropdownContext>
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    }}
+                </Draggable>
+            )}
+        </div>
+    );
+};
+
+export default observer(SingleEncodeEditor);

package/src/fields/filterField/filterEditDialog.tsx

@@ -1,64 +1,29 @@
-import { CheckCircleIcon } from '@heroicons/react/24/outline';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import Modal from '../../components/modal';
-import type { IFilterField, IFilterRule } from '../../interfaces';
-import { useGlobalStore } from '../../store';
-import Tabs, { RuleFormProps } from './tabs';
-
-
-const QuantitativeRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['range', 'one of']}
-        />
-    );
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import Modal from "../../components/modal";
+import type { IFilterField, IFilterRule } from "../../interfaces";
+import { useGlobalStore } from "../../store";
+import Tabs, { RuleFormProps } from "./tabs";
+import DefaultButton from "../../components/button/default";
+import PrimaryButton from "../../components/button/primary";
+
+const QuantitativeRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
 };
 
-const NominalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['one of']}
-        />
-    );
+const NominalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["one of"]} />;
 };
 
-const OrdinalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['range', 'one of']}
-        />
-    );
+const OrdinalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
 };
 
-const TemporalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['one of', 'temporal range']}
-        />
-    );
+const TemporalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["one of", "temporal range"]} />;
 };
 
 const EmptyForm: React.FC<RuleFormProps> = () => <React.Fragment />;
@@ -67,7 +32,7 @@ const FilterEditDialog: React.FC = observer(() => {
     const { vizStore } = useGlobalStore();
     const { editingFilterIdx, draggableFieldState } = vizStore;
 
-    const { t } = useTranslation('translation', { keyPrefix: 'filters' });
+    const { t } = useTranslation("translation", { keyPrefix: "filters" });
 
     const field = React.useMemo(() => {
         return editingFilterIdx !== null ? draggableFieldState.filters[editingFilterIdx] : null;
@@ -83,14 +48,20 @@ const FilterEditDialog: React.FC = observer(() => {
         }
     }, [field]);
 
-    const handleChange = React.useCallback((r: IFilterRule) => {
-        if (editingFilterIdx !== null) {
-            setUncontrolledField(uf => ({
-                ...uf,
-                rule: r,
-            }) as IFilterField);
-        }
-    }, [editingFilterIdx]);
+    const handleChange = React.useCallback(
+        (r: IFilterRule) => {
+            if (editingFilterIdx !== null) {
+                setUncontrolledField(
+                    (uf) =>
+                        ({
+                            ...uf,
+                            rule: r,
+                        } as IFilterField)
+                );
+            }
+        },
+        [editingFilterIdx]
+    );
 
     const handleSubmit = React.useCallback(() => {
         if (editingFilterIdx !== null) {
@@ -100,44 +71,38 @@ const FilterEditDialog: React.FC = observer(() => {
         vizStore.closeFilterEditing();
     }, [editingFilterIdx, uncontrolledField]);
 
-    const Form = field ? ({
-        quantitative: QuantitativeRuleForm,
-        nominal: NominalRuleForm,
-        ordinal: OrdinalRuleForm,
-        temporal: TemporalRuleForm,
-    }[field.semanticType] as React.FC<RuleFormProps>) : EmptyForm;
-    
+    const Form = field
+        ? ({
+              quantitative: QuantitativeRuleForm,
+              nominal: NominalRuleForm,
+              ordinal: OrdinalRuleForm,
+              temporal: TemporalRuleForm,
+          }[field.semanticType] as React.FC<RuleFormProps>)
+        : EmptyForm;
+
     return uncontrolledField ? (
-        <Modal
-            title={t('editing')}
-            onClose={() => vizStore.closeFilterEditing()}
-        >
-            <header className="text-lg font-semibold py-2 outline-none">
-                {t('form.name')}
-            </header>
-            <input className="border py-1 px-4" readOnly value={uncontrolledField.name}/>
-            <header className="text-lg font-semibold py-2 outline-none">
-                {t('form.rule')}
-            </header>
-            <Form
-                field={uncontrolledField}
-                onChange={handleChange}
-            />
-            <div className="flex justify-center text-green-500 mt-4">
-                <CheckCircleIcon
-                    width="3em"
-                    height="3em"
-                    role="button"
-                    tabIndex={0}
-                    aria-label="ok"
-                    className="cursor-pointer hover:bg-green-50 p-1"
-                    onClick={handleSubmit}
-                    strokeWidth="1.5"
-                />
+        <Modal show={Boolean(uncontrolledField)} title={t("editing")} onClose={() => vizStore.closeFilterEditing()}>
+            <div className="p-4">
+                <h2 className="text-base font-semibold py-2 outline-none">{t("form.name")}</h2>
+                <span className="inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-sm font-medium text-indigo-800">
+                    {uncontrolledField.name}
+                </span>
+                <h3 className="text-base font-semibold py-2 outline-none">{t("form.rule")}</h3>
+                <Form field={uncontrolledField} onChange={handleChange} />
+                <div className="mt-4">
+                    <PrimaryButton
+                        onClick={handleSubmit}
+                        text={t("btn.confirm")}
+                    />
+                    <DefaultButton
+                        className="ml-2"
+                        onClick={() => vizStore.closeFilterEditing()}
+                        text={t("btn.cancel")}
+                    />
+                </div>
             </div>
         </Modal>
     ) : null;
 });
 
-
 export default FilterEditDialog;

package/src/fields/filterField/filterPill.tsx

@@ -73,7 +73,7 @@ const FilterPill: React.FC<FilterPillProps> = observer(props => {
                 {field.name}
             </header>
             <div
-                className="bg-white text-gray-500 hover:bg-gray-100 flex flex-row output"
+                className="bg-white dark:bg-zinc-900  text-gray-500 hover:bg-gray-100 flex flex-row output"
                 onClick={() => vizStore.setFilterEditing(fIndex)}
                 style={{ cursor: 'pointer' }}
                 title={t('to_edit')}

package/src/fields/filterField/slider.tsx

@@ -118,7 +118,6 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
             };
 
             const dragHandler = fromEvent(document.body, 'mousemove').pipe(
-                throttleTime(100),
                 map(ev => {
                     if (!trackRef.current || !dragging) {
                         return null;
@@ -142,6 +141,7 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
 
                     return pos;
                 }),
+                throttleTime(100),
                 filter(pos => {
                     return pos !== null && pos !== range[dragging === 'left' ? 0 : 1];
                 }),
@@ -197,7 +197,7 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
                         tabIndex={-1}
                         onMouseDown={ev => {
                             if (ev.buttons === 1) {
-                                mouseOffsetRef.current = ev.nativeEvent.offsetX;
+                                mouseOffsetRef.current = ev.nativeEvent.offsetX - (ev.target as HTMLDivElement).getBoundingClientRect().width;
                                 setDragging('left');
                             }
                         }}

package/src/fields/filterField/tabs.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import type { IFilterField, IFilterRule } from '../../interfaces';
 import { useGlobalStore } from '../../store';
+import PureTabs from '../../components/tabs/defaultTab';
 import Slider from './slider';
 
 
@@ -368,27 +369,16 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
 
     return (
         <TabsContainer>
-            <TabList role="tablist">
-                {
-                    tabs.map((tab, i) => (
-                        <TabHeader
-                            key={i}
-                            role="tab"
-                            aria-selected={which === tab}
-                            id={`filter-tab-${tab.replaceAll(/ /g, '_')}`}
-                            aria-controls={`filter-panel-${tab.replaceAll(/ /g, '_')}`}
-                            tabIndex={-1}
-                            onClick={() => {
-                                if (which !== tab) {
-                                    setWhich(tab);
-                                }
-                            }}
-                        >
-                            {t(tab.replaceAll(/ /g, '_'))}
-                        </TabHeader>
-                    ))
-                }
-            </TabList>
+            <PureTabs
+                selectedKey={which}
+                tabs={tabs.map(tab => ({
+                    key: tab,
+                    label: t(tab.replaceAll(/ /g, '_')),
+                }))}
+                onSelected={sk => {
+                    setWhich(sk as typeof which);
+                }}
+            />
             <TabPanel>
                 {
                     tabs.map((tab, i) => {

package/src/fields/obComponents/obPill.tsx

@@ -1,48 +1,78 @@
-import { BarsArrowDownIcon, BarsArrowUpIcon } from '@heroicons/react/24/outline';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { DraggableProvided } from '@kanaries/react-beautiful-dnd';
-import { COUNT_FIELD_ID } from '../../constants';
-import { IDraggableStateKey } from '../../interfaces';
-import { useGlobalStore } from '../../store';
-import { Pill } from '../components';
-import { AGGREGATOR_LIST } from '../fieldsContext';
-
+import { BarsArrowDownIcon, BarsArrowUpIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+import { observer } from "mobx-react-lite";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { DraggableProvided } from "@kanaries/react-beautiful-dnd";
+import { COUNT_FIELD_ID } from "../../constants";
+import { IDraggableStateKey } from "../../interfaces";
+import { useGlobalStore } from "../../store";
+import { Pill } from "../components";
+import { AGGREGATOR_LIST } from "../fieldsContext";
+import DropdownContext from "../../components/dropdownContext";
 
 interface PillProps {
     provided: DraggableProvided;
     fIndex: number;
     dkey: IDraggableStateKey;
 }
-const OBPill: React.FC<PillProps> = props => {
+const OBPill: React.FC<PillProps> = (props) => {
     const { provided, dkey, fIndex } = props;
     const { vizStore } = useGlobalStore();
     const { visualConfig } = vizStore;
     const field = vizStore.draggableFieldState[dkey.id][fIndex];
-    const { t } = useTranslation('translation', { keyPrefix: 'constant.aggregator' });
+    const { t } = useTranslation("translation", { keyPrefix: "constant.aggregator" });
 
-    return <Pill
-        ref={provided.innerRef}
-        colType={field.analyticType === 'dimension' ? 'discrete' : 'continuous'}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
-    >
-        {field.name}&nbsp;
-        {field.analyticType === 'measure' && field.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
-            <select
-                className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500"
-                value={field.aggName || ''}
-                onChange={(e) => { vizStore.setFieldAggregator(dkey.id, fIndex, e.target.value) }}
-            >
-                {
-                    AGGREGATOR_LIST.map(op => <option value={op} key={op}>{t(op)}</option>)
-                }
-            </select>
-        )}
-        {field.analyticType === 'dimension' && field.sort === 'ascending' && <BarsArrowUpIcon className='float-right w-3' role="status" aria-label="Sorted in ascending order" />}
-        {field.analyticType === 'dimension' && field.sort === 'descending' && <BarsArrowDownIcon className='float-right w-3' role="status" aria-label="Sorted in descending order" />}
-    </Pill>
-}
+    const aggregationOptions = useMemo(() => {
+        return AGGREGATOR_LIST.map((op) => ({
+            value: op,
+            label: t(op),
+        }));
+    }, []);
+
+    return (
+        <Pill
+            ref={provided.innerRef}
+            colType={field.analyticType === "dimension" ? "discrete" : "continuous"}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+        >
+            <span className="flex-1 truncate">{field.name}</span>&nbsp;
+            {field.analyticType === "measure" && field.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+                <DropdownContext
+                    options={aggregationOptions}
+                    onSelect={(value) => {
+                        vizStore.setFieldAggregator(dkey.id, fIndex, value);
+                    }}
+                >
+                    <span className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 flex items-center ml-2">
+                        {field.aggName || ""}
+                        <ChevronUpDownIcon className="w-3" />
+                    </span>
+                </DropdownContext>
+            )}
+            {/* {field.analyticType === "measure" && field.fid !== COUNT_FIELD_ID && visualConfig.defaultAggregated && (
+                <select
+                    className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500"
+                    value={field.aggName || ""}
+                    onChange={(e) => {
+                        vizStore.setFieldAggregator(dkey.id, fIndex, e.target.value);
+                    }}
+                >
+                    {AGGREGATOR_LIST.map((op) => (
+                        <option className="inline" value={op} key={op}>
+                            {t(op)}
+                        </option>
+                    ))}
+                </select>
+            )} */}
+            {field.analyticType === "dimension" && field.sort === "ascending" && (
+                <BarsArrowUpIcon className="float-right w-3" role="status" aria-label="Sorted in ascending order" />
+            )}
+            {field.analyticType === "dimension" && field.sort === "descending" && (
+                <BarsArrowDownIcon className="float-right w-3" role="status" aria-label="Sorted in descending order" />
+            )}
+        </Pill>
+    );
+};
 
 export default observer(OBPill);

package/src/index.css

@@ -1,9 +1,22 @@
+html{
+  margin: 0px;
+  padding: 0px;
+  background-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: rgb(24 24 27);
+  }
+}
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin: 0px;
+  padding: 0px;
 }
 
 code {

package/src/insightBoard/index.tsx

@@ -1,30 +1,31 @@
-import { toJS } from 'mobx';
-import { observer } from 'mobx-react-lite';
-import React, { useCallback } from 'react';
-import Modal from '../components/modal';
-import { useGlobalStore } from '../store';
-import InsightMainBoard from './mainBoard';
+import { toJS } from "mobx";
+import { observer } from "mobx-react-lite";
+import React, { useCallback } from "react";
+import Modal from "../components/modal";
+import { useGlobalStore } from "../store";
+import InsightMainBoard from "./mainBoard";
 
-const InsightBoard: React.FC = props => {
+const InsightBoard: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
     const { showInsightBoard, currentDataset, filters } = commonStore;
     const { viewDimensions, viewMeasures, draggableFieldState } = vizStore;
     const onCloseModal = useCallback(() => {
         commonStore.setShowInsightBoard(false);
-    }, [])
-    return <div>
-        {
-            showInsightBoard && <Modal onClose={onCloseModal}>
-                <InsightMainBoard
-                    dataSource={currentDataset.dataSource}
-                    fields={toJS(draggableFieldState.fields)}
-                    viewDs={viewDimensions}
-                    viewMs={viewMeasures}
-                    filters={toJS(filters)}
-                />
-            </Modal>
-        }
-    </div>
-}
+    }, []);
+    if (!showInsightBoard) {
+        return null;
+    }
+    return (
+        <Modal onClose={onCloseModal} show={showInsightBoard}>
+            <InsightMainBoard
+                dataSource={currentDataset.dataSource}
+                fields={toJS(draggableFieldState.fields)}
+                viewDs={viewDimensions}
+                viewMs={viewMeasures}
+                filters={toJS(filters)}
+            />
+        </Modal>
+    );
+};
 
-export default observer(InsightBoard);
+export default observer(InsightBoard);

package/src/insightBoard/mainBoard.tsx

@@ -9,6 +9,8 @@ import { baseVis, IReasonType } from "./std2vegaSpec";
 import RadioGroupButtons from "./radioGroupButtons";
 import { formatFieldName, mergeMeasures } from "./utils";
 import { useTranslation } from "react-i18next";
+import { useCurrentMediaTheme } from "../utils/media";
+import { builtInThemes } from "../vis/theme";
 
 const collection = Insight.IntentionWorkerCollection.init();
 
@@ -41,6 +43,8 @@ const InsightMainBoard: React.FC<InsightMainBoardProps> = (props) => {
     const [valueExp, setValueExp] = useState<IMeasureWithStat[]>([]);
     const { t } = useTranslation();
     const container = useRef<HTMLDivElement>(null);
+    const mediaTheme = useCurrentMediaTheme();
+    const themeConfig = builtInThemes['g2'][mediaTheme];
 
     const dimsWithTypes = useMemo(() => {
         const dimensions = fields
@@ -111,10 +115,13 @@ const InsightMainBoard: React.FC<InsightMainBoardProps> = (props) => {
                 true
             );
             if (container.current) {
-                embed(container.current, _vegaSpec);
+                embed(container.current, _vegaSpec, {
+                    actions: false,
+                    config: themeConfig
+                });
             }
         }
-    }, [visIndex, recSpaces, visSpaces, fields, dataSource]);
+    }, [visIndex, recSpaces, visSpaces, fields, dataSource, themeConfig]);
 
     const FilterDesc = useMemo<React.ReactElement[]>(() => {
         if (filters) {

package/src/insightBoard/radioGroupButtons.tsx

@@ -9,9 +9,16 @@ const RGBContainer = styled.div`
         border: 1px solid #f0f0f0;
         background-color: #f0f0f0;
         cursor: pointer;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+            border: 1px solid #4b5563;
+        }
     }
     .choosen.option {
         background-color: #fff;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+        }
     }
 `;
 

package/src/interfaces.ts

@@ -119,6 +119,7 @@ export interface DraggableFieldState {
     shape: IViewField[];
     theta: IViewField[];
     radius: IViewField[];
+    details: IViewField[];
     filters: IFilterField[];
 }
 
@@ -183,4 +184,7 @@ export interface IVisSpec {
 export enum ISegmentKey {
     vis = 'vis',
     data = 'data'
-}
+}
+
+export type IThemeKey = 'vega' | 'g2';
+export type IDarkMode = 'media' | 'light' | 'dark';

package/src/lib/inferMeta.ts

@@ -53,7 +53,7 @@ function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyt
 export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
     let st = UnivariateSummary.getFieldType(data, fid);
     if (st === 'nominal') {
-        if (isDateTimeArray(data.map((row) => row[fid]))) st = 'temporal';
+        if (isDateTimeArray(data.map((row) => `${row[fid]}`))) st = 'temporal';
     } else if (st === 'ordinal') {
         const valueSet: Set<number> = new Set();
         let _max = -Infinity;