@kanaries/graphic-walker 0.2.12 → 0.2.13

package/dist/interfaces.d.ts

@@ -149,3 +149,7 @@ export interface IVisSpec {
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
 }
+export declare enum ISegmentKey {
+    vis = "vis",
+    data = "data"
+}

package/dist/segments/segmentNav.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.FunctionComponent<{}>;
+export default _default;

package/dist/store/commonStore.d.ts

@@ -1,4 +1,4 @@
-import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow } from '../interfaces';
+import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
 export declare class CommonStore {
     datasets: IDataSet[];
     dataSources: IDataSource[];
@@ -12,15 +12,21 @@ export declare class CommonStore {
         show: boolean;
         position: [number, number];
     };
+    showDataConfig: boolean;
     filters: Filters;
+    segmentKey: ISegmentKey;
     constructor();
     get currentDataset(): DataSet;
+    setSegmentKey(sk: ISegmentKey): void;
     setShowDSPanel(show: boolean): void;
+    setShowDataConfig(show: boolean): void;
     setShowInsightBoard(show: boolean): void;
     showEmbededMenu(position: [number, number]): void;
     closeEmbededMenu(): void;
     initTempDS(): void;
     updateTempFields(fields: IMutField[]): void;
+    updateCurrentDatasetMetas(fid: string, diffMeta: Partial<IMutField>): void;
+    updateTempDatasetMetas(fid: string, diffMeta: Partial<IMutField>): void;
     updateTempFieldAnalyticType(fieldKey: string, analyticType: IMutField['analyticType']): void;
     updateTempFieldSemanticType(fieldKey: string, semanticType: IMutField['semanticType']): void;
     updateTempName(name: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/App.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { LightBulbIcon } from "@heroicons/react/24/outline";
 import { toJS } from "mobx";
 import { useTranslation } from "react-i18next";
-import { IMutField, IRow } from "./interfaces";
+import { IMutField, IRow, ISegmentKey } from "./interfaces";
 import type { IReactVegaHandler } from "./vis/react-vega";
 import VisualSettings from "./visualSettings";
 import { Container, NestContainer } from "./components/container";
@@ -21,6 +21,8 @@ import VisNav from "./segments/visNav";
 import { mergeLocaleRes, setLocaleLanguage } from "./locales/i18n";
 import FilterField from "./fields/filterField";
 import { guardDataKeys } from "./utils/dataPrep";
+import SegmentNav from "./segments/segmentNav";
+import DatasetConfig from "./dataSource/datasetConfig";
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -37,11 +39,19 @@ export interface IGWProps {
 }
 
 const App: React.FC<IGWProps> = (props) => {
-    const { dataSource = [], rawFields = [], spec, i18nLang = "en-US", i18nResources, hideDataSourceConfig, fieldKeyGuard = true } = props;
+    const {
+        dataSource = [],
+        rawFields = [],
+        spec,
+        i18nLang = "en-US",
+        i18nResources,
+        hideDataSourceConfig,
+        fieldKeyGuard = true,
+    } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
 
-    const { currentDataset, datasets, vizEmbededMenu } = commonStore;
+    const { currentDataset, datasets, vizEmbededMenu, segmentKey } = commonStore;
 
     const { t, i18n } = useTranslation();
     const curLang = i18n.language;
@@ -114,48 +124,63 @@ const App: React.FC<IGWProps> = (props) => {
             <div className="">
                 {!hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
                 <div className="px-2 mx-2">
-                    <VisNav />
+                    <SegmentNav />
+                    {
+                        segmentKey === ISegmentKey.vis && <VisNav />
+                    }
                 </div>
-                <Container style={{ marginTop: "0em", borderTop: "none" }}>
-                    <VisualSettings rendererHandler={rendererRef} />
-                    <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
-                        <div className="md:col-span-3 xl:col-span-1">
-                            <DatasetFields />
-                        </div>
-                        <div className="md:col-span-2 xl:col-span-1">
-                            <FilterField />
-                            <AestheticFields />
-                        </div>
-                        <div className="md:col-span-7 xl:col-span-4">
-                            <div>
-                                <PosFields />
+                {segmentKey === ISegmentKey.vis && (
+                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                        <VisualSettings rendererHandler={rendererRef} />
+                        <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
+                            <div className="md:col-span-3 xl:col-span-1">
+                                <DatasetFields />
+                            </div>
+                            <div className="md:col-span-2 xl:col-span-1">
+                                <FilterField />
+                                <AestheticFields />
+                            </div>
+                            <div className="md:col-span-7 xl:col-span-4">
+                                <div>
+                                    <PosFields />
+                                </div>
+                                <NestContainer
+                                    style={{ minHeight: "600px", overflow: "auto" }}
+                                    onMouseLeave={() => {
+                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    }}
+                                    onClick={() => {
+                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    }}
+                                >
+                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} />}
+                                    <InsightBoard />
+                                    {vizEmbededMenu.show && (
+                                        <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
+                                            <div
+                                                className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100"
+                                                onClick={() => {
+                                                    commonStore.closeEmbededMenu();
+                                                    commonStore.setShowInsightBoard(true);
+                                                }}
+                                            >
+                                                <span className="flex-1 pr-2">
+                                                    {t("App.labels.data_interpretation")}
+                                                </span>
+                                                <LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
+                                            </div>
+                                        </ClickMenu>
+                                    )}
+                                </NestContainer>
                             </div>
-                            <NestContainer
-                                style={{ minHeight: "600px", overflow: "auto" }}
-                                onMouseLeave={() => {
-                                    vizEmbededMenu.show && commonStore.closeEmbededMenu();
-                                }}
-                            >
-                                {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} />}
-                                <InsightBoard />
-                                {vizEmbededMenu.show && (
-                                    <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
-                                        <div
-                                            className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100"
-                                            onClick={() => {
-                                                commonStore.closeEmbededMenu();
-                                                commonStore.setShowInsightBoard(true);
-                                            }}
-                                        >
-                                            <span className="flex-1 pr-2">{t("App.labels.data_interpretation")}</span>
-                                            <LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
-                                        </div>
-                                    </ClickMenu>
-                                )}
-                            </NestContainer>
                         </div>
-                    </div>
-                </Container>
+                    </Container>
+                )}
+                {segmentKey === ISegmentKey.data && (
+                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                        <DatasetConfig />
+                    </Container>
+                )}
             </div>
         </div>
     );

package/src/components/dataTable/index.tsx

@@ -0,0 +1,187 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+import { IMutField, IRow } from "../../interfaces";
+import { useTranslation } from "react-i18next";
+import Pagination from "./pagination";
+
+interface DataTableProps {
+    size?: number;
+    metas: IMutField[];
+    data: IRow[];
+    onMetaChange: (fid: string, fIndex: number, meta: Partial<IMutField>) => void;
+}
+const Container = styled.div`
+    overflow-x: auto;
+    max-height: 660px;
+    overflow-y: auto;
+    table {
+        box-sizing: content-box;
+        border-collapse: collapse;
+        font-size: 12px;
+        thead {
+            th {
+            }
+            th.number {
+                border-top: 3px solid #5cdbd3;
+            }
+            th.text {
+                border-top: 3px solid #69c0ff;
+            }
+        }
+        tbody {
+            td {
+            }
+            td.number {
+                text-align: right;
+            }
+            td.text {
+                text-align: left;
+            }
+        }
+    }
+`;
+const ANALYTIC_TYPE_LIST = ["dimension", "measure"];
+const SEMANTIC_TYPE_LIST = ["nominal", "ordinal", "quantitative", "temporal"];
+// function getCellType(field: IMutField): 'number' | 'text' {
+//     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
+// }
+function getHeaderType(field: IMutField): "number" | "text" {
+    return field.analyticType === "dimension" ? "text" : "number";
+}
+
+function getHeaderClassNames(field: IMutField) {
+    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-teal-400";
+}
+
+function getSemanticColors(field: IMutField): string {
+    switch (field.semanticType) {
+        case "nominal":
+            return "bg-indigo-100 text-indigo-800";
+        case "ordinal":
+            return "bg-purple-100 text-purple-800";
+        case "quantitative":
+            return "bg-green-100 text-green-800";
+        case "temporal":
+            return "bg-yellow-100 text-yellow-800";
+        default:
+            return "bg-gray-400";
+    }
+}
+
+const DataTable: React.FC<DataTableProps> = (props) => {
+    const { size = 10, data, metas, onMetaChange } = props;
+    const [pageIndex, setPageIndex] = useState(0);
+    const { t } = useTranslation();
+
+    const analyticTypeList = useMemo<{ value: string; label: string }[]>(() => {
+        return ANALYTIC_TYPE_LIST.map((at) => ({
+            value: at,
+            label: t(`constant.analytic_type.${at}`),
+        }));
+    }, []);
+
+    const semanticTypeList = useMemo<{ value: string; label: string }[]>(() => {
+        return SEMANTIC_TYPE_LIST.map((st) => ({
+            value: st,
+            label: t(`constant.semantic_type.${st}`),
+        }));
+    }, []);
+
+    const from = pageIndex * size;
+    const to = Math.min((pageIndex + 1) * size, data.length - 1);
+
+    return (
+        <Container className="rounded border-gray-200 border">
+            <Pagination
+                total={data.length}
+                from={from + 1}
+                to={to + 1}
+                onNext={() => {
+                    setPageIndex(Math.min(Math.ceil(data.length / size) - 1, pageIndex + 1));
+                }}
+                onPrev={() => {
+                    setPageIndex(Math.max(0, pageIndex - 1));
+                }}
+            />
+            <table className="min-w-full divide-y divide-gray-30">
+                <thead className="bg-gray-50">
+                    <tr className="divide-x divide-gray-200">
+                        {metas.map((field, fIndex) => (
+                            <th key={field.fid} className={""}>
+                                <div
+                                    className={
+                                        getHeaderClassNames(field) +
+                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 sm:pl-6"
+                                    }
+                                >
+                                    <b>{field.name || field.fid}</b>
+                                    <div>
+                                        <select
+                                            className={
+                                                "px-2 py font-normal mt-2 rounded-full text-xs text-white " +
+                                                (field.analyticType === "dimension" ? "bg-blue-500" : "bg-teal-500")
+                                            }
+                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
+                                            value={field.analyticType}
+                                            onChange={(e) => {
+                                                onMetaChange(field.fid, fIndex, {
+                                                    analyticType: e.target.value as IMutField["analyticType"],
+                                                });
+                                            }}
+                                        >
+                                            {analyticTypeList.map((type) => (
+                                                <option key={type.value} value={type.value}>
+                                                    {type.label}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <select
+                                            className={
+                                                "inline-block px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
+                                                getSemanticColors(field)
+                                            }
+                                            // className="border-b border-gray-200 bg-gray-50 pl-0 mt-2 font-light"
+                                            value={field.semanticType}
+                                            onChange={(e) => {
+                                                onMetaChange(field.fid, fIndex, {
+                                                    semanticType: e.target.value as IMutField["semanticType"],
+                                                });
+                                            }}
+                                        >
+                                            {semanticTypeList.map((type) => (
+                                                <option key={type.value} value={type.value}>
+                                                    {type.label}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                </div>
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 bg-white">
+                    {data.slice(from, to).map((row, index) => (
+                        <tr className={"divide-x divide-gray-200 " + (index % 2 ? "bg-gray-50" : "")} key={index}>
+                            {metas.map((field) => (
+                                <td
+                                    key={field.fid + index}
+                                    className={
+                                        getHeaderType(field) +
+                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 sm:pl-6"
+                                    }
+                                >
+                                    {row[field.fid]}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </Container>
+    );
+};
+
+export default DataTable;

package/src/components/dataTable/pagination.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+interface PaginationProps {
+    from: number;
+    to: number;
+    total: number;
+    onPrev: () => void;
+    onNext: () => void;
+}
+export default function Pagination(props: PaginationProps) {
+    const { from , to, total, onNext, onPrev } = props;
+    const { t } = useTranslation();
+    return (
+        <nav
+            className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+            aria-label="Pagination"
+        >
+            <div className="hidden sm:block">
+                <p className="text-sm text-gray-700">
+                    Showing <span className="font-medium">{from}</span> to <span className="font-medium">{to}</span> of{" "}
+                    <span className="font-medium">{total}</span> results
+                </p>
+            </div>
+            <div className="flex flex-1 justify-between sm:justify-end">
+                <button
+                    onClick={() => {
+                        onPrev();
+                    }}
+                    className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                >
+                    {t('actions.prev')}
+                </button>
+                <button
+                    onClick={() => {
+                        onNext()
+                    }}
+                    className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                >
+                    {t('actions.next')}
+                </button>
+            </div>
+        </nav>
+    );
+}

package/src/components/tabs/defaultTab.tsx

@@ -0,0 +1,43 @@
+import React, { ReactElement } from "react";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
+}
+
+export interface ITabOption {
+    label: string | ReactElement;
+    key: string;
+}
+interface DefaultProps {
+    tabs: ITabOption[];
+    selectedKey: string;
+    onSelected: (selectedKey: string, index: number) => void;
+    allowEdit?: boolean;
+    onEditLabel?: (label: string, index: number) => void;
+}
+export default function Default(props: DefaultProps) {
+    const { tabs, selectedKey, onSelected } = props;
+
+    return (
+        <div className="border-b border-gray-200 mb-2" >
+            <nav className="-mb-px flex space-x-8" role="tablist" aria-label="Tabs">
+                {tabs.map((tab, tabIndex) => (
+                    <span
+                        role="tab"
+                        tabIndex={0}
+                        onClick={() => {
+                            onSelected(tab.key, tabIndex)
+                        }}
+                        key={tab.key}
+                        className={classNames(
+                            tab.key === selectedKey
+                            ? 'border-indigo-500 text-indigo-600'
+                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm'
+                        )}
+                    >{tab.label}</span>
+                ))}
+            </nav>
+        </div>
+    );
+}

package/src/components/tabs/{pureTab.tsx → editableTab.tsx}

@@ -11,14 +11,14 @@ export interface ITabOption {
     key: string;
     options?: Record<string, any>;
 }
-interface PureTabsProps {
+interface EditableTabsProps {
     tabs: ITabOption[];
     selectedKey: string;
     onSelected: (selectedKey: string, index: number) => void;
     allowEdit?: boolean;
     onEditLabel?: (label: string, index: number) => void;
 }
-export default function PureTabs(props: PureTabsProps) {
+export default function EditableTabs(props: EditableTabsProps) {
     const { tabs, selectedKey, onSelected, allowEdit, onEditLabel } = props;
     const [editList, setEditList] = useState<boolean[]>([]);
     const { t } = useTranslation();
@@ -66,7 +66,7 @@ export default function PureTabs(props: PureTabsProps) {
                             tab.key === selectedKey
                                 ? "text-black bg-gray-100"
                                 : "text-gray-500 hover:text-gray-700",
-                            "whitespace-nowrap border-gray-200 py-1 px-2 border-t border-r border-b pr-6 text-sm cursor-pointer"
+                            "whitespace-nowrap border-gray-200 py-1 px-2 border-r border-t border-b pr-6 text-sm cursor-pointer"
                         )}
                     />
                 ))}

package/src/dataSource/dataSelection/index.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import CSVData from "./csvData";
 import PublicData from "./publicData";
 import { useTranslation } from "react-i18next";
-import PureTabs from "../../components/tabs/pureTab";
+import PureTabs from "../../components/tabs/editableTab";
 
 const DataSelection: React.FC = (props) => {
     const [sourceType, setSourceType] = useState<"file" | "public">("file");

package/src/dataSource/datasetConfig/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import DatasetTable from "../../components/dataTable";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+
+const DatasetConfig: React.FC = (props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+    const { currentDataset } = commonStore;
+    const { dataSource, rawFields } = currentDataset;
+    return (
+        <div>
+            <DatasetTable size={100} data={dataSource} metas={rawFields}
+                onMetaChange={(fid, fIndex, diffMeta) => {
+                    commonStore.updateCurrentDatasetMetas(fid, diffMeta)
+                }}
+            />
+        </div>
+    );
+};
+
+export default observer(DatasetConfig);