@kanaries/graphic-walker 0.2.4 → 0.2.6

package/src/fields/components.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import styled from "styled-components";
+import { useTranslation } from 'react-i18next';
+import { COLORS } from "../config";
+
+export const AestheticSegment = styled.div`
+  border: 1px solid #dfe3e8;
+  font-size: 12px;
+  margin: 0.2em;
+
+  .aes-header{
+    border-bottom: 1px solid #dfe3e8;
+    padding: 0.6em;
+    h4 {
+      font-weight: 400;
+    }
+  }
+  .aes-container{
+    overflow-x: auto;
+  }
+
+`
+
+export const FieldListContainer: React.FC<{ name: string }> = (props) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
+
+  return (
+    <FieldListSegment>
+      <div className="fl-header">
+        <h4>{t(props.name)}</h4>
+      </div>
+      <div className="fl-container">{props.children}</div>
+    </FieldListSegment>
+  );
+};
+
+export const AestheticFieldContainer: React.FC<{ name: string }> = props => {
+  const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
+
+  return (
+    <AestheticSegment>
+      <div className="aes-header cursor-default select-none">
+        <h4>{t(props.name)}</h4>
+      </div>
+      <div className="aes-container">{props.children}</div>
+    </AestheticSegment>
+  );
+}
+
+export const FilterFieldContainer: React.FC = props => {
+  const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
+
+  return (
+    <FilterFieldSegment>
+      <div className="flt-header cursor-default select-none">
+        <h4>{t('filters')}</h4>
+      </div>
+      <div className="flt-container">{props.children}</div>
+    </FilterFieldSegment>
+  );
+}
+
+export const FieldsContainer = styled.div`
+  display: flex;
+  padding: 0.2em;
+  min-height: 2.4em;
+  flex-wrap: wrap;
+  >div{
+    margin: 1px;
+  }
+`;
+
+export const FilterFieldsContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  paddingBlock: '0.5em 0.8em',
+  paddingInline: '0.2em',
+  minHeight: '4em',
+  '> div': {
+    marginBlock: '0.3em',
+    marginInline: '1px',
+  },
+});
+
+export const FieldListSegment = styled.div`
+  display: flex;
+  border: 1px solid #dfe3e8;
+  margin: 0.2em;
+  font-size: 12px;
+  div.fl-header {
+    /* flex-basis: 100px; */
+    width: 100px;
+    border-right: 1px solid #dfe3e8;
+    flex-shrink: 0;
+    h4 {
+      margin: 0.6em;
+      font-weight: 400;
+    }
+  }
+  div.fl-container {
+    flex-grow: 10;
+    /* display: flex;
+    flex-wrap: wrap; */
+    /* overflow-x: auto;
+    overflow-y: hidden; */
+  }
+`;
+
+export const FilterFieldSegment = styled.div({
+  border: '1px solid #dfe3e8',
+  fontSize: '12px',
+  margin: '0.2em',
+
+  '.flt-header': {
+    borderBottom: '1px solid #dfe3e8',
+    padding: '0.6em',
+
+    '> h4': {
+      fontWeight: 400,
+    },
+  },
+
+  '.flt-container': {
+
+  },
+});
+
+export const Pill = styled.div<{colType: 'discrete' | 'continuous'}>`
+  background-color: ${props => props.colType === 'continuous' ? COLORS.white : COLORS.black};
+  border-color: ${props => props.colType === 'continuous' ? COLORS.black : COLORS.white};
+  color: ${props => props.colType === 'continuous' ? COLORS.black : COLORS.white};
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-align-items: center;
+  -webkit-user-select: none;
+  align-items: center;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  cursor: default;
+  display: -webkit-flex;
+  display: flex;
+  font-size: 12px;
+  height: 20px;
+  min-width: 150px;
+  overflow-y: hidden;
+  padding: 0 10px;
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow-color: rgb(6 182 212/0.5);
+  --tw-shadow: var(--tw-shadow-colored);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); */
+`
+

