fix: Refactor store selectors to only update on specific state updates

fairdataihub · Jan 16, 2025 · 5edc38d · 5edc38d
1 parent 89c8f7a
commit 5edc38d
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 6 deletions.
diff --git a/src/renderer/src/components/pages/EntitySelector/index.jsx b/src/renderer/src/components/pages/EntitySelector/index.jsx
@@ -0,0 +1,76 @@
+import GuidedModePage from "../../containers/GuidedModePage";
+import GuidedModeSection from "../../containers/GuidedModeSection";
+import DropDownNote from "../../utils/ui/DropDownNote";
+import { TextInput, Textarea, Text } from "@mantine/core";
+import ExternalLink from "../../buttons/ExternalLink";
+import useGlobalStore from "../../../stores/globalStore";
+import {
+  setGuidedDatasetName,
+  setGuidedDatasetSubtitle,
+} from "../../../stores/slices/guidedModeSlice";
+
+const NameAndSubtitlePage = () => {
+  const { guidedDatasetName, guidedDatasetSubtitle } = useGlobalStore((state) => ({
+    guidedDatasetName: state.guidedDatasetName,
+    guidedDatasetSubtitle: state.guidedDatasetSubtitle,
+  }));
+  return (
+    <GuidedModePage pageHeader="Dataset name and subtitle">
+      <GuidedModeSection>
+        <TextInput
+          label="Dataset Name:"
+          placeholder="Enter dataset name"
+          value={guidedDatasetName}
+          onChange={(event) => setGuidedDatasetName(event.target.value)}
+        />
+        <DropDownNote
+          dropDownIcon="info"
+          dropDownButtonText="What is the dataset name used for?"
+          dropDownNote={
+            <Text>
+              This field will be displayed in public as the title of the dataset once it is
+              published on the
+              <ExternalLink
+                href="https://sparc.science/"
+                buttonText="SPARC Data Portal"
+                buttonType="anchor"
+              />
+              . Please make sure that your dataset name is unique and relatively informative.
+            </Text>
+          }
+        />
+      </GuidedModeSection>
+      <GuidedModeSection>
+        <Textarea
+          label="Dataset Subtitle:"
+          placeholder="Enter dataset subtitle"
+          autosize
+          minRows={5}
+          value={guidedDatasetSubtitle}
+          onChange={(event) => setGuidedDatasetSubtitle(event.target.value)}
+          maxLength={255}
+        />
+        <Text align="right" style={{ marginTop: "-35px", zIndex: "10", marginRight: "10px" }}>
+          {255 - guidedDatasetSubtitle.length} characters remaining
+        </Text>
+        <DropDownNote
+          dropDownIcon="info"
+          dropDownButtonText="What is the dataset subtitle used for?"
+          dropDownNote={
+            <Text>
+              This field will become the short description visible immediately under the title of
+              your dataset once it is published on the
+              <ExternalLink
+                href="https://sparc.science/"
+                buttonText="SPARC Data Portal"
+                buttonType="anchor"
+              />
+            </Text>
+          }
+        />
+      </GuidedModeSection>
+    </GuidedModePage>
+  );
+};
+
+export default NameAndSubtitlePage;
diff --git a/src/renderer/src/components/pages/NameAndSubtitle/index.jsx b/src/renderer/src/components/pages/NameAndSubtitle/index.jsx
@@ -10,8 +10,11 @@ import {
 } from "../../../stores/slices/guidedModeSlice";
 
 const NameAndSubtitlePage = () => {
-  const guidedDatasetName = useGlobalStore((state) => state.guidedDatasetName);
-  const guidedDatasetSubtitle = useGlobalStore((state) => state.guidedDatasetSubtitle);
+  const { guidedDatasetName, guidedDatasetSubtitle } = useGlobalStore((state) => ({
+    guidedDatasetName: state.guidedDatasetName,
+    guidedDatasetSubtitle: state.guidedDatasetSubtitle,
+  }));
+
   return (
     <GuidedModePage pageHeader="Dataset name and subtitle">
       <GuidedModeSection>

diff --git a/src/renderer/src/components/shared/DatasetTreeViewRenderer/ContextMenu.jsx b/src/renderer/src/components/shared/DatasetTreeViewRenderer/ContextMenu.jsx
@@ -21,7 +21,13 @@ const ContextMenu = () => {
     contextMenuItemName,
     contextMenuItemType,
     contextMenuItemData,
-  } = useGlobalStore();
+  } = useGlobalStore((state) => ({
+    contextMenuIsOpened: state.contextMenuIsOpened,
+    contextMenuPosition: state.contextMenuPosition,
+    contextMenuItemName: state.contextMenuItemName,
+    contextMenuItemType: state.contextMenuItemType,
+    contextMenuItemData: state.contextMenuItemData,
+  }));
 
   const handleClickOutside = useCallback((event) => {
     const menuElement = document.getElementById("context-menu");

diff --git a/src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx b/src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx
@@ -87,7 +87,14 @@ const FolderItem = ({
   isFileSelected,
   allowStructureEditing,
 }) => {
-  const { folderMoveModeIsActive, contextMenuItemType, contextMenuItemData } = useGlobalStore();
+  const { folderMoveModeIsActive, contextMenuItemType, contextMenuItemData } = useGlobalStore(
+    (state) => ({
+      folderMoveModeIsActive: state.folderMoveModeIsActive,
+      contextMenuItemType: state.contextMenuItemType,
+      contextMenuItemData: state.contextMenuItemData,
+    })
+  );
+
   const [isOpen, setIsOpen] = useState(false);
   const { hovered, ref } = useHover();
 
@@ -217,7 +224,11 @@ const FolderItem = ({
 
 const DatasetTreeViewRenderer = ({ folderActions, fileActions, allowStructureEditing }) => {
   const { renderDatasetStructureJSONObj, datasetStructureSearchFilter, folderMoveModeIsActive } =
-    useGlobalStore();
+    useGlobalStore((state) => ({
+      renderDatasetStructureJSONObj: state.renderDatasetStructureJSONObj,
+      datasetStructureSearchFilter: state.datasetStructureSearchFilter,
+      folderMoveModeIsActive: state.folderMoveModeIsActive,
+    }));
 
   const searcDebounceTime = 300; // Set the debounce time for the search filter (in milliseconds)
 

diff --git a/src/renderer/src/components/shared/manifest/DatasetEntityManager.jsx b/src/renderer/src/components/shared/manifest/DatasetEntityManager.jsx
@@ -25,7 +25,9 @@ const DatasetEntityManager = ({
   entityTypeStringPlural,
   entityTypePrefix,
 }) => {
-  const { datasetEntityObj } = useGlobalStore();
+  const { datasetEntityObj } = useGlobalStore((state) => ({
+    datasetEntityObj: state.datasetEntityObj,
+  }));
   const [newEntityName, setNewEntityName] = useState("");
 
   const isNewEntityNameValid = window.evaluateStringAgainstSdsRequirements?.(

diff --git a/src/renderer/src/sections/guided_mode/guided_curate_dataset.html b/src/renderer/src/sections/guided_mode/guided_curate_dataset.html
@@ -1398,6 +1398,10 @@ <h1 class="text-sub-step-title">Subjects specification</h1>
           class="guided--page"
           data-page-name="Z addition"
           data-page-set="entity-selector-page"
+          data-entity-type-string-singular="z"
+          data-entity-type-string-plural="zs"
+          data-entity-type="z-entities"
+          data-entity-type-prefix="z-"
         >
           <div class="guided--section">
             <h1 class="text-sub-step-title">Map data to z</h1>