Fix tabs bug.

client/src/components/appbar/AppBar.tsx

@@ -18,7 +18,6 @@ export interface TabProps {
 
 export function Tab(props: any) {
     const { onClose, label, ...restProps } = props;
-    const [hover, setHover] = useState<boolean>(false);
 
     const labelElem = <Box
         display="flex"
@@ -26,7 +25,7 @@ export function Tab(props: any) {
         justifyContent="center"
     >
         {label}
-        {hover && <Box ml={1}>
+        <Box ml={1}>
             <IconButton
                 size="small"
                 color="inherit"
@@ -34,12 +33,10 @@ export function Tab(props: any) {
             >
                 <CloseIcon />
             </IconButton>
-        </Box>}
+        </Box>
     </Box>;
 
     return <MuiTab
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
         label={labelElem}
         {...restProps}
     />

client/src/components/tables/ResultsTable.tsx

@@ -6,6 +6,7 @@ import { newWindowReducer, WindowType } from '../windows/Windows';
 import PersonIcon from '@material-ui/icons/Person';
 import AlbumIcon from '@material-ui/icons/Album';
 import AudiotrackIcon from '@material-ui/icons/Audiotrack';
+import LocalOfferIcon from '@material-ui/icons/LocalOffer';
 
 export interface SongGetters {
     getTitle: (song: any) => string,
@@ -15,6 +16,7 @@ export interface SongGetters {
     getAlbumNames: (song: any) => string[],
     getAlbumIds: (song: any) => number[],
     getTagNames: (song: any) => string[][], // Each tag is represented as a series of strings.
+    getTagIds: (song: any) => number[][], // Each tag is represented as a series of ids.
 }
 
 export interface IProps {
@@ -55,13 +57,7 @@ export function SongTable(props: IProps) {
                         const mainAlbumName = albumNames[0];
                         const mainAlbumId = props.songGetters.getAlbumIds(song)[0];
                         const songId = props.songGetters.getId(song);
-                        const tags = props.songGetters.getTagNames(song).map((tag: string[]) => {
-                            return <Box ml={0.5} mr={0.5}>
-                                <Chip size="small" label={stringifyList(tag, undefined, (idx: number, e: string) => {
-                                    return (idx === 0) ? e : " / " + e;
-                                })} />
-                            </Box>
-                        });
+                        const tagIds = props.songGetters.getTagIds(song);
 
                         const onClickArtist = () => {
                             props.mainDispatch({
@@ -102,6 +98,31 @@ export function SongTable(props: IProps) {
                             })
                         }
 
+                        const onClickTag = (id: number, name: string) => {
+                            props.mainDispatch({
+                                type: MainWindowStateActions.AddTab,
+                                tabState: {
+                                    tabLabel: <><LocalOfferIcon />{name}</>,
+                                    tagId: id,
+                                    metadata: null,
+                                },
+                                tabReducer: newWindowReducer[WindowType.Tag],
+                                tabType: WindowType.Tag,
+                            })
+                        }
+
+                        const tags = props.songGetters.getTagNames(song).map((tag: string[], i: number) => {
+                            const fullTag = stringifyList(tag, undefined, (idx: number, e: string) => {
+                                return (idx === 0) ? e : " / " + e;
+                            })
+                            return <Box ml={0.5} mr={0.5}>
+                                <Chip size="small"
+                                    label={fullTag}
+                                    onClick={() => onClickTag(tagIds[i][tagIds[i].length-1], fullTag)}
+                                />
+                            </Box>
+                        });
+
                         const TextCell = (props: any) => {
                             const classes = makeStyles({
                                 button: {

client/src/components/windows/AlbumWindow.tsx

@@ -81,7 +81,7 @@ export default function AlbumWindow(props: IProps) {
                     value: m
                 });
             })
-    }, []);
+    }, [props.state.metadata?.name]);
 
     return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box

client/src/components/windows/ArtistWindow.tsx

@@ -81,7 +81,7 @@ export default function ArtistWindow(props: IProps) {
                     value: m
                 });
             })
-    }, []);
+    }, [props.state.metadata?.name]);
 
     return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box

client/src/components/windows/QueryWindow.tsx

@@ -88,7 +88,17 @@ export default function QueryWindow(props: IProps) {
             }
 
             return song.tags.map((tag: any) => resolveTag(tag));
+        },
+        getTagIds: (song: any) => {
+            // Recursively resolve the id.
+            const resolveTag = (tag: any) => {
+                var r = [tag.tagId];
+                if (tag.parent) { r.unshift(resolveTag(tag.parent)); }
+                return r;
             }
+
+            return song.tags.map((tag: any) => resolveTag(tag));
+        },
     }
 
     const doQuery = async (_query: QueryElem) => {

client/src/components/windows/SongWindow.tsx

@@ -81,7 +81,7 @@ export default function SongWindow(props: IProps) {
                     value: m
                 });
             })
-    }, []);
+    }, [props.state.metadata?.title]);
 
     return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box

client/src/components/windows/TagWindow.tsx

@@ -81,7 +81,7 @@ export default function TagWindow(props: IProps) {
                     value: m
                 });
             })
-    }, []);
+    }, [props.state.metadata?.name]);
 
     return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box