[Claude Code Web] remove more typescript any assertions

packages/libs/coreui/src/components/Mesa/types.ts

@@ -137,20 +137,21 @@ export interface MesaColumn<
   Value = DefaultColumnValue<Row, Key>
 > {
   key: Key;
-  name?: string;
+  name?: ReactNode;
   type?: string;
   primary?: boolean;
   searchable?: boolean;
   sortable?: boolean;
   resizeable?: boolean;
   moveable?: boolean;
-  helpText?: string;
+  helpText?: ReactNode;
   htmlHelp?: string;
   style?: CSSProperties;
   headingStyle?: CSSProperties;
   className?: string;
   width?: CSSProperties['width'];
   hidden?: boolean;
+  inline?: boolean;
   truncated?: boolean | string;
   getValue?: (props: { row: Row; key: Key }) => Value;
   renderCell?: (cellProps: CellProps<Row, Key, Value>) => ReactNode;
@@ -164,7 +165,18 @@ export interface MesaColumn<
           HelpTrigger: () => ReactElement | null;
           ClickBoundary: (props: { children: ReactNode }) => ReactElement;
         }
-      ) => ReactNode);
+      ) => ReactNode)
+    | Array<
+        (
+          column: MesaColumn<Row, Key>,
+          columnIndex: number,
+          components: {
+            SortTrigger: () => ReactElement | null;
+            HelpTrigger: () => ReactElement | null;
+            ClickBoundary: (props: { children: ReactNode }) => ReactElement;
+          }
+        ) => ReactNode
+      >;
   wrapCustomHeadings?: (props: {
     column: MesaColumn<Row, Key, Value>;
     columnIndex: number;

packages/libs/wdk-client/src/Components/AttributeFilter/FieldFilter.tsx

@@ -85,9 +85,55 @@ function FieldFilter(props: FieldFilterProps) {
               props.activeFieldState.summary == null &&
               props.activeFieldState.leafSummaries == null) ||
             props.dataCount == null ? null : isMulti(props.activeField) ? (
-            <MultiFieldFilter {...(props as any)} />
+            <MultiFieldFilter
+              activeField={props.activeField}
+              activeFieldState={
+                {
+                  ...props.activeFieldState,
+                  leafSummaries: props.activeFieldState!.leafSummaries!,
+                } as {
+                  leafSummaries: OntologyTermSummary[];
+                  searchTerm?: string;
+                  sort?: { columnKey: string; direction: 'asc' | 'desc' };
+                  [key: string]: any;
+                }
+              }
+              filters={props.filters ?? []}
+              fieldTree={props.fieldTree!}
+              displayName={props.displayName ?? 'Items'}
+              dataCount={props.dataCount}
+              selectByDefault={props.selectByDefault}
+              onFiltersChange={props.onFiltersChange ?? (() => {})}
+              onMemberSort={(field, sort) => {
+                if (props.onMemberSort) {
+                  props.onMemberSort(sort.columnKey);
+                }
+              }}
+              onMemberSearch={(field, searchTerm) => {
+                if (props.onMemberSearch) {
+                  props.onMemberSearch(searchTerm);
+                }
+              }}
+            />
           ) : (
-            <SingleFieldFilter {...(props as any)} />
+            <SingleFieldFilter
+              activeField={props.activeField}
+              activeFieldState={
+                props.activeFieldState
+                  ? ({
+                      ...props.activeFieldState,
+                      summary: props.activeFieldState.summary!,
+                    } as { summary: OntologyTermSummary; [key: string]: any })
+                  : null
+              }
+              filters={props.filters ?? []}
+              onFiltersChange={props.onFiltersChange ?? (() => {})}
+              selectByDefault={props.selectByDefault}
+              displayName={props.displayName}
+              dataCount={props.dataCount}
+              filteredDataCount={props.filteredDataCount}
+              onRangeScaleChange={props.onRangeScaleChange}
+            />
           )}
         </React.Fragment>
       )}

packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.tsx

@@ -141,40 +141,39 @@ export default class FieldList extends React.Component<
     return (
       <div className="field-list">
         <CheckboxTree<TreeNode<Field>>
-          {...({
-            ref: this.handleCheckboxTreeRef,
-            autoFocusSearchBox: autoFocus,
-            tree: fieldTree,
-            expandedList: this.state.expandedNodes,
-            getNodeId: this.getNodeId,
-            getNodeChildren: this.getNodeChildren,
-            onExpansionChange: this.handleExpansionChange,
-            isSelectable: false,
-            isSearchable: true,
-            searchBoxPlaceholder: 'Find a variable',
-            searchBoxHelp: makeSearchHelpText(
-              'the variables by name or description'
-            ),
-            searchTerm: this.state.searchTerm,
-            onSearchTermChange: this.handleSearchTermChange,
-            searchPredicate: this.searchPredicate,
-            renderNode: (node: FieldTreeNode) => (
-              <FieldNode
-                node={node}
-                searchTerm={this.state.searchTerm}
-                isActive={node.field.term === activeField?.term}
-                handleFieldSelect={this.handleFieldSelect}
-              />
-            ),
-            linksPosition: LinksPosition.Top,
-            styleOverrides: {
-              treeNode: {
-                nodeWrapper: {
-                  padding: 0,
-                },
+          autoFocusSearchBox={autoFocus}
+          tree={fieldTree}
+          expandedList={this.state.expandedNodes}
+          getNodeId={this.getNodeId}
+          getNodeChildren={this.getNodeChildren}
+          onExpansionChange={this.handleExpansionChange}
+          isSelectable={false}
+          selectedList={[]}
+          onSelectionChange={() => {}}
+          isSearchable={true}
+          searchBoxPlaceholder="Find a variable"
+          searchBoxHelp={makeSearchHelpText(
+            'the variables by name or description'
+          )}
+          searchTerm={this.state.searchTerm}
+          onSearchTermChange={this.handleSearchTermChange}
+          searchPredicate={this.searchPredicate}
+          renderNode={(node: FieldTreeNode) => (
+            <FieldNode
+              node={node}
+              searchTerm={this.state.searchTerm}
+              isActive={node.field.term === activeField?.term}
+              handleFieldSelect={this.handleFieldSelect}
+            />
+          )}
+          linksPosition={LinksPosition.Top}
+          styleOverrides={{
+            treeNode: {
+              nodeWrapper: {
+                padding: 0,
               },
             },
-          } as any)}
+          }}
         />
       </div>
     );

packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.tsx

@@ -36,7 +36,7 @@ interface DistributionEntry {
   filteredCount: number;
 }
 
-interface UIState {
+export interface UIState {
   xaxisMin?: number;
   xaxisMax?: number;
   yaxisMin?: number;
@@ -110,23 +110,23 @@ var Histogram = (function () {
 
     constructor(props: HistogramProps) {
       super(props);
-      this.handleResize = throttle(this.handleResize.bind(this), 100) as any;
-      this.emitStateChange = debounce(this.emitStateChange, 100) as any;
+      this.handleResize = throttle(this.handleResize.bind(this), 100);
+      this.emitStateChange = debounce(this.emitStateChange, 100);
       this.state = {
         uiState: this.getStateFromProps(props),
         showSettings:
           sessionStorage.getItem(PLOT_SETTINGS_OPEN_KEY) !== 'false',
       };
-      this.getRange = memoize(this.getRange) as any;
-      this.getNumFixedDigits = memoize(this.getNumFixedDigits) as any;
-      this.getDefaultBinSize = memoize(this.getDefaultBinSize) as any;
+      this.getRange = memoize(this.getRange);
+      this.getNumFixedDigits = memoize(this.getNumFixedDigits);
+      this.getDefaultBinSize = memoize(this.getDefaultBinSize);
     }
 
     componentDidMount() {
-      ($ as any)(window).on('resize', this.handleResize);
+      $(window).on('resize', this.handleResize);
       const node = ReactDOM.findDOMNode(this);
       if (node) {
-        ($(node) as any)
+        $(node)
           .on('plotselected .chart', this.handlePlotSelected.bind(this))
           .on('plotselecting .chart', this.handlePlotSelecting.bind(this))
           .on('plotunselected .chart', this.handlePlotUnselected.bind(this))
@@ -485,7 +485,7 @@ var Histogram = (function () {
 
       const node = ReactDOM.findDOMNode(this);
       if (node) {
-        this.$chart = ($(node) as any).find('.chart');
+        this.$chart = $(node).find('.chart');
         this.plot = ($ as any).plot(this.$chart, seriesData, plotOptions);
       }
     }
@@ -858,7 +858,11 @@ var Histogram = (function () {
     }
   }
 
-  (LazyHistogram as any).defaultProps = {
+  (
+    LazyHistogram as typeof LazyHistogram & {
+      defaultProps: Partial<HistogramProps>;
+    }
+  ).defaultProps = {
     xaxisLabel: 'X-Axis',
     yaxisLabel: 'Y-Axis',
     selectedMin: null,

packages/libs/wdk-client/src/Components/AttributeFilter/HistogramField.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { clamp, debounce, get, noop } from 'lodash';
 
-import Histogram from '../../Components/AttributeFilter/Histogram';
+import Histogram, { UIState } from '../../Components/AttributeFilter/Histogram';
 import FilterLegend from '../../Components/AttributeFilter/FilterLegend';
 import UnknownCount from '../../Components/AttributeFilter/UnknownCount';
 import {
@@ -20,6 +20,15 @@ interface DistributionEntry {
   filteredCount: number;
 }
 
+/**
+ * Converted distribution entry with numeric values for Histogram component
+ */
+interface ConvertedDistributionEntry {
+  value: number;
+  count: number;
+  filteredCount: number;
+}
+
 /**
  * Range value type for min/max values
  */
@@ -35,7 +44,7 @@ interface HistogramFieldProps {
   distribution: DistributionEntry[];
   toFilterValue: (value: number) => number | string;
   toHistogramValue: (value: number | string) => number;
-  selectByDefault: boolean;
+  selectByDefault?: boolean;
   onChange: (
     activeField: Field,
     range: RangeValue,
@@ -45,12 +54,12 @@ interface HistogramFieldProps {
   activeField: Field;
   activeFieldState: {
     summary: OntologyTermSummary;
-    [key: string]: any;
-  };
+  } & UIState;
   filter?: RangeFilter;
   overview: React.ReactNode;
   displayName: string;
   unknownCount: number;
+  dataCount?: number;
   timeformat?: string;
   onRangeScaleChange?: (activeField: Field, range: any) => void;
   histogramTruncateYAxisDefault?: boolean;
@@ -77,7 +86,7 @@ export default class HistogramField extends React.Component<
   HistogramFieldProps,
   HistogramFieldState
 > {
-  convertedDistribution: DistributionEntry[] = [];
+  convertedDistribution: ConvertedDistributionEntry[] = [];
   convertedDistributionRange: { min: number; max: number } = {
     min: 0,
     max: 0,
@@ -291,14 +300,6 @@ export default class HistogramField extends React.Component<
     var selectedMin = min == null ? null : this.props.toHistogramValue(min);
     var selectedMax = max == null ? null : this.props.toHistogramValue(max);
 
-    var selectionTotal =
-      filter &&
-      (filter as any).selection &&
-      ((filter as any).selection as any).length;
-
-    var selection =
-      selectionTotal != null ? ' (' + selectionTotal + ' selected) ' : null;
-
     return (
       <div className="range-filter">
         <div className="head">
@@ -335,16 +336,21 @@ export default class HistogramField extends React.Component<
                   Include {unknownCount} Unknown
                 </label>
               )}
-              <span className="selection-total">{selection}</span>
             </div>
           </div>
-          <div>
-            <UnknownCount {...(this.props as any)} />
-          </div>
+          {this.props.dataCount && (
+            <div>
+              <UnknownCount
+                activeFieldState={this.props.activeFieldState}
+                dataCount={this.props.dataCount}
+                displayName={this.props.displayName}
+              />
+            </div>
+          )}
         </div>
 
         <Histogram
-          distribution={this.convertedDistribution as any}
+          distribution={this.convertedDistribution}
           onSelected={this.updateFilterValueFromSelection}
           onSelecting={noop}
           selectedMin={selectedMin}
@@ -353,7 +359,7 @@ export default class HistogramField extends React.Component<
           timeformat={this.props.timeformat}
           xaxisLabel={activeField.display}
           yaxisLabel={displayName}
-          uiState={activeFieldState as any}
+          uiState={activeFieldState}
           onUiStateChange={this.handleRangeScaleChange}
           truncateYAxis={this.props.histogramTruncateYAxisDefault}
           defaultScaleYAxis={this.props.histogramScaleYAxisDefault}