20949: MAJOR Added additional FeaturesAttributesDependencies guidance (…

…#7)
howsoai · Jul 17, 2024 · d8f5692 · d8f5692
1 parent e9389e8
commit d8f5692
Show file tree

Hide file tree

Showing 8 changed files with 283 additions and 101 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,5 +1,31 @@
 # Migration guide
 
+## 2.x
+
+Flowbite updates 0.7 - 0.10
+
+`tailwind.config.js` content path:
+
+old: "node\*modules/flowbite-react/lib/esm/\*\*/\_.js"
+
+new: "node\*modules/flowbite-react/dist/esm/\*\*/\_.mjs" - Please use (`flowbite.content()`)
+
+```js
+const flowbite = require("flowbite-react/tailwind");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // ...
+    flowbite.content(),
+  ],
+  plugins: [
+    // ...
+    flowbite.plugin(),
+  ],
+};
+```
+
 ## 1.x Feature Attributes updated to include Infer params
 
 This breaking change modifies the data structures for FeatureAttributes.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,9 +37,7 @@
   "peerDependencies": {
     "@hookform/error-message": "^2.0.1",
     "@howso/openapi-client": "^1.0.0",
-    "@howso/react-tailwind-flowbite-components": "^3.1.0",
-    "flowbite": "^2.3.0",
-    "flowbite-react": "^0.7.2",
+    "@howso/react-tailwind-flowbite-components": "^4.0.2",
     "jotai": "^2.8.3",
     "lodash": "^4.17.0",
     "react": "^18.0.0",
@@ -58,7 +56,7 @@
     "@fontsource/inter": "^5.0.5",
     "@hookform/error-message": "^2.0.1",
     "@howso/openapi-client": "^1.0.0",
-    "@howso/react-tailwind-flowbite-components": "^3.1.0",
+    "@howso/react-tailwind-flowbite-components": "^4.0.2",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/addon-actions": "^8.1.10",
@@ -111,4 +109,4 @@
       "prettier --write"
     ]
   }
-} 
+}
diff --git a/public/locales/howso-engine-react-display-components/en.json b/public/locales/howso-engine-react-display-components/en.json
@@ -249,6 +249,11 @@
         "update": "Update"
       },
       "help": "Select features with inter-dependent relationships. This should be used when there are multi-type features that tightly depend on other multi-type features. Setting `null` values may effect dependencies. `Null`s can be managed through the feature's configurations.",
+      "guidance": {
+        "expandControl": "More information",
+        "1": "Be aware that dependencies introduce further constrains to data and so several dependencies or dependencies on already constrained datasets may restrict which operations are possible while maintaining the dependency. This restricts the cases that can be selected as neighbors to ones that satisfy the dependency, if possible. When not possible, the dependency may not be maintained. ",
+        "2": "As a rule of thumb, sets of features that have dependency relationships should generally not include more than 1 continuous feature, unless the continuous features have a small number of values that are commonly used."
+      },
       "state": {
         "empty": "No features were found in the dataset."
       }

diff --git a/...atureAttributes/FeaturesAttributesDependencies/FeaturesAttributesDependencies.stories.tsx b/...atureAttributes/FeaturesAttributesDependencies/FeaturesAttributesDependencies.stories.tsx
@@ -138,7 +138,9 @@ type Story = StoryObj<typeof FeaturesAttributesDependencies>;
 export const Default: Story = {
   // More on args: https://storybook.js.org/docs/react/writing-stories/args
   args: {
-    paramsAtom: getInferFeatureAttributesParamsAtom(sampleFeaturesAttributes),
+    paramsAtom: getInferFeatureAttributesParamsAtom({
+      features: sampleFeaturesAttributes,
+    }),
   },
 };
 

