wip: Updated text for demo

Author: JacobiClark

src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx

@@ -39,6 +39,7 @@ const fileIconMap = {
   xml: <IconFileTypeXml size={FILE_ICON_SIZE} />,
   zip: <IconFileTypeZip size={FILE_ICON_SIZE} />,
   rar: <IconFileTypeZip size={FILE_ICON_SIZE} />,
+  jp2: <IconPhoto size={FILE_ICON_SIZE} />,
 };
 
 const getFileTypeIcon = (fileName) => {
@@ -48,8 +49,7 @@ const getFileTypeIcon = (fileName) => {
 
 // FileItem component
 const FileItem = ({ name, content, onFileClick, getFileBackgroundColor }) => {
-  const filesRelativePath = content.relativePath;
-  const fileBackgroundColor = getFileBackgroundColor(filesRelativePath);
+  const fileBackgroundColor = getFileBackgroundColor(content.relativePath);
   return (
     <div
       style={{
@@ -68,14 +68,7 @@ const FileItem = ({ name, content, onFileClick, getFileBackgroundColor }) => {
 };
 
 // FolderItem component
-const FolderItem = ({
-  name,
-  content,
-  onFolderClick,
-  onFileClick,
-  getFolderBackgroundColor,
-  getFileBackgroundColor,
-}) => {
+const FolderItem = ({ name, content, onFolderClick, onFileClick, getFileBackgroundColor }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { hovered, ref } = useHover();
 
@@ -115,7 +108,6 @@ const FolderItem = ({
             content={content.folders[folderName]}
             onFolderClick={onFolderClick}
             onFileClick={onFileClick}
-            getFolderBackgroundColor={getFolderBackgroundColor}
             getFileBackgroundColor={getFileBackgroundColor}
           />
         ))}
@@ -138,7 +130,6 @@ const DatasetTreeView = ({
   datasetStructure,
   onFolderClick,
   onFileClick,
-  getFolderBackgroundColor,
   getFileBackgroundColor,
 }) =>
   !datasetStructure?.folders && !datasetStructure?.files ? null : (
@@ -159,7 +150,6 @@ const DatasetTreeView = ({
           content={datasetStructure.folders[folderName]}
           onFolderClick={onFolderClick}
           onFileClick={onFileClick}
-          getFolderBackgroundColor={getFolderBackgroundColor}
           getFileBackgroundColor={getFileBackgroundColor}
         />
       ))}

src/renderer/src/components/shared/manifest/ManifestEntitySelector.jsx

@@ -34,31 +34,27 @@ const ManifestEntitySelector = () => {
     toggleRelativeFilePathForManifestEntity(entityType, activeEntity, fileContents.relativePath);
   };
 
-  const getFolderBackgroundColor = (folderRelativePath) => {
-    const folderIsSelected = getEntityForRelativePath(folderRelativePath);
-    return folderIsSelected ? "blue" : "white";
-  };
-
   const getFileBackgroundColor = (fileRelativePath) => {
-    if (fileRelativePath === "primary/sub-1/code_description.xlsx") {
-      console.log("Active entity:", activeEntity);
+    const filesEntity = getEntityForRelativePath(fileRelativePath);
+    if (!filesEntity) {
+      return null;
     }
-    const fileIsSelected = getEntityForRelativePath(fileRelativePath);
-    if (fileIsSelected) {
-      console.log("File is selected:", fileRelativePath);
+    if (filesEntity === "sub-2") {
+      console.log(fileRelativePath + " is sub-2");
     }
-    return fileIsSelected ? "blue" : "white";
+
+    return filesEntity === activeEntity ? "var(--color-transparent-soda-green)" : "red";
   };
 
   return (
     <FullWidthContainer>
       <Grid gutter="md">
         <Grid.Col span={4} style={{ position: "sticky", top: "20px" }}>
-          <Paper shadow="lg" p="lg" radius="md" withBorder>
-            <Text size="xl" weight={700} align="center" color="dark">
-              Select Entity
+          <Paper shadow="lg" p="sm" radius="md" withBorder>
+            <Text size="xl" weight={700} align="center" c="dark">
+              Subject list
             </Text>
-            <Divider my="lg" />
+            <Divider my="sm" />
             <Stack gap="xs">
               {entityList.map((entity) => (
                 <Button
@@ -83,7 +79,6 @@ const ManifestEntitySelector = () => {
               datasetStructure={datasetStructureJSONObj}
               onFolderClick={handleFolderClick}
               onFileClick={handleFileClick}
-              getFolderBackgroundColor={getFolderBackgroundColor}
               getFileBackgroundColor={getFileBackgroundColor}
             />
           </Paper>

src/renderer/src/sections/guided_mode/guided_curate_dataset.html

@@ -2634,25 +2634,26 @@ <h2 class="text-sub-step-title">Preview/Edit manifest files</h2>
           id="guided-manifest-subject-entity-selector-tab"
           class="guided--page"
           data-component-type="guided-mode-page"
-          data-page-header="Denote subject folders"
+          data-page-header="Indicate subject folders/files"
           data-page-name="Manifest subject selection"
         ></div>-->
 
         <div
           class="guided--page"
           id="guided-manifest-subject-entity-selector-tab"
-          data-page-name="Denote subject folders"
+          data-page-name="Map Folders/Files to Subjects"
         >
           <div class="guided--section">
-            <h1 class="text-sub-step-title">Manifest files</h1>
+            <h1 class="text-sub-step-title">Map Folders/Files to Subjects</h1>
             <p class="help-text">
-              The SPARC guidelines require all datasets to include metadata files called manifest
-              files. One manifest file must be included in each high level folder. Manifest files
-              are intended to contain information about all of the data files in its high level
-              folder.
+              The SPARC guidelines require all folders and files related to subjects to be mapped to
+              their respective subjects in the manifest file.
+            </p>
+            <p class="help-text">
+              To map folders and files to subjects in the interface below, first select a subject
+              from the list, then choose the folders and files associated with that subject.
             </p>
           </div>
-
           <div data-component-type="manifest-entity-selector" class="guided--section"></div>
         </div>
         <div

src/renderer/src/stores/slices/manifestEntitySelectorSlice.js

@@ -127,5 +127,14 @@ export const getEntityForRelativePath = (relativePath) => {
   const manifestEntityObj = useGlobalStore((state) => state.manifestEntityObj);
   const entityType = useGlobalStore((state) => state.entityType);
   const activeEntity = useGlobalStore((state) => state.activeEntity);
-  return manifestEntityObj?.[entityType]?.[activeEntity]?.includes(relativePath);
+
+  if (!entityType || !activeEntity) {
+    return null;
+  }
+
+  if (manifestEntityObj?.[entityType]?.[activeEntity]?.includes(relativePath)) {
+    return activeEntity;
+  } else {
+    return null;
+  }
 };