feat(app): add file icons in autocomplete and graph

Author: matejchalk

scripts/fetch-icons.ts

@@ -21,11 +21,11 @@ async function fetchIcons(): Promise<void> {
     '[email protected]:PKief/vscode-material-icon-theme.git',
     vsCodeExtDirName,
   );
-  await fse.copy(resolve(vsCodeExtDirPath, 'icons'), iconsDirPath);
   execSync('npm install', {
     cwd: vsCodeExtDirPath,
     stdio: 'inherit',
   });
+  await fse.copy(resolve(vsCodeExtDirPath, 'icons'), iconsDirPath);
   execSync('npm run build', {
     cwd: vsCodeExtDirPath,
     stdio: 'inherit',

src/app/components/DepGraph.tsx

@@ -3,6 +3,7 @@ import React, { FC, useEffect, useRef, useState } from 'react';
 import { Edge, Network, Node } from 'vis-network/standalone';
 import Worker from 'worker-loader!../workers/graph.worker';
 import { filenameFromPath } from '../utils/format';
+import { getIconUrlByName, getIconUrlForPath } from '../utils/icons';
 import { DepGraph, Filters, ModuleDeps } from '../utils/types';
 
 type Props = {
@@ -37,6 +38,7 @@ const DepGraph: FC<Props> = ({ moduleDeps, filters }) => {
           id: path,
           label: isLocal ? filenameFromPath(path) : path,
           title: path,
+          image: isLocal ? getIconUrlForPath(path) : getIconUrlByName('npm'),
         }),
       );
 
@@ -53,7 +55,8 @@ const DepGraph: FC<Props> = ({ moduleDeps, filters }) => {
         { edges, nodes },
         {
           nodes: {
-            shape: 'box',
+            shape: 'image',
+            image: getIconUrlByName('file'),
           },
           edges: {
             arrows: 'to',

src/app/components/SelectModules.tsx

@@ -1,11 +1,13 @@
-import { TextField } from '@material-ui/core';
+import { Grid, Icon, TextField, Typography } from '@material-ui/core';
 import {
   Autocomplete,
   AutocompleteRenderInputParams,
   FilterOptionsState,
 } from '@material-ui/lab';
 import { matchSorter } from 'match-sorter';
 import React, { ChangeEvent, FC } from 'react';
+import { dirnameFromPath, filenameFromPath } from '../utils/format';
+import { getIconUrlForPath } from '../utils/icons';
 import { Module } from '../utils/types';
 
 type Props = {
@@ -27,6 +29,26 @@ const SelectModules: FC<Props> = ({ modules, label, value, onChange }) => {
   const renderInput = (params: AutocompleteRenderInputParams) => (
     <TextField {...params} label={label} variant="outlined" />
   );
+  const renderOption = (option: Module) => (
+    <Grid container spacing={2} alignItems="center">
+      <Grid item>
+        <Icon fontSize="small" style={{ textAlign: 'center' }}>
+          <img
+            src={getIconUrlForPath(option.path)}
+            style={{ display: 'flex', height: 'inherit', width: 'inherit' }}
+          />
+        </Icon>
+      </Grid>
+      <Grid item>
+        <Typography variant="subtitle1">
+          {filenameFromPath(option.path)}
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Typography variant="body2">{dirnameFromPath(option.path)}</Typography>
+      </Grid>
+    </Grid>
+  );
   const handleChange = (_: ChangeEvent<{}>, value: Module[]) => {
     onChange?.(value);
   };
@@ -40,6 +62,7 @@ const SelectModules: FC<Props> = ({ modules, label, value, onChange }) => {
       value={value}
       getOptionLabel={getOptionLabel}
       renderInput={renderInput}
+      renderOption={renderOption}
       filterOptions={filterOptions}
       onChange={handleChange}
       getOptionSelected={areModulesEqual}

src/app/generated/icon-map.json

@@ -3793,7 +3793,9 @@
     ".nycrc": "istanbul",
     ".nycrc.json": "istanbul",
     "tailwind.js": "tailwindcss",
+    "tailwind.ts": "tailwindcss",
     "tailwind.config.js": "tailwindcss",
+    "tailwind.config.ts": "tailwindcss",
     "buildkite.yml": "buildkite",
     "buildkite.yaml": "buildkite",
     "netlify.json": "netlify",

src/app/utils/format.ts

@@ -4,5 +4,5 @@ export function filenameFromPath(path: string): string {
 }
 
 export function dirnameFromPath(path: string): string {
-  return path.replace(/\/[^/]$/, '/');
+  return path.replace(/\/[^/]+$/, '/');
 }

src/app/utils/icons.ts

@@ -0,0 +1,36 @@
+import iconMap from '../generated/icon-map.json';
+import { filenameFromPath } from './format';
+
+type IconDefinitionsKey = keyof typeof iconMap['iconDefinitions'];
+type FileNamesKey = keyof typeof iconMap['fileNames'];
+type FileExtensionsKey = keyof typeof iconMap['fileExtensions'];
+
+const ICONS_URL =
+  process.env.NODE_ENV === 'production'
+    ? 'assets/icons'
+    : '../../../dist/app/assets/icons';
+
+export function getIconUrlByName(iconName: IconDefinitionsKey): string {
+  return `${ICONS_URL}/${iconName}.svg`;
+}
+
+export function getIconUrlForPath(path: string): string {
+  const fileName = filenameFromPath(path);
+  const iconName = getIconNameForFileName(fileName) as IconDefinitionsKey;
+  return getIconUrlByName(iconName);
+}
+
+function getIconNameForFileName(fileName: string): string {
+  return (
+    iconMap.fileNames[fileName as FileNamesKey] ??
+    iconMap.fileNames[fileName.toLowerCase() as FileNamesKey] ??
+    iconMap.fileExtensions[getFileExtension(fileName)] ??
+    (fileName.endsWith('.ts') ? 'typescript' : null) ??
+    (fileName.endsWith('.js') ? 'javascript' : null) ??
+    'file'
+  );
+}
+
+function getFileExtension(fileName: string): FileExtensionsKey {
+  return fileName.substr(fileName.indexOf('.') + 1) as FileExtensionsKey;
+}

tsconfig.json

@@ -7,6 +7,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "sourceMap": true
+    "sourceMap": true,
+    "resolveJsonModule": true
   }
 }