package/src/fields/datasetFields/dimFields.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Draggable, DroppableProvided } from 'react-beautiful-dnd';
+import { observer } from 'mobx-react-lite';
+import { useGlobalStore } from '../../store';
+import DataTypeIcon from '../../components/dataTypeIcon';
+import { FieldPill } from './fieldPill';
+
+interface Props {
+    provided: DroppableProvided;
+}
+const DimFields: React.FC<Props> = props => {
+    const { provided } = props;
+    const { vizStore } = useGlobalStore();
+    const dimensions = vizStore.draggableFieldState.dimensions;
+    return <div {...provided.droppableProps} ref={provided.innerRef}>
+        {dimensions.map((f, index) => (
+            <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
+                {(provided, snapshot) => {
+                    return (
+                        <>
+                            <FieldPill
+                                className="pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full truncate"
+                                ref={provided.innerRef}
+                                isDragging={snapshot.isDragging}
+                                {...provided.draggableProps}
+                                {...provided.dragHandleProps}
+                            >
+                                <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
+                            </FieldPill>
+                            {
+                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
+                                isDragging={snapshot.isDragging}
+                                >
+                                    <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
+                                </FieldPill>
+                            }
+                        </>
+                    );
+                }}
+            </Draggable>
+        ))}
+    </div>
+}
+
+export default observer(DimFields);

package/src/fields/datasetFields/fieldPill.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+/**
+ * react-beautiful-dnd v13.1.0 bug
+ * https://github.com/atlassian/react-beautiful-dnd/issues/2361
+ */
+export const FieldPill = styled.div<{isDragging: boolean}>`
+    transform: ${props => !props.isDragging && 'translate(0px, 0px) !important'};
+    user-select: none;
+`

package/src/fields/datasetFields/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Droppable } from "react-beautiful-dnd";
+import { useTranslation } from "react-i18next";
+import { NestContainer } from "../../components/container";
+import DimFields from "./dimFields";
+import MeaFields from "./meaFields";
+
+const DatasetFields: React.FC = (props) => {
+    const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.DatasetFields" });
+
+    return (
+        <NestContainer className="flex flex-col" style={{ height: "680px", paddingBlock: 0 }}>
+            <h4 className="text-xs mb-2 flex-grow-0 cursor-default select-none mt-2">{t("field_list")}</h4>
+            <div className="pd-1 overflow-y-auto" style={{ maxHeight: "380px" }}>
+                <Droppable droppableId="dimensions" direction="vertical">
+                    {(provided, snapshot) => <DimFields provided={provided} />}
+                </Droppable>
+            </div>
+            <div className="border-t flex-grow pd-1 overflow-y-auto">
+                <Droppable droppableId="measures" direction="vertical">
+                    {(provided, snapshot) => <MeaFields provided={provided} />}
+                </Droppable>
+            </div>
+        </NestContainer>
+    );
+};
+
+export default DatasetFields;

package/src/fields/datasetFields/meaFields.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Draggable, DroppableProvided } from 'react-beautiful-dnd';
+import { observer } from 'mobx-react-lite';
+import { useGlobalStore } from '../../store';
+import DataTypeIcon from '../../components/dataTypeIcon';
+import { FieldPill } from './fieldPill';
+
+interface Props {
+    provided: DroppableProvided;
+}
+const MeaFields: React.FC<Props> = props => {
+    const { provided } = props;
+    const { vizStore } = useGlobalStore();
+    const measures = vizStore.draggableFieldState.measures;
+    return <div {...provided.droppableProps} ref={provided.innerRef}>
+        {measures.map((f, index) => (
+            <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
+                {(provided, snapshot) => {
+                    return (
+                        <>
+                            <FieldPill
+                                className="pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full truncate"
+                                isDragging={snapshot.isDragging}
+                                ref={provided.innerRef}
+                                {...provided.draggableProps}
+                                {...provided.dragHandleProps}
+                            >
+                                <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
+                                {
+                                    f.fid && !snapshot.isDragging && <select className="bg-transparent text-gray-700 float-right focus:outline-none focus:border-gray-500" value="" onChange={e => {
+                                        if (e.target.value === 'bin') {
+                                            vizStore.createBinField('measures', index)
+                                        } else if (e.target.value === 'log10') {
+                                            vizStore.createLogField('measures', index)
+                                        }
+                                    }}>
+                                        <option value=""></option>
+                                        <option value="bin">bin</option>
+                                        <option value="log10">log10</option>
+                                    </select>
+                                }
+                            </FieldPill>
+                            {
+                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
+                                    isDragging={snapshot.isDragging}
+                                >
+                                    <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;
+                                </FieldPill>
+                            }
+                        </>
+                    );
+                }}
+            </Draggable>
+        ))}
+    </div>
+}
+
+export default observer(MeaFields);

