From eb79654ef8768819afd066e0e6b3a0c77ceaaee6 Mon Sep 17 00:00:00 2001
From: RunDevelopment <mitchi5000.ms@googlemail.com>
Date: Thu, 4 Apr 2024 21:41:48 +0200
Subject: [PATCH] Improved UI for dependency manager

---
 src/renderer/contexts/DependencyContext.tsx | 329 +++++++++++---------
 1 file changed, 178 insertions(+), 151 deletions(-)

diff --git a/src/renderer/contexts/DependencyContext.tsx b/src/renderer/contexts/DependencyContext.tsx
index 8836eab9a..09ad94a90 100644
--- a/src/renderer/contexts/DependencyContext.tsx
+++ b/src/renderer/contexts/DependencyContext.tsx
@@ -1,4 +1,4 @@
-import { DeleteIcon, DownloadIcon, InfoIcon } from '@chakra-ui/icons';
+import { CopyIcon, DeleteIcon, DownloadIcon, InfoIcon } from '@chakra-ui/icons';
 import {
     Accordion,
     AccordionButton,
@@ -13,6 +13,7 @@ import {
     Flex,
     HStack,
     Icon,
+    IconButton,
     Modal,
     ModalBody,
     ModalCloseButton,
@@ -32,8 +33,9 @@ import {
     useDisclosure,
 } from '@chakra-ui/react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { BsQuestionCircle, BsTerminalFill } from 'react-icons/bs';
+import { BsQuestionCircle } from 'react-icons/bs';
 import { HiOutlineRefresh } from 'react-icons/hi';
+import { MdSettings } from 'react-icons/md';
 import { useQuery } from 'react-query';
 import { createContext, useContext } from 'use-context-selector';
 import {
@@ -43,6 +45,7 @@ import {
     Package,
     PyPiName,
     PyPiPackage,
+    PythonInfo,
     Version,
 } from '../../common/common-types';
 import { log } from '../../common/log';
@@ -75,6 +78,18 @@ enum InstallMode {
     COPY = 'copy',
 }
 
+const getInstallCommand = (pkg: Package, pythonInfo: PythonInfo): string => {
+    const deps = pkg.dependencies.map((p) => `${p.pypiName}==${p.version}`);
+    const findLinks = getFindLinks(pkg.dependencies).flatMap((l) => ['--extra-index-url', l]);
+    const args = [pythonInfo.python, '-m', 'pip', 'install', '--upgrade', ...deps, ...findLinks];
+    return args.join(' ');
+};
+const getUninstallCommand = (pkg: Package, pythonInfo: PythonInfo): string => {
+    const deps = pkg.dependencies.map((p) => p.pypiName);
+    const args = [pythonInfo.python, '-m', 'pip', 'uninstall', ...deps];
+    return args.join(' ');
+};
+
 const formatBytes = (bytes: number): string => {
     const KB = 1024 ** 1;
     const MB = 1024 ** 2;
@@ -196,10 +211,7 @@ const PackageView = memo(
                                 </HStack>
                             </AccordionButton>
                             {missingPackages.length === 0 ? (
-                                <HStack
-                                    mr={1}
-                                    py={2}
-                                >
+                                <HStack py={2}>
                                     {outdatedPackages.length > 0 && (
                                         <Button
                                             colorScheme="blue"
@@ -225,10 +237,7 @@ const PackageView = memo(
                                     </Button>
                                 </HStack>
                             ) : (
-                                <HStack
-                                    mr={1}
-                                    py={2}
-                                >
+                                <HStack py={2}>
                                     <Button
                                         colorScheme="blue"
                                         isDisabled={isRunningShell}
@@ -449,77 +458,164 @@ const FeaturesSection = memo(({ processingDeps }: FeaturesSectionProps) => {
 interface PythonSectionProps {
     installMode: InstallMode;
     setInstallMode: (mode: InstallMode) => void;
-    isConsoleOpen: boolean;
-    setIsConsoleOpen: (open: boolean) => void;
+    consoleOutput: string;
     isDisabled: boolean;
 }
 const PythonSection = memo(
-    ({
-        installMode,
-        setInstallMode,
-        isConsoleOpen,
-        setIsConsoleOpen,
-        isDisabled,
-    }: PythonSectionProps) => {
+    ({ installMode, setInstallMode, isDisabled, consoleOutput }: PythonSectionProps) => {
         const { useSystemPython } = useSettings();
         const { pythonInfo } = useContext(BackendContext);
 
+        const [showMore, setShowMore] = useState(false);
+
+        const isConsoleOpen = installMode === InstallMode.NORMAL;
+        const consoleRef = useRef<HTMLTextAreaElement | null>(null);
+        useEffect(() => {
+            if (consoleRef.current) {
+                consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
+            }
+        }, [consoleOutput]);
+
         return (
-            <Flex
-                align="center"
-                w="full"
-            >
-                <Text
-                    flex="1"
-                    textAlign="left"
+            <Box w="full">
+                <Flex
+                    align="center"
+                    gap={2}
+                    w="full"
                 >
-                    Python ({pythonInfo.version}) [{useSystemPython ? 'System' : 'Integrated'}]
-                </Text>
-                <HStack gap={2}>
-                    <HStack>
-                        <HStack>
-                            <Select
-                                isDisabled={isDisabled}
-                                size="md"
-                                value={installMode}
-                                onChange={(e) => {
-                                    setInstallMode(e.target.value as InstallMode);
-                                }}
-                            >
-                                <option value={InstallMode.NORMAL}>Normal</option>
-                                <option value={InstallMode.COPY}>Manual/Copy</option>
-                            </Select>
+                    <Text
+                        flex="1"
+                        textAlign="left"
+                    >
+                        Python ({pythonInfo.version}) [{useSystemPython ? 'System' : 'Integrated'}]
+                    </Text>
+
+                    <Tooltip
+                        hasArrow
+                        borderRadius={8}
+                        label={
+                            <Markdown nonInteractive>
+                                {`Copy Python path to clipboard\n\nPython path is: \\\n\`${pythonInfo.python}\``}
+                            </Markdown>
+                        }
+                        maxWidth="none"
+                        openDelay={500}
+                        placement="top"
+                    >
+                        <IconButton
+                            aria-label="Copy Python path to clipboard"
+                            icon={<CopyIcon />}
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                                navigator.clipboard.writeText(pythonInfo.python).catch(log.error);
+                            }}
+                        />
+                    </Tooltip>
 
+                    <Button
+                        leftIcon={<MdSettings />}
+                        size="sm"
+                        onClick={() => setShowMore((prev) => !prev)}
+                    >
+                        Advanced
+                    </Button>
+                </Flex>
+
+                <Center
+                    animateOpacity
+                    as={Collapse}
+                    in={showMore}
+                    w="full"
+                >
+                    <Box my={2}>
+                        <Divider w="full" />
+
+                        <Flex
+                            gap={2}
+                            ml={4}
+                            my={2}
+                        >
+                            <Center>
+                                <Text whiteSpace="nowrap">Installation mode</Text>
+                            </Center>
                             <Tooltip
                                 hasArrow
                                 borderRadius={8}
                                 label={
                                     <Markdown nonInteractive>
-                                        {'The dependency install mode. ChaiNNer supports 2 ways of installing packages:\n\n' +
+                                        {'ChaiNNer supports 2 ways of installing packages:\n\n' +
                                             '- Normal: This is the default installation mode. This mode will automatically handle the dependency install for you and will report progress along the way.\n' +
-                                            '- Manual/Copy: Copy the pip install command to your clipboard for you to run in your own terminal. You will have to manually restart chaiNner afterwards.'}
+                                            '- Manual/Copy: Copy the pip install command to your clipboard for you to run in your own terminal. You will have to manually restart chaiNNer afterwards.'}
                                     </Markdown>
                                 }
                                 openDelay={500}
-                                px={2}
-                                py={0}
                             >
                                 <Center>
                                     <Icon as={BsQuestionCircle} />
                                 </Center>
                             </Tooltip>
-                        </HStack>
-                    </HStack>
-                    <Button
-                        aria-label={isConsoleOpen ? 'Hide Console' : 'View Console'}
-                        leftIcon={<BsTerminalFill />}
-                        size="sm"
-                        onClick={() => setIsConsoleOpen(!isConsoleOpen)}
-                    >
-                        {isConsoleOpen ? 'Hide Console' : 'View Console'}
-                    </Button>
-                </HStack>
-            </Flex>
+                            <Spacer />
+                            <Box>
+                                <Select
+                                    isDisabled={isDisabled}
+                                    size="sm"
+                                    value={installMode}
+                                    onChange={(e) => {
+                                        const mode = e.target.value as InstallMode;
+                                        setInstallMode(mode);
+                                    }}
+                                >
+                                    <option value={InstallMode.NORMAL}>Normal</option>
+                                    <option value={InstallMode.COPY}>Manual/Copy</option>
+                                </Select>
+                            </Box>
+                        </Flex>
+
+                        <Center
+                            animateOpacity
+                            as={Collapse}
+                            in={isConsoleOpen}
+                            w="full"
+                        >
+                            <Center w="full">
+                                <Textarea
+                                    readOnly
+                                    cursor="text"
+                                    fontFamily="monospace"
+                                    fontSize="sm"
+                                    h="8rem"
+                                    overflowY="scroll"
+                                    placeholder=""
+                                    ref={consoleRef}
+                                    sx={{
+                                        '&::-webkit-scrollbar': {
+                                            width: '8px',
+                                            borderRadius: '8px',
+                                            backgroundColor: 'rgba(0, 0, 0, 0)',
+                                        },
+                                        '&::-webkit-scrollbar-track': {
+                                            borderRadius: '8px',
+                                            width: '8px',
+                                        },
+                                        '&::-webkit-scrollbar-thumb': {
+                                            borderRadius: '8px',
+                                            backgroundColor: 'var(--bg-600)',
+                                        },
+                                    }}
+                                    value={consoleOutput.trimEnd()}
+                                    w="full"
+                                    onChange={(e) => e.preventDefault()}
+                                    onClick={(e) => e.preventDefault()}
+                                    onFocus={(e) => e.preventDefault()}
+                                />
+                            </Center>
+                        </Center>
+
+                        {!isConsoleOpen && <Divider w="full" />}
+                    </Box>
+                </Center>
+            </Box>
         );
     }
 );
@@ -531,7 +627,6 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
     const { backend, url, pythonInfo, backendDownRef, packages } = useContext(BackendContext);
     const { hasRelevantUnsavedChangesRef } = useContext(GlobalContext);
 
-    const [isConsoleOpen, setIsConsoleOpen] = useState(false);
     const [installMode, setInstallMode] = useState(InstallMode.NORMAL);
 
     const { data: installedPyPi, refetch: refetchInstalledPyPi } = useQuery({
@@ -552,18 +647,18 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
 
     const [modifyingPackage, setModifyingPackage] = useState<Package | null>(null);
 
-    const consoleRef = useRef<HTMLTextAreaElement | null>(null);
-    const [shellOutput, setShellOutput] = useState('');
+    const [consoleOutput, setConsoleOutput] = useState('Console output:\n\n');
     const [isRunningShell, setIsRunningShell] = useState(false);
-    const appendToOutput = useCallback(
-        (data: string) => {
-            setShellOutput((prev) => (prev + data).slice(-10_000));
+    const logOutput = useCallback(
+        (message: string) => {
+            setConsoleOutput((prev) => {
+                const cleaned = message.replace(/\r\n/g, '\n').trimEnd();
+                return `${prev + cleaned}\n`.slice(-10000);
+            });
         },
-        [setShellOutput]
+        [setConsoleOutput]
     );
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [installMessage, setInstallMessage] = useState<string | null>(null);
     const [individualProgress, setIndividualProgress] = useState<null | number>(null);
     const [overallProgress, setOverallProgress] = useState(0);
     const [eventSource] = useBackendSetupEventSource(url);
@@ -575,16 +670,18 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
             );
 
             if (f.message) {
-                setInstallMessage(f.message);
-                appendToOutput(f.message);
+                const progress = f.statusProgress
+                    ? ` (${Math.floor(f.statusProgress * 100)}%)`
+                    : '';
+                logOutput(f.message.trimEnd() + progress);
             }
         }
     });
 
-    const changePackages = (supplier: () => Promise<void>) => {
+    const changePackage = (pkg: Package, supplier: () => Promise<void>) => {
         if (isRunningShell) throw new Error('Cannot run two pip commands at once');
 
-        setShellOutput('');
+        setModifyingPackage(pkg);
         setIsRunningShell(true);
         setOverallProgress(0);
         setIndividualProgress(null);
@@ -592,7 +689,7 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
 
         supplier()
             .catch((error) => {
-                appendToOutput(`${String(error)}\n`);
+                logOutput(String(error));
             })
             .finally(() => {
                 refetchInstalledPyPi()
@@ -625,37 +722,19 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
     };
 
     const installPackage = (pkg: Package) => {
-        // TODO: Make this feature get the command from the backend directly
         if (installMode === InstallMode.COPY) {
-            const deps = pkg.dependencies.map((p) => `${p.pypiName}==${p.version}`);
-            const findLinks = getFindLinks(pkg.dependencies).flatMap((l) => [
-                '--extra-index-url',
-                l,
-            ]);
-            const args = [
-                pythonInfo.python,
-                '-m',
-                'pip',
-                'install',
-                '--upgrade',
-                ...deps,
-                ...findLinks,
-            ];
-            const cmd = args.join(' ');
-            copyCommandToClipboard(cmd);
+            // TODO: Make this feature get the command from the backend directly
+            copyCommandToClipboard(getInstallCommand(pkg, pythonInfo));
             return;
         }
-        setOverallProgress(0);
-        setModifyingPackage(pkg);
-        changePackages(() => backend.installPackage(pkg));
+
+        logOutput(`Installing ${pkg.name}...`);
+        changePackage(pkg, () => backend.installPackage(pkg));
     };
 
     const uninstallPackage = async (pkg: Package) => {
         if (installMode === InstallMode.COPY) {
-            const deps = pkg.dependencies.map((p) => p.pypiName);
-            const args = [pythonInfo.python, '-m', 'pip', 'uninstall', ...deps];
-            const cmd = args.join(' ');
-            copyCommandToClipboard(cmd);
+            copyCommandToClipboard(getUninstallCommand(pkg, pythonInfo));
             return;
         }
 
@@ -681,17 +760,10 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
             if (saveButton === 0) return;
         }
 
-        setOverallProgress(0);
-        setModifyingPackage(pkg);
-        changePackages(() => backend.uninstallPackage(pkg));
+        logOutput(`Uninstalling ${pkg.name}...`);
+        changePackage(pkg, () => backend.uninstallPackage(pkg));
     };
 
-    useEffect(() => {
-        if (consoleRef.current) {
-            consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
-        }
-    }, [shellOutput]);
-
     // whether we are current installing/uninstalling packages or refreshing the list of installed packages
     const currentlyProcessingDeps = installedPyPi === undefined || modifyingPackage !== null;
 
@@ -735,11 +807,10 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
                     <ModalBody>
                         <VStack w="full">
                             <PythonSection
+                                consoleOutput={consoleOutput}
                                 installMode={installMode}
-                                isConsoleOpen={isConsoleOpen}
                                 isDisabled={isRunningShell}
                                 setInstallMode={setInstallMode}
-                                setIsConsoleOpen={setIsConsoleOpen}
                             />
                             <Box w="full">
                                 <Text
@@ -791,50 +862,6 @@ export const DependencyProvider = memo(({ children }: React.PropsWithChildren<un
                                     })}
                                 </Accordion>
                             )}
-                            <Center
-                                animateOpacity
-                                as={Collapse}
-                                in={isConsoleOpen}
-                                w="full"
-                            >
-                                {/* <Collapse
-                                    animateOpacity
-                                    in={isConsoleOpen}
-                                > */}
-                                <Center w="full">
-                                    <Textarea
-                                        readOnly
-                                        cursor="default"
-                                        fontFamily="monospace"
-                                        h="150"
-                                        overflowY="scroll"
-                                        placeholder=""
-                                        ref={consoleRef}
-                                        sx={{
-                                            '&::-webkit-scrollbar': {
-                                                width: '8px',
-                                                borderRadius: '8px',
-                                                backgroundColor: 'rgba(0, 0, 0, 0)',
-                                            },
-                                            '&::-webkit-scrollbar-track': {
-                                                borderRadius: '8px',
-                                                width: '8px',
-                                            },
-                                            '&::-webkit-scrollbar-thumb': {
-                                                borderRadius: '8px',
-                                                backgroundColor: 'var(--bg-600)',
-                                            },
-                                        }}
-                                        value={shellOutput}
-                                        w="full"
-                                        onChange={(e) => e.preventDefault()}
-                                        onClick={(e) => e.preventDefault()}
-                                        onFocus={(e) => e.preventDefault()}
-                                    />
-                                </Center>
-                                {/* </Collapse> */}
-                            </Center>
-                            {isConsoleOpen && <Divider w="full" />}
                             <FeaturesSection processingDeps={currentlyProcessingDeps} />
                         </VStack>
                     </ModalBody>