From 0532cdd73f493f2e4bf92b71118d8b464052d4bf Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Sun, 9 Jun 2024 17:24:27 +0200
Subject: [PATCH] Website: improve wordings and other minor fixes

---
 website/src/components/Lambda.tsx        |  4 +-
 website/src/components/PositionLink.tsx  | 12 ++--
 website/src/components/ResultPreview.tsx | 84 +++++++++++++-----------
 website/src/models/nix.ts                | 16 +++++
 4 files changed, 72 insertions(+), 44 deletions(-)

diff --git a/website/src/components/Lambda.tsx b/website/src/components/Lambda.tsx
index c65ce1c..f8617c2 100644
--- a/website/src/components/Lambda.tsx
+++ b/website/src/components/Lambda.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import type { SVGProps } from "react";
 
-export function NixLambda(props: SVGProps<SVGSVGElement>) {
+export function Lambda(props: SVGProps<SVGSVGElement>) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
       <path
@@ -12,7 +12,7 @@ export function NixLambda(props: SVGProps<SVGSVGElement>) {
   );
 }
 
-export function NixBuiltin(props: SVGProps<SVGSVGElement>) {
+export function Nix(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
       className="svg-icon"
diff --git a/website/src/components/PositionLink.tsx b/website/src/components/PositionLink.tsx
index 321e002..8dc6356 100644
--- a/website/src/components/PositionLink.tsx
+++ b/website/src/components/PositionLink.tsx
@@ -52,7 +52,9 @@ export const PositionLink = ({
             component={"div"}
             sx={{ color: "text.secondary", pb: 2 }}
           >
-            This function is not declared in a .nix file
+            This function is not defined in a .nix file. It is likely a builtins
+            function or an alias of a builtins function. builtins functions are
+            predefined functions provided by Nix.
           </Typography>
           {!is_primop && (
             <Typography
@@ -60,7 +62,7 @@ export const PositionLink = ({
               component={"div"}
               sx={{ color: "text.secondary", pb: 2 }}
             >
-              This is very likely a bug in noogle please report this error.
+              This is very likely a bug in Noogle please report this error.
             </Typography>
           )}
         </>
@@ -84,7 +86,7 @@ export const PositionLink = ({
                 sx={{ textTransform: "none", my: 1, placeSelf: "start" }}
                 startIcon={<EditIcon />}
               >
-                Edit source
+                Edit Source Code
               </Button>
             </Link>
           )}
@@ -108,7 +110,7 @@ export const PositionLink = ({
                     }}
                     startIcon={<LinkIcon />}
                   >
-                    Attribute position
+                    View Attribute Definition
                   </Button>
                 </Link>
               )}
@@ -130,7 +132,7 @@ export const PositionLink = ({
                     }}
                     startIcon={<LinkIcon />}
                   >
-                    Underlying function
+                    See Function Definition
                   </Button>
                 </Link>
               )}
diff --git a/website/src/components/ResultPreview.tsx b/website/src/components/ResultPreview.tsx
index 55883c4..d5314be 100644
--- a/website/src/components/ResultPreview.tsx
+++ b/website/src/components/ResultPreview.tsx
@@ -7,9 +7,10 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
+  Tooltip,
 } from "@mui/material";
 import { PagefindResult } from "./Pagefind";
-import { NixLambda, NixBuiltin } from "./Lambda";
+import { Lambda, Nix } from "./Lambda";
 import { data } from "@/models/data";
 import { findType } from "@/models/nix";
 
@@ -30,15 +31,7 @@ export const ResultPreview = (props: ResultPreviewProps) => {
   const cntAliases = item?.meta?.aliases?.length;
   const category = item?.meta?.path?.[0];
 
-  console.log({ isFunctor, item, signature });
-
-  const icon = isFunctor ? (
-    <DataObjectIcon />
-  ) : isPrimop ? (
-    <NixBuiltin />
-  ) : (
-    <NixLambda />
-  );
+  const icon = isFunctor ? <DataObjectIcon /> : isPrimop ? <Lambda /> : <Nix />;
   return (
     <>
       <ListItem
@@ -46,16 +39,26 @@ export const ResultPreview = (props: ResultPreviewProps) => {
         aria-label={`item-${meta.title}`}
       >
         <ListItemAvatar sx={{ color: "primary.light", mr: 1.5 }}>
-          <Badge
-            badgeContent={category || "N/A"}
-            color="primary"
-            anchorOrigin={{
-              vertical: "bottom",
-              horizontal: "right",
-            }}
+          <Tooltip
+            title={
+              isFunctor
+                ? "This function is implemented using a functor. Functors are polymorphic data structures that act both as attribute sets and functions."
+                : isPrimop
+                ? "This function is directly implemented using a builtins function."
+                : `This function is defined in ${category}.`
+            }
           >
-            <Avatar sx={{ bgcolor: "primary.light" }}>{icon}</Avatar>
-          </Badge>
+            <Badge
+              badgeContent={isPrimop ? "builtin" : category || "N/A"}
+              color="primary"
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "right",
+              }}
+            >
+              <Avatar sx={{ bgcolor: "primary.light" }}>{icon}</Avatar>
+            </Badge>
+          </Tooltip>
         </ListItemAvatar>
         <Box>
           <ListItemText
@@ -65,6 +68,7 @@ export const ResultPreview = (props: ResultPreviewProps) => {
             }}
             secondaryTypographyProps={{
               variant: "body1",
+              color: "text.primary",
             }}
             primary={
               <Link rel="canonical" href={`${url}`}>
@@ -96,28 +100,34 @@ export const ResultPreview = (props: ResultPreviewProps) => {
               />
             )}
             {!!cntAliases && (
-              <Chip
-                size="small"
-                variant="outlined"
-                color="secondary"
-                label={`Aliases: ${cntAliases}`}
-              />
+              <Tooltip title="This function has aliases, which are alternative names for the same function, either shorter or longer.">
+                <Chip
+                  size="small"
+                  variant="outlined"
+                  color="primary"
+                  label={`Aliases: ${cntAliases}`}
+                />
+              </Tooltip>
             )}
             {isFunctor && (
-              <Chip
-                size="small"
-                variant="outlined"
-                color="warning"
-                label="Functor"
-              />
+              <Tooltip title="This function is implemented using a functor. In Nix, functors are polymorphic data structures that can act both as attribute sets and functions.">
+                <Chip
+                  size="small"
+                  variant="outlined"
+                  color="warning"
+                  label="Functor"
+                />
+              </Tooltip>
             )}
             {isPrimop && (
-              <Chip
-                size="small"
-                variant="outlined"
-                color="info"
-                label="Primop"
-              />
+              <Tooltip title="This function is directly implemented using a builtins function. Builtins functions are predefined by Nix and provide its core functionality.">
+                <Chip
+                  size="small"
+                  variant="outlined"
+                  color="warning"
+                  label="builtin"
+                />
+              </Tooltip>
             )}
           </Box>
         </Box>
diff --git a/website/src/models/nix.ts b/website/src/models/nix.ts
index a48007c..933c102 100644
--- a/website/src/models/nix.ts
+++ b/website/src/models/nix.ts
@@ -80,10 +80,26 @@ export function interpretType(
   return { args: ["any"], returns: ["any"] };
 }
 
+/**
+ * Find the type of a function that is a builtin or by looking at its builtins aliases
+ */
 export function findType(item: Doc): string | undefined {
+  if (item.meta.is_primop && !item.meta.signature && item.meta.aliases) {
+    for (const alias of item.meta.aliases) {
+      const type = findTypeByPath(alias);
+      if (type) {
+        return type;
+      }
+    }
+  }
+
   return findTypeByPath(item.meta.path);
 }
 
+/**
+ * Find the type of a builtins.* function by looking at its path.
+ * Noogle has a hand-crafted list of builtin types that cannot be retrieved otherwise.
+ */
 export function findTypeByPath(path: string[]): string | undefined {
   if (path.length === 2 && path[0] === "builtins") {
     const fallbackType = builtinTypes[path[1]];