Enhance filter rules input and style improvements

packages/desktop/package.json

@@ -10,7 +10,7 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@kanaries/graphic-walker": "0.3.10",
+    "@kanaries/graphic-walker": "0.3.11",
     "@tauri-apps/api": "^1.1.0",
     "react": "^17.x",
     "react-dom": "^17.x"

packages/graphic-walker/package.json

@@ -38,6 +38,7 @@
     "@heroicons/react": "^2.0.8",
     "@kanaries/react-beautiful-dnd": "0.0.2",
     "@kanaries/web-data-loader": "^0.1.7",
+    "@tailwindcss/forms": "^0.5.4",
     "autoprefixer": "^10.3.5",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",

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

@@ -5,15 +5,15 @@ import { Fragment, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationTriangleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
-const Background = styled.div({
-    position: "fixed",
-    left: 0,
-    top: 0,
-    width: "100vw",
-    height: "100vh",
-    backdropFilter: "blur(1px)",
-    zIndex: 25535,
-});
+const Background = styled.div`
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    backdrop-filter: blur(1px);
+    z-index: 25535;
+`;
 
 const Container = styled.div`
     width: 98%;

packages/graphic-walker/src/fields/filterField/filterEditDialog.tsx

@@ -1,4 +1,3 @@
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -9,6 +8,7 @@ import { useGlobalStore } from "../../store";
 import Tabs, { RuleFormProps } from "./tabs";
 import DefaultButton from "../../components/button/default";
 import PrimaryButton from "../../components/button/primary";
+import DropdownSelect from "../../components/dropdownSelect";
 
 const QuantitativeRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
     return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
@@ -23,7 +23,7 @@ const OrdinalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
 };
 
 const TemporalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
-    return <Tabs field={field} onChange={onChange} tabs={["one of", "temporal range"]} />;
+    return <Tabs field={field} onChange={onChange} tabs={["temporal range", "one of"]} />;
 };
 
 const EmptyForm: React.FC<RuleFormProps> = () => <React.Fragment />;
@@ -71,6 +71,28 @@ const FilterEditDialog: React.FC = observer(() => {
         vizStore.closeFilterEditing();
     }, [editingFilterIdx, uncontrolledField]);
 
+    const allFieldOptions = React.useMemo(() => {
+        return [...draggableFieldState.dimensions, ...draggableFieldState.measures].map((d) => ({
+            label: d.name, 
+            value: d.fid,
+        }));
+    }, [draggableFieldState]);
+
+    const handleSelectFilterField = (fieldKey) => {
+        const existingFilterIdx = draggableFieldState.filters.findIndex((field) => field.fid === fieldKey)
+        if (existingFilterIdx >= 0) {
+            vizStore.setFilterEditing(existingFilterIdx);
+        } else {
+            const sourceKey = draggableFieldState.dimensions.find((field) => field.fid === fieldKey) 
+                ? "dimensions" 
+                : "measures"
+            const sourceIndex = sourceKey === "dimensions"
+                ? draggableFieldState.dimensions.findIndex((field) => field.fid === fieldKey)
+                : draggableFieldState.measures.findIndex((field) => field.fid === fieldKey);
+            vizStore.moveField(sourceKey, sourceIndex, "filters", 0);
+        }
+    };
+
     const Form = field
         ? ({
               quantitative: QuantitativeRuleForm,
@@ -82,12 +104,15 @@ const FilterEditDialog: React.FC = observer(() => {
 
     return uncontrolledField ? (
         <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>
+            <div className="px-4 py-1">
+                <div className="py-1">{t("form.name")}</div>
+                <DropdownSelect
+                    buttonClassName="w-96"
+                    className="mb-2"
+                    options={allFieldOptions}
+                    selectedKey={uncontrolledField.fid}
+                    onSelect={handleSelectFilterField}
+                />
                 <Form field={uncontrolledField} onChange={handleChange} />
                 <div className="mt-4">
                     <PrimaryButton