diff --git a/...nents/FeatureAttributes/FeaturesAttributesDependencies/FeaturesAttributesDependencies.tsx b/...nents/FeatureAttributes/FeaturesAttributesDependencies/FeaturesAttributesDependencies.tsx
@@ -9,6 +9,7 @@ import {
   Tooltip,
 } from "flowbite-react";
 import {
+  ExpandCollapseControl,
   PrimaryButton,
   ReadabilityConstraint,
   TableHeadCell,
@@ -18,6 +19,7 @@ import {
 import { useDefaultTranslation } from "@/hooks";
 import { type InferFeatureAttributesParamsAtom } from "../hooks";
 import { FeatureAttributesIndex } from "../types";
+import { twMerge } from "tailwind-merge";
 
 export type FeaturesAttributesDependenciesProps = {
   paramsAtom: InferFeatureAttributesParamsAtom;
@@ -39,6 +41,8 @@ export const FeaturesAttributesDependencies: FC<
   );
   const features = Object.keys(params.features || {});
 
+  const [isInfoOpen, setIsInfoOpen] = useState(false);
+
   const onUpdate: ButtonProps["onClick"] = (event) => {
     event.preventDefault();
     setParams((params) => {
@@ -73,7 +77,7 @@ export const FeaturesAttributesDependencies: FC<
 
   return (
     <>
-      <ReadabilityConstraint>
+      <ReadabilityConstraint className="mx-auto">
         <HelperText className="mb-4" color={"gray"}>
           {t("FeatureAttributes.FeaturesAttributesDependencies.help")}
         </HelperText>
@@ -143,16 +147,53 @@ export const FeaturesAttributesDependencies: FC<
               </Table.Body>
             </Table>
           </div>
-          <div className="flex justify-end">
-            <PrimaryButton disabled={!features.length} onClick={onUpdate}>
-              <UpdateIcon className="mr-1 h-5 w-5" />
-              <span>
-                {t(
-                  "FeatureAttributes.FeaturesAttributesDependencies.actions.update",
+          <ReadabilityConstraint className="mx-auto">
+            <div className="flex justify-between mb-4">
+              <div>
+                <ExpandCollapseControl
+                  isExpanded={isInfoOpen}
+                  // className={twMerge("mb-4 p-0 text-sm font-normal")}
+                  onClick={() => {
+                    setIsInfoOpen((previous) => !previous);
+                  }}
+                >
+                  {t(
+                    "FeatureAttributes.FeaturesAttributesDependencies.guidance.expandControl",
+                  )}
+                </ExpandCollapseControl>
+              </div>
+              <div>
+                <PrimaryButton disabled={!features.length} onClick={onUpdate}>
+                  <UpdateIcon className="mr-1 h-5 w-5" />
+                  <span>
+                    {t(
+                      "FeatureAttributes.FeaturesAttributesDependencies.actions.update",
+                    )}
+                  </span>
+                </PrimaryButton>
+              </div>
+            </div>
+
+            <div>
+              <div
+                className={twMerge(
+                  "max-h-0 overflow-hidden transition-[max-height] duration-200 ease-in-out",
+                  isInfoOpen && "max-h-[99rem]", // I wonder if this is enough...
                 )}
-              </span>
-            </PrimaryButton>
-          </div>
+              >
+                <HelperText className="mb-4" color={"gray"}>
+                  {t(
+                    "FeatureAttributes.FeaturesAttributesDependencies.guidance.1",
+                  )}
+                </HelperText>
+                <HelperText color={"gray"}>
+                  {t(
+                    "FeatureAttributes.FeaturesAttributesDependencies.guidance.2",
+                  )}
+                </HelperText>
+              </div>
+            </div>
+          </ReadabilityConstraint>
         </>
       ) : (
         <Alert color="warning" icon={WarningIcon}>

diff --git a/src/components/FeatureAttributes/FeaturesAttributesRows/FeaturesAttributesRows.tsx b/src/components/FeatureAttributes/FeaturesAttributesRows/FeaturesAttributesRows.tsx
@@ -425,6 +425,10 @@ type MapDependenciesControlProps = Pick<
 >;
 const MapDependenciesControl: FC<MapDependenciesControlProps> = (props) => {
   const { t } = useDefaultTranslation();
+  const params = useAtomValue(props.paramsAtom);
+  const featuresAttributes = params.features || {};
+  const features = Object.keys(featuresAttributes);
+
   const [isOpen, setIsOpen] = useState(false);
   const onOpen = () => {
     setIsOpen(true);
@@ -434,9 +438,10 @@ const MapDependenciesControl: FC<MapDependenciesControlProps> = (props) => {
   };
 
   const label = t(translations.actions.mapDependents);
+
   return (
     <>
-      <Button color={"light"} onClick={onOpen}>
+      <Button color={"light"} onClick={onOpen} disabled={!features.length}>
         <MapDependentFeatureAttributesIcon className={"mr-1"} />
         {label}
       </Button>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,16 +1,15 @@
+import flowbite from "flowbite-react/tailwind";
 import { standardTailwindConfigThemeExtend } from "@howso/react-tailwind-flowbite-components";
-import flowbite from "flowbite/plugin";
 
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
+    flowbite.content(),
     "./src/**/*.{js,ts,jsx,tsx}",
     "./storybook/**/*.{jsx,tsx,html}",
-    "./node_modules/flowbite/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
     "./node_modules/@howso/react-tailwind-flowbite-components/lib/index.esm.js",
   ],
-  plugins: [flowbite({ charts: true })],
+  plugins: [flowbite.plugin({ charts: true })],
   theme: {
     extend: standardTailwindConfigThemeExtend,
   },