fix: show on results only when neither datasets nor databases match; #81

Author: elainefan331

src/pages/SearchPage.tsx

@@ -327,6 +327,19 @@ const SearchPage: React.FC = () => {
     </>
   );
 
+  // check if has database/dataset matches
+  const hasDbMatches = !!keywordInput && registryMatches.length > 0;
+  const hasDatasetMatches = Array.isArray(results) && results.length > 0;
+  // when backend find nothing
+  const backendEmpty =
+    !Array.isArray(results) && (results as any)?.msg === "empty output";
+
+  // show red message only if nothing matched at all
+  const showNoResults =
+    hasSearched &&
+    !loading &&
+    !hasDbMatches &&
+    (!hasDatasetMatches || backendEmpty);
   return (
     <Container
       maxWidth={false}
@@ -414,8 +427,8 @@ const SearchPage: React.FC = () => {
                 color: Colors.darkPurple,
               }}
             >
-              Use the filters to search for datasets or subjects based on
-              metadata.
+              Use the filters and click submit to search for datasets or
+              subjects based on metadata.
             </Typography>
           )}
         </Box>
@@ -523,6 +536,138 @@ const SearchPage: React.FC = () => {
 
           {/* results */}
           {hasSearched && (
+            <Box mt={4}>
+              {loading ? (
+                <Box textAlign="center" my={4}>
+                  <CircularProgress />
+                  <Typography mt={2} color="text.secondary">
+                    Loading search results...
+                  </Typography>
+                </Box>
+              ) : (
+                <>
+                  {/* Only show header when there are dataset hits */}
+                  {hasDatasetMatches && (
+                    <Typography
+                      variant="h6"
+                      sx={{ borderBottom: "1px solid lightgray", mb: 2 }}
+                    >
+                      {`Showing ${results.length} ${
+                        isDataset ? "Datasets" : "Subjects"
+                      }`}
+                    </Typography>
+                  )}
+
+                  {/* pagination + cards (unchanged, but guard with hasDatasetMatches) */}
+                  {hasDatasetMatches && (
+                    <>
+                      {results.length >= 50 && (
+                        <Box textAlign="center" mt={2}>
+                          <Button
+                            variant="outlined"
+                            onClick={handleLoadMore}
+                            sx={{
+                              color: Colors.purple,
+                              borderColor: Colors.purple,
+                              "&:hover": {
+                                transform: "scale(1.05)",
+                                borderColor: Colors.purple,
+                              },
+                            }}
+                          >
+                            Load Extra 50 Results
+                          </Button>
+                        </Box>
+                      )}
+
+                      <Box textAlign="center" mt={2} mb={2}>
+                        <Pagination
+                          count={Math.ceil(results.length / itemsPerPage)}
+                          page={page}
+                          onChange={handlePageChange}
+                          showFirstButton
+                          showLastButton
+                          siblingCount={2}
+                          sx={{
+                            "& .MuiPagination-ul": { justifyContent: "center" },
+                            "& .MuiPaginationItem-root": {
+                              color: Colors.darkPurple,
+                            },
+                            "& .MuiPaginationItem-root.Mui-selected": {
+                              backgroundColor: Colors.purple,
+                              color: "white",
+                              fontWeight: "bold",
+                              "&:hover": {
+                                backgroundColor: Colors.secondaryPurple,
+                              },
+                            },
+                          }}
+                        />
+                      </Box>
+
+                      {results.length > 0 &&
+                        paginatedResults.length > 0 &&
+                        paginatedResults.map((item, idx) => {
+                          try {
+                            const parsedJson = JSON.parse(item.json);
+                            const globalIndex = (page - 1) * itemsPerPage + idx;
+
+                            const isDataset =
+                              parsedJson?.value?.subj &&
+                              Array.isArray(parsedJson.value.subj);
+
+                            return isDataset ? (
+                              <DatasetCard
+                                key={idx}
+                                index={globalIndex}
+                                dbname={item.dbname}
+                                dsname={item.dsname}
+                                parsedJson={parsedJson}
+                                onChipClick={handleChipClick}
+                                keyword={formData.keyword} // for keyword highlight
+                              />
+                            ) : (
+                              <SubjectCard
+                                key={idx}
+                                index={globalIndex}
+                                {...item}
+                                parsedJson={parsedJson}
+                                onChipClick={handleChipClick}
+                              />
+                            );
+                          } catch (e) {
+                            console.error(
+                              `Failed to parse JSON for item #${idx}`,
+                              e
+                            );
+                            return null;
+                          }
+                        })}
+                    </>
+                  )}
+
+                  {/* Single place to show the red message */}
+                  {showNoResults && (
+                    <Typography sx={{ color: Colors.error }}>
+                      No results found based on your criteria. Please adjust the
+                      filters and try again.
+                    </Typography>
+                  )}
+
+                  {hasSearched &&
+                    !loading &&
+                    !Array.isArray(results) &&
+                    results?.msg !== "empty output" && (
+                      <Typography sx={{ color: Colors.error }}>
+                        Something went wrong. Please try again later.
+                      </Typography>
+                    )}
+                </>
+              )}
+            </Box>
+          )}
+
+          {/* {hasSearched && (
             <Box mt={4}>
               {loading ? (
                 <Box textAlign="center" my={4}>
@@ -640,7 +785,7 @@ const SearchPage: React.FC = () => {
                 </Typography>
               )}
             </Box>
-          )}
+          )} */}
         </Box>
 
         {/* mobile version filters */}