package/src/fields/fieldsContext.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import { DraggableFieldState, IDraggableStateKey } from '../interfaces';
+import {
+    DragDropContext,
+    DropResult,
+    ResponderProvided,
+    DraggableLocation,
+} from "react-beautiful-dnd";
+import { useGlobalStore } from '../store';
+window['__react-beautiful-dnd-disable-dev-warnings'] = true;
+
+
+export const FieldsContextWrapper: React.FC = props => {
+    const { vizStore } = useGlobalStore();
+    const onDragEnd = useCallback((result: DropResult, provided: ResponderProvided) => {
+        if (!result.destination) {
+            vizStore.removeField(result.source.droppableId as keyof DraggableFieldState, result.source.index)
+            return;
+        }
+        const destination = result.destination as DraggableLocation;
+        if (destination.droppableId === result.source.droppableId) {
+            if (destination.index === result.source.index) return;
+            vizStore.reorderField(destination.droppableId as keyof DraggableFieldState, result.source.index, destination.index);
+        } else {
+            let sourceKey = result.source
+                    .droppableId as keyof DraggableFieldState;
+            let targetKey = destination
+                .droppableId as keyof DraggableFieldState;
+            vizStore.moveField(sourceKey, result.source.index, targetKey, destination.index)
+        }
+    }, [])
+    return <DragDropContext onDragEnd={onDragEnd}
+        onDragStart={() => {}}
+        onDragUpdate={() => {}}
+    >
+        { props.children }
+    </DragDropContext>
+}
+
+export default FieldsContextWrapper;
+
+export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
+    { id: 'fields', mode: 0 },
+    { id: 'columns', mode: 0 },
+    { id: 'rows', mode: 0 },
+    { id: 'color', mode: 1 },
+    { id: 'opacity', mode: 1 },
+    { id: 'size', mode: 1 },
+    { id: 'shape', mode: 1},
+    { id: 'theta', mode: 1 },
+    { id: 'radius', mode: 1 },
+    { id: 'filters', mode: 1 },
+] as const;
+
+export const AGGREGATOR_LIST: Readonly<string[]> = [
+    'sum',
+    'mean',
+    'count',
+] as const;

package/src/fields/filterField/filterEditDialog.tsx

@@ -0,0 +1,143 @@
+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']}
+        />
+    );
+};
+
+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 TemporalRuleForm: React.FC<RuleFormProps> = ({
+    field,
+    onChange,
+}) => {
+    return (
+        <Tabs
+            field={field}
+            onChange={onChange}
+            tabs={['one of', 'temporal range']}
+        />
+    );
+};
+
+const EmptyForm: React.FC<RuleFormProps> = () => <React.Fragment />;
+
+const FilterEditDialog: React.FC = observer(() => {
+    const { vizStore } = useGlobalStore();
+    const { editingFilterIdx, draggableFieldState } = vizStore;
+
+    const { t } = useTranslation('translation', { keyPrefix: 'filters' });
+
+    const field = React.useMemo(() => {
+        return editingFilterIdx !== null ? draggableFieldState.filters[editingFilterIdx] : null;
+    }, [editingFilterIdx, draggableFieldState]);
+
+    const [uncontrolledField, setUncontrolledField] = React.useState(field as IFilterField | null);
+    const ufRef = React.useRef(uncontrolledField);
+    ufRef.current = uncontrolledField;
+
+    React.useEffect(() => {
+        if (field !== ufRef.current) {
+            setUncontrolledField(field);
+        }
+    }, [field]);
+
+    const handleChange = React.useCallback((r: IFilterRule) => {
+        if (editingFilterIdx !== null) {
+            setUncontrolledField(uf => ({
+                ...uf,
+                rule: r,
+            }) as IFilterField);
+        }
+    }, [editingFilterIdx]);
+
+    const handleSubmit = React.useCallback(() => {
+        if (editingFilterIdx !== null) {
+            vizStore.writeFilter(editingFilterIdx, uncontrolledField?.rule ?? null);
+        }
+
+        vizStore.closeFilterEditing();
+    }, [editingFilterIdx, uncontrolledField]);
+
+    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"
+                />
+            </div>
+        </Modal>
+    ) : null;
+});
+
+
+export default FilterEditDialog;

package/src/fields/filterField/filterPill.tsx

