Deleting query elements works.

client/src/components/Window.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { ThemeProvider, CssBaseline, createMuiTheme } from '@material-ui/core';
-import { QueryElem } from '../lib/Query';
+import { QueryElem } from '../lib/query/Query';
 import QueryBuilder from './querybuilder/QueryBuilder';
 
 const darkTheme = createMuiTheme({

client/src/components/querybuilder/QBQueryElem.tsx

@@ -1,22 +1,28 @@
 import React from 'react';
-import { QueryLeafElem, QueryNodeElem, QueryElem, isLeafElem, isNodeElem } from '../../lib/Query';
+import { QueryLeafElem, QueryNodeElem, QueryElem, isLeafElem, isNodeElem } from '../../lib/query/Query';
 import { QBQueryLeafElem } from './QBQueryLeafElem';
 import { QBQueryNodeElem } from './QBQueryNodeElem';
 
 export interface IProps {
     elem: QueryLeafElem | QueryNodeElem,
-    onReplace: (q: QueryElem) => void,
+    onReplace: (q: QueryElem | null) => void,
+    editingQuery: boolean,
 }
 
 export function QBQueryElem(props: IProps) {
     let e = props.elem;
 
     if (isLeafElem(e)) {
-        return <QBQueryLeafElem elem={e} onReplace={props.onReplace} />
+        return <QBQueryLeafElem
+            elem={e}
+            onReplace={props.onReplace}
+            editingQuery={props.editingQuery}
+        />
     } else if (isNodeElem(e)) {
         return <QBQueryNodeElem
             elem={e}
             onReplace={props.onReplace}
+            editingQuery={props.editingQuery}
         />
     }
 

client/src/components/querybuilder/QBQueryElemMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Menu, TextField } from '@material-ui/core';
 import NestedMenuItem from "material-ui-nested-menu-item";
-import { QueryElem, QueryLeafBy, QueryLeafOp } from '../../lib/Query';
+import { QueryElem, QueryLeafBy, QueryLeafOp } from '../../lib/query/Query';
 import Autocomplete from '@material-ui/lab/Autocomplete'
 
 export interface FreeSoloInputProps {

client/src/components/querybuilder/QBQueryLeafElem.tsx

@@ -1,57 +1,108 @@
 import React from 'react';
-import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem } from '../../lib/Query';
+import { QueryLeafElem, QueryLeafBy, QueryLeafOp, QueryElem } from '../../lib/query/Query';
-import { Chip, Typography } from '@material-ui/core';
+import { Chip, Typography, IconButton, Box } from '@material-ui/core';
 import { QBQueryPlaceholder } from './QBQueryPlaceholder';
+import CloseIcon from '@material-ui/icons/Close';
 
 export interface ElemChipProps {
-    label: any
+    label: any,
+    extraElements?: any,
 }
 
 export function LabeledElemChip(props: ElemChipProps) {
-    const label = <Typography>{props.label}</Typography>
+    const label = <Box display="flex" alignItems="center">
+        <Typography>{props.label}</Typography>
+        {props.extraElements}
+    </Box>
     return <Chip label={label} />
 }
 
 export interface LeafProps {
-    elem: QueryLeafElem
+    elem: QueryLeafElem,
-    onReplace: (q: QueryElem) => void
+    onReplace: (q: QueryElem) => void,
+    extraElements?: any,
 }
 
 export function QBQueryElemArtistEquals(props: LeafProps) {
-    return <LabeledElemChip label={"By " + props.elem.b}/>
+    return <LabeledElemChip
+        label={"By " + props.elem.b}
+        extraElements={props.extraElements}
+    />
 }
 
 export function QBQueryElemArtistLike(props: LeafProps) {
-    return <LabeledElemChip label={"Artist like \"" + props.elem.b + "\""}/>
+    return <LabeledElemChip label={"Artist like \"" + props.elem.b + "\""}
+        extraElements={props.extraElements}
+    />
 }
 
 export function QBQueryElemTitleEquals(props: LeafProps) {
-    return <LabeledElemChip label={"\"" + props.elem.b + "\""}/>
+    return <LabeledElemChip
+        label={"\"" + props.elem.b + "\""}
+        extraElements={props.extraElements}
+    />
 }
 
 export function QBQueryElemTitleLike(props: LeafProps) {
-    return <LabeledElemChip label={"Title like \"" + props.elem.b + "\""}/>
+    return <LabeledElemChip
+        label={"Title like \"" + props.elem.b + "\""}
+        extraElements={props.extraElements}
+    />
 }
 
-export function QBQueryLeafElem(props: LeafProps) {
+export interface DeleteButtonProps {
+    onClick?: (e: any) => void,
+}
+
+export function QBQueryElemDeleteButton(props: DeleteButtonProps) {
+    return <IconButton onClick={props.onClick} size="small">
+        <CloseIcon />
+    </IconButton>
+}
+
+export interface IProps {
+    elem: QueryLeafElem,
+    onReplace: (q: QueryElem | null) => void,
+    editingQuery: boolean,
+}
+
+export function QBQueryLeafElem(props: IProps) {
     let e = props.elem;
 
+    const extraElements = props.editingQuery ?
+        <QBQueryElemDeleteButton
+            onClick={() => props.onReplace(null)}
+        />
+        : undefined;
+
     if (e.a == QueryLeafBy.ArtistName &&
         e.leafOp == QueryLeafOp.Equals &&
         typeof e.b == "string") {
-        return <QBQueryElemArtistEquals {...props} />
+        return <QBQueryElemArtistEquals
+            {...props}
+            extraElements={extraElements}
+        />
     } else if (e.a == QueryLeafBy.ArtistName &&
         e.leafOp == QueryLeafOp.Like &&
         typeof e.b == "string") {
-        return <QBQueryElemArtistLike {...props} />
+        return <QBQueryElemArtistLike
+            {...props}
+            extraElements={extraElements}
+        />
     } if (e.a == QueryLeafBy.SongTitle &&
         e.leafOp == QueryLeafOp.Equals &&
         typeof e.b == "string") {
-        return <QBQueryElemTitleEquals {...props} />
+        return <QBQueryElemTitleEquals
+            {...props}
+            extraElements={extraElements}
+        />
     } else if (e.a == QueryLeafBy.SongTitle &&
         e.leafOp == QueryLeafOp.Like &&
         typeof e.b == "string") {
-        return <QBQueryElemTitleLike {...props} />
+        return <QBQueryElemTitleLike
+            {...props}
+            extraElements={extraElements}
+        />
     } else if (e.leafOp == QueryLeafOp.Placeholder) {
         return <QBQueryPlaceholder
             onReplace={props.onReplace}

client/src/components/querybuilder/QBQueryNodeElem.tsx

@@ -1,34 +1,36 @@
 import React from 'react';
 import QBOrBlock from './QBOrBlock';
 import QBAndBlock from './QBAndBlock';
-import { QueryNodeElem, QueryNodeOp, QueryElem, isNodeElem } from '../../lib/Query';
+import { QueryNodeElem, QueryNodeOp, QueryElem, isNodeElem, simplify } from '../../lib/query/Query';
 import { QBQueryLeafElem } from './QBQueryLeafElem';
+import { QBQueryElem } from './QBQueryElem';
+import { O_APPEND } from 'constants';
 
 export interface NodeProps {
     elem: QueryNodeElem,
-    onReplace: (q: QueryElem) => void,
+    onReplace: (q: QueryElem | null) => void,
+    editingQuery: boolean,
 }
 
 export function QBQueryNodeElem(props: NodeProps) {
     let e = props.elem;
 
-    const onReplace = (idx: number, q: QueryElem) => {
+    const onReplace = (idx: number, q: QueryElem | null) => {
         var ops = e.operands;
-        ops[idx] = q;
+        if (q) {
-        let newNode = { operands: ops, nodeOp: e.nodeOp };
+            ops[idx] = q;
+        } else {
+            ops.splice(idx, 1);
+        }
+        let newNode = simplify({ operands: ops, nodeOp: e.nodeOp });
         props.onReplace(newNode);
     }
 
     const children = e.operands.map((o: any, idx: number) => {
-        if (isNodeElem(o)) {
+        return <QBQueryElem
-            return <QBQueryNodeElem
-                elem={o}
-                onReplace={(q: QueryElem) => onReplace(idx, q)}
-            />
-        }
-        return <QBQueryLeafElem
             elem={o}
-            onReplace={(q: QueryElem) => onReplace(idx, q)}
+            onReplace={(q: QueryElem | null) => onReplace(idx, q)}
+            editingQuery={props.editingQuery}
         />
     });
 

client/src/components/querybuilder/QBQueryPlaceholder.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Chip } from '@material-ui/core';
 import { QBQueryElemMenu } from './QBQueryElemMenu';
-import { QueryElem } from '../../lib/Query';
+import { QueryElem } from '../../lib/query/Query';
 
 export interface IProps {
     onReplace: (q: QueryElem) => void,

client/src/components/querybuilder/QueryBuilder.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Box } from '@material-ui/core';
 import QBQueryButton from './QBQueryButton';
 import { QBQueryElem } from './QBQueryElem';
-import { QueryElem, addPlaceholders, removePlaceholders, simplify } from '../../lib/Query';
+import { QueryElem, addPlaceholders, removePlaceholders, simplify } from '../../lib/query/Query';
 
 export interface IProps {
     query: QueryElem | null,
@@ -33,6 +33,7 @@ export default function QueryBuilder(props: IProps) {
                 {showQuery && <QBQueryElem
                     elem={showQuery}
                     onReplace={onReplace}
+                    editingQuery={editing}
                 />}
             </Box>
         </Box>