add clear link for sort

lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.module.scss

@@ -3,7 +3,7 @@
     margin-bottom: 16px;
   }
 
-  .filtersHeader {
+  .header {
     display: flex;
     align-items: center;
     justify-content: space-between;

lattice/src/App/QueryBuilder/GroupByBuilder/GroupByBuilder.tsx

@@ -98,7 +98,7 @@ export const GroupByBuilder: FC<GroupByBuilderProps> = ({
       />
 
       <div className={css.filtersSection}>
-        <div className={css.filtersHeader}>
+        <div className={css.header}>
           <Typography variant="caption" color="textSecondary">
             Filter (optional)
             {filters.length > 0 && (
@@ -144,9 +144,17 @@ export const GroupByBuilder: FC<GroupByBuilderProps> = ({
       </div>
 
       <div className={css.sortSection}>
-        <Typography variant="caption" color="textSecondary">
-          Sort (optional)
-        </Typography>
+        <div className={css.header}>
+          <Typography variant="caption" color="textSecondary">
+            Sort (optional)
+          </Typography>
+          <span
+            className={css.textLink}
+            onClick={() => onChange({ ...query, sort: [] })}
+          >
+            Clear
+          </span>
+        </div>
         <GroupBySort
           sort={sort ? sort : []}
           onUpdate={(value) => {

lattice/src/App/QueryBuilder/GroupBySort/GroupBySort.tsx

@@ -20,7 +20,7 @@ export const GroupBySort: FC<GroupBySortProps> = ({
   showErrors,
   onUpdate
 }) => {
-  const hasPrimary = sort.length > 0;
+  const hasPrimary = sort.length > 0 && sort[0].sortValue;
   const primary = hasPrimary ? sort[0].sortValue.split(' ')[0] : '';
   const hasSecondary = sort.length > 1;
   const secondary = hasSecondary ? sort[1].sortValue.split(' ')[0] : '';
@@ -76,6 +76,7 @@ export const GroupBySort: FC<GroupBySortProps> = ({
           value={hasPrimary ? sort[0].sortValue : ''}
           options={sortOptions}
           onChange={(value) => onPrimaryChange(value)}
+          allowEmpty={true}
         />
 
         {primary.includes('sum') ? (
@@ -99,6 +100,7 @@ export const GroupBySort: FC<GroupBySortProps> = ({
               (option) => !option.value.includes(primary)
             )}
             onChange={(value) => onSecondaryChange(value)}
+            allowEmpty={true}
           />
 
           {secondary.includes('sum') ? (

lattice/src/App/QueryBuilder/RowCallBuilder/RowCallBuilder.tsx

@@ -12,7 +12,6 @@ import {
 } from 'App/QueryBuilder/rowTypes';
 import { RowCall } from './RowCall';
 import css from './RowCallBuilder.module.scss';
-import { useEffect } from 'react';
 
 type RowCallBuilderProps = {
   rowCalls: RowGrouping[];