@@ -0,0 +1,113 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { DraggableProvided } from "react-beautiful-dnd";
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import { PencilSquareIcon } from '@heroicons/react/24/solid';
+import { useGlobalStore } from '../../store';
+
+
+interface FilterPillProps {
+    provided: DraggableProvided;
+    fIndex: number;
+}
+
+const Pill = styled.div({
+  userSelect: 'none',
+  alignItems: 'stretch',
+  borderStyle: 'solid',
+  borderWidth: '1px',
+  boxSizing: 'border-box',
+  cursor: 'default',
+  display: 'flex',
+  flexDirection: 'column',
+  fontSize: '12px',
+  minWidth: '150px',
+  overflowY: 'hidden',
+  padding: 0,
+
+  '> *': {
+    flexGrow: 1,
+    paddingBlock: '0.2em',
+    paddingInline: '0.5em',
+  },
+  
+  '> header': {
+    height: '20px',
+    borderBottomWidth: '1px',
+  },
+  '> div.output': {
+    minHeight: '20px',
+
+    '> span': {
+        overflowY: 'hidden',
+        maxHeight: '4em',
+    },
+  },
+
+  '> .output .icon': {
+    display: 'none',
+  },
+  '> .output:hover .icon': {
+    display: 'unset',
+  },
+});
+
+const FilterPill: React.FC<FilterPillProps> = observer(props => {
+    const { provided, fIndex } = props;
+    const { vizStore } = useGlobalStore();
+    const { draggableFieldState } = vizStore;
+
+    const field = draggableFieldState.filters[fIndex];
+
+    const { t } = useTranslation('translation', { keyPrefix: 'filters' });
+
+    return (
+        <Pill
+            className="text-gray-900"
+            ref={provided.innerRef}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+        >
+            <header className="bg-indigo-50">
+                {field.name}
+            </header>
+            <div
+                className="bg-white text-gray-500 hover:bg-gray-100 flex flex-row output"
+                onClick={() => vizStore.setFilterEditing(fIndex)}
+                style={{ cursor: 'pointer' }}
+                title={t('to_edit')}
+            >
+                {
+                    field.rule ? (
+                        <span className="flex-1">
+                            {
+                                field.rule.type === 'one of' ? (
+                                    `oneOf: [${[...field.rule.value].map(d => JSON.stringify(d)).join(', ')}]`
+                                ) : field.rule.type === 'range' ? (
+                                    `range: [${field.rule.value[0]}, ${field.rule.value[1]}]`
+                                ) : field.rule.type === 'temporal range' ? (
+                                    `range: [${new Date(field.rule.value[0])}, ${new Date(field.rule.value[1])}]`
+                                ) : null
+                            }
+                        </span>
+                    ) : (
+                        <span className="text-gray-600 flex-1">
+                            {t('empty_rule')}
+                        </span>
+                    )
+                }
+                <PencilSquareIcon
+                    className="icon flex-grow-0 flex-shrink-0 pointer-events-none text-gray-500"
+                    role="presentation"
+                    aria-hidden
+                    width="1.4em"
+                    height="1.4em"
+                />
+            </div>
+        </Pill>
+    );
+});
+
+
+export default FilterPill;

package/src/fields/filterField/index.tsx

@@ -0,0 +1,61 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import {
+    Draggable,
+    Droppable, DroppableProvided,
+} from "react-beautiful-dnd";
+
+import { useGlobalStore } from '../../store';
+import { FilterFieldContainer, FilterFieldsContainer } from '../components';
+import FilterPill from './filterPill';
+import FilterEditDialog from './filterEditDialog';
+
+
+interface FieldContainerProps {
+    provided: DroppableProvided;
+}
+
+const FilterItemContainer: React.FC<FieldContainerProps> = observer(({ provided }) => {
+    const { vizStore } = useGlobalStore();
+    const { draggableFieldState: { filters } } = vizStore;
+
+    return (
+        <FilterFieldsContainer
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+        >
+            {filters.map((f, index) => (
+                <Draggable key={f.dragId} draggableId={f.dragId} index={index}>
+                    {(provided, snapshot) => {
+                        return (
+                            <FilterPill
+                                fIndex={index}
+                                provided={provided}
+                            />
+                        );
+                    }}
+                </Draggable>
+            ))}
+            {provided.placeholder}
+            <FilterEditDialog />
+        </FilterFieldsContainer>
+    );
+});
+
+const FilterField: React.FC = () => {
+    return (
+        <div>
+            <FilterFieldContainer>
+                <Droppable droppableId="filters" direction="vertical">
+                    {(provided, snapshot) => (
+                        <FilterItemContainer
+                            provided={provided}
+                        />
+                    )}
+                </Droppable>
+            </FilterFieldContainer>
+        </div>
+    );
+};
+
+export default FilterField;