Reorganize webapp components

.eslintignore

@@ -1,9 +1,9 @@
-build
-dist
-lib
-docs
+**/build
+**/dist
+**/lib
+**/docs
 static
-node_modules
+**/node_modules
 webapp.d.ts
 .yarn/
 *.d.ts

.pnp.cjs

@@ -7309,6 +7309,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["react-animate-height", "virtual:ab707d185f10541278b9ecde58184453683750a0176c3dcb7b66df543308b186988a937232da617fe8778a3d9206dd626ab3288047a0533f021a2e1016f22e5e#npm:2.0.23"],\
             ["react-dom", "virtual:6d9aabd8f5483787e2dbe940b43dd8e3fbd6b3c4b7413d9a54b1214d97b7b4b9929594a04ca11ac717420c56ae3bff89bd46858d5209dab13ca02e7dbb653875#npm:17.0.2"],\
             ["react-dropzone", "virtual:ab707d185f10541278b9ecde58184453683750a0176c3dcb7b66df543308b186988a937232da617fe8778a3d9206dd626ab3288047a0533f021a2e1016f22e5e#npm:11.3.2"],\
+            ["react-if", "virtual:ab707d185f10541278b9ecde58184453683750a0176c3dcb7b66df543308b186988a937232da617fe8778a3d9206dd626ab3288047a0533f021a2e1016f22e5e#npm:4.1.3"],\
             ["react-infinite-scroller", "virtual:ab707d185f10541278b9ecde58184453683750a0176c3dcb7b66df543308b186988a937232da617fe8778a3d9206dd626ab3288047a0533f021a2e1016f22e5e#npm:1.2.4"],\
             ["react-rnd", "npm:10.3.0"],\
             ["react-router-dom", "virtual:6d9aabd8f5483787e2dbe940b43dd8e3fbd6b3c4b7413d9a54b1214d97b7b4b9929594a04ca11ac717420c56ae3bff89bd46858d5209dab13ca02e7dbb653875#npm:5.2.0"],\
@@ -22272,6 +22273,26 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "SOFT"\
         }],\
+        ["npm:4.1.3", {\
+          "packageLocation": "./.yarn/cache/react-if-npm-4.1.3-4ca3dee716-296aef4c67.zip/node_modules/react-if/",\
+          "packageDependencies": [\
+            ["react-if", "npm:4.1.3"]\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["virtual:ab707d185f10541278b9ecde58184453683750a0176c3dcb7b66df543308b186988a937232da617fe8778a3d9206dd626ab3288047a0533f021a2e1016f22e5e#npm:4.1.3", {\
+          "packageLocation": "./.yarn/__virtual__/react-if-virtual-8a7dae2c6b/0/cache/react-if-npm-4.1.3-4ca3dee716-296aef4c67.zip/node_modules/react-if/",\
+          "packageDependencies": [\
+            ["react-if", "virtual:ab707d185f10541278b9ecde58184453683750a0176c3dcb7b66df543308b186988a937232da617fe8778a3d9206dd626ab3288047a0533f021a2e1016f22e5e#npm:4.1.3"],\
+            ["@types/react", "npm:16.14.21"],\
+            ["react", "npm:17.0.2"]\
+          ],\
+          "packagePeers": [\
+            "@types/react",\
+            "react"\
+          ],\
+          "linkType": "HARD"\
+        }],\
         ["virtual:cc4845f3c0f2001cf6790528905b10330a170f920d2a290c32dc0df2d25322c495067aa52c61abbecc9a22ebe934b3fd4ea1324ae3369de9195da7c231f048c9#npm:4.1.1", {\
           "packageLocation": "./.yarn/__virtual__/react-if-virtual-f56ae95099/0/cache/react-if-npm-4.1.1-b36afcee94-ea7c343eca.zip/node_modules/react-if/",\
           "packageDependencies": [\

packages/arquero/docs/arquero.api.md

@@ -3,305 +3,231 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-import type { ColumnDef } from '@graph-drilldown/types'
-import { ColumnGetter } from 'arquero/dist/types/table/table'
-import type { ColumnStats } from '@graph-drilldown/types'
-import type ColumnTable from 'arquero/dist/types/table/column-table'
-import type { Community } from '@graph-drilldown/types'
-import type { Edge } from '@graph-drilldown/types'
-import type { Histogram } from '@essex-js-toolkit/toolbox'
-import type { Node as Node_2 } from '@graph-drilldown/types'
-import { NodeCollection as NodeCollection_2 } from '@graph-drilldown/arquero'
-import type { TableData } from 'arquero/dist/types/table/table'
+
+import type { ColumnDef } from '@graph-drilldown/types';
+import { ColumnGetter } from 'arquero/dist/types/table/table';
+import type { ColumnStats } from '@graph-drilldown/types';
+import type ColumnTable from 'arquero/dist/types/table/column-table';
+import type { Community } from '@graph-drilldown/types';
+import type { Edge } from '@graph-drilldown/types';
+import type { Histogram } from '@essex-js-toolkit/toolbox';
+import type { Node as Node_2 } from '@graph-drilldown/types';
+import { NodeCollection as NodeCollection_2 } from '@graph-drilldown/arquero';
+import type { TableData } from 'arquero/dist/types/table/table';
 
 // Warning: (ae-missing-release-tag) "ArqueroNode" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface ArqueroNode {
     // (undocumented)
-	['node.id']: string
+    ['node.id']: string;
     // (undocumented)
-	['node.x']: number
+    ['node.x']: number;
     // (undocumented)
-	['node.y']: number
+    ['node.y']: number;
 }
 
 // Warning: (ae-missing-release-tag) "binTableColumn" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function binTableColumn(table: ColumnTable, column: string): any[]
+export function binTableColumn(table: ColumnTable, column: string): any[];
 
 // Warning: (ae-missing-release-tag) "chain" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function chain(
-	table: ColumnTable,
-	functions: ((table: ColumnTable) => ColumnTable)[],
-): ColumnTable
+export function chain(table: ColumnTable, functions: ((table: ColumnTable) => ColumnTable)[]): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "checkAndAddChildCount" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function checkAndAddChildCount(main: ColumnTable): ColumnTable
+export function checkAndAddChildCount(main: ColumnTable): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "checkAndAddNodeCount" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function checkAndAddNodeCount(main: ColumnTable): ColumnTable
+export function checkAndAddNodeCount(main: ColumnTable): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "columnTypes" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export function columnTypes(table: ColumnTable): {
-	name: string
-	type:
-		| 'string'
-		| 'number'
-		| 'bigint'
-		| 'boolean'
-		| 'symbol'
-		| 'undefined'
-		| 'object'
-		| 'function'
-}[]
+    name: string;
+    type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+}[];
 
 // Warning: (ae-missing-release-tag) "CommunityCollection" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export class CommunityCollection extends TableCollection<Community> {
-	constructor(table?: ColumnTable, indices?: number[])
+    constructor(table?: ColumnTable, indices?: number[]);
 }
 
 // Warning: (ae-missing-release-tag) "EdgeCollection" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export class EdgeCollection extends TableCollection<Edge> {
-	constructor(table?: ColumnTable, indices?: number[])
+    constructor(table?: ColumnTable, indices?: number[]);
 }
 
 // Warning: (ae-missing-release-tag) "filterEdgesToNodes" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function filterEdgesToNodes(
-	edges: ColumnTable,
-	nodes: NodeCollection_2,
-): ColumnTable
+export function filterEdgesToNodes(edges: ColumnTable, nodes: NodeCollection_2): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "findGroupIndices" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function findGroupIndices(
-	table: ColumnTable,
-	field: string,
-	value: any,
-): number[] | undefined
+export function findGroupIndices(table: ColumnTable, field: string, value: any): number[] | undefined;
 
 // Warning: (ae-missing-release-tag) "findNodesCollectionForCommunity" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function findNodesCollectionForCommunity(
-	cid: string | undefined,
-	byParent: ColumnTable,
-	byCommunity: ColumnTable,
-): NodeCollection_2
+export function findNodesCollectionForCommunity(cid: string | undefined, byParent: ColumnTable, byCommunity: ColumnTable): NodeCollection_2;
 
 // Warning: (ae-missing-release-tag) "findNodesTableForCommunity" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function findNodesTableForCommunity(
-	cid: string | undefined,
-	byParent: ColumnTable,
-	byCommunity: ColumnTable,
-): ColumnTable
+export function findNodesTableForCommunity(cid: string | undefined, byParent: ColumnTable, byCommunity: ColumnTable): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "findNodesTableForParent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function findNodesTableForParent(
-	pid: string,
-	byParent: ColumnTable,
-): ColumnTable
+export function findNodesTableForParent(pid: string, byParent: ColumnTable): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "getColumnHistogram" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function getColumnHistogram(table: ColumnTable, name?: string): Histogram
+export function getColumnHistogram(table: ColumnTable, name?: string): Histogram;
 
 // Warning: (ae-missing-release-tag) "getColumnStats" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function getColumnStats(table: ColumnTable, name?: string): ColumnStats
+export function getColumnStats(table: ColumnTable, name?: string): ColumnStats;
 
 // Warning: (ae-missing-release-tag) "getEdgesFromTableByID" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function getEdgesFromTableByID(
-	selectedId: string,
-	nodeTable: ColumnTable,
-	edges: ColumnTable,
-): ColumnTable | undefined
+export function getEdgesFromTableByID(selectedId: string, nodeTable: ColumnTable, edges: ColumnTable): ColumnTable | undefined;
 
 // Warning: (ae-missing-release-tag) "getNodeStats" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function getNodeStats(
-	table: ColumnTable,
-	quantile?: number,
-): Record<string, any>
+export function getNodeStats(table: ColumnTable, quantile?: number): Record<string, any>;
 
 // Warning: (ae-missing-release-tag) "getPrecision" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function getPrecision(domain?: number[], values?: number[]): number
+export function getPrecision(domain?: number[], values?: number[]): number;
 
 // Warning: (ae-missing-release-tag) "hasColumn" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function hasColumn(table: ColumnTable, column: string): boolean
+export function hasColumn(table: ColumnTable, column: string): boolean;
 
 // Warning: (ae-missing-release-tag) "initializeCommunityTable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function initializeCommunityTable(table: ColumnTable): ColumnTable
+export function initializeCommunityTable(table: ColumnTable): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "initializeEdgeTable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function initializeEdgeTable(table: ColumnTable): ColumnTable
+export function initializeEdgeTable(table: ColumnTable): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "initializeJoinTable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function initializeJoinTable(table: ColumnTable): ColumnTable
+export function initializeJoinTable(table: ColumnTable): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "initializeNodeTable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function initializeNodeTable(
-	table: ColumnTable,
-	fromEdges?: boolean,
-): ColumnTable
+export function initializeNodeTable(table: ColumnTable, fromEdges?: boolean): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "joinDataTables" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function joinDataTables(
-	left: ColumnTable,
-	right: ColumnTable,
-	type: string,
-	leftKey?: string,
-	rightKey?: string,
-): ColumnTable
+export function joinDataTables(left: ColumnTable, right: ColumnTable, type: string, leftKey?: string, rightKey?: string): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "joinNodeCommunityTables" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function joinNodeCommunityTables(
-	nodes: ColumnTable,
-	communities: ColumnTable,
-): ColumnTable
+export function joinNodeCommunityTables(nodes: ColumnTable, communities: ColumnTable): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "joinWithReplace" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function joinWithReplace(
-	left: ColumnTable,
-	right: ColumnTable,
-	joinDefinition: any,
-): ColumnTable
+export function joinWithReplace(left: ColumnTable, right: ColumnTable, joinDefinition: any): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "listColumnDefs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function listColumnDefs(
-	table: ColumnTable,
-	readOnlyNames?: Set<string>,
-): ColumnDef[]
+export function listColumnDefs(table: ColumnTable, readOnlyNames?: Set<string>): ColumnDef[];
 
 // Warning: (ae-missing-release-tag) "listColumnNames" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function listColumnNames(table: ColumnTable): string[]
+export function listColumnNames(table: ColumnTable): string[];
 
 // Warning: (ae-missing-release-tag) "NodeCollection" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export class NodeCollection extends TableCollection<Node_2> {
-	constructor(table?: ColumnTable, indices?: number[])
+    constructor(table?: ColumnTable, indices?: number[]);
 }
 
 // Warning: (ae-missing-release-tag) "normalizeXY" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function normalizeXY(table: ColumnTable): any
+export function normalizeXY(table: ColumnTable): any;
 
 // Warning: (ae-missing-release-tag) "one" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function one(
-	table: ColumnTable,
-	transformer?: (d: any) => any,
-): Record<string, any>
+export function one(table: ColumnTable, transformer?: (d: any) => any): Record<string, any>;
 
 // Warning: (ae-missing-release-tag) "recomputeCommunityStats" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function recomputeCommunityStats(
-	table: ColumnTable,
-	force?: boolean,
-): ColumnTable
+export function recomputeCommunityStats(table: ColumnTable, force?: boolean): ColumnTable;
 
 // Warning: (ae-missing-release-tag) "rename" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function rename(
-	table: ColumnTable,
-	prefix: string,
-	exclude?: string[],
-): any
+export function rename(table: ColumnTable, prefix: string, exclude?: string[]): any;
 
 // Warning: (ae-missing-release-tag) "TableCollection" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export class TableCollection<T> {
-	constructor(
-		table: ColumnTable | undefined,
-		prefix: string,
-		indices?: number[],
-	)
+    constructor(table: ColumnTable | undefined, prefix: string, indices?: number[]);
     // (undocumented)
-	forEach(callback: Callback<T>, ordered?: boolean): void
+    forEach(callback: Callback<T>, ordered?: boolean): void;
     // (undocumented)
-	getter(name: string): ColumnGetter
+    getter(name: string): ColumnGetter;
     // Warning: (ae-forgotten-export) The symbol "Callback" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-	map(callback: Callback<T>, ordered?: boolean): any[]
+    map(callback: Callback<T>, ordered?: boolean): any[];
     // (undocumented)
-	page(callback: Callback<T>, offset: any, count: any): T[]
+    page(callback: Callback<T>, offset: any, count: any): T[];
     // (undocumented)
-	sample(proportion: number): T[]
-	scan(
-		callback: (
-			row?: number | undefined,
-			data?: TableData | any[] | undefined,
-			stop?: (() => void) | undefined,
-		) => void,
-		ordered?: boolean,
-	): void
+    sample(proportion: number): T[];
+    scan(callback: (row?: number | undefined, data?: TableData | any[] | undefined, stop?: (() => void) | undefined) => void, ordered?: boolean): void;
     // (undocumented)
-	get size(): number
+    get size(): number;
     // (undocumented)
-	sort(definition: any): this
+    sort(definition: any): this;
     // (undocumented)
-	get table(): ColumnTable
+    get table(): ColumnTable;
     // (undocumented)
-	toArray(ordered?: boolean): T[]
+    toArray(ordered?: boolean): T[];
     // (undocumented)
-	toMap(): Map<string, T>
+    toMap(): Map<string, T>;
     // (undocumented)
-	toSet(): Set<T>
+    toSet(): Set<T>;
 }
 
 // (No @packageDocumentation comment for this package)
+
 ```

packages/components/docs/components.api.md

@@ -3,164 +3,166 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+
 /// <reference types="react" />
 
-import type { ColorEncoding } from '@graph-drilldown/types'
-import type ColumnTable from 'arquero/dist/types/table/column-table'
-import type { DataFile } from '@graph-drilldown/types'
-import type { Encoding } from '@graph-drilldown/types'
-import type { NumericEncoding } from '@graph-drilldown/types'
+import type { ColorEncoding } from '@graph-drilldown/types';
+import type ColumnTable from 'arquero/dist/types/table/column-table';
+import type { DataFile } from '@graph-drilldown/types';
+import type { Encoding } from '@graph-drilldown/types';
+import type { NumericEncoding } from '@graph-drilldown/types';
 
 // Warning: (ae-forgotten-export) The symbol "ColorSelectorProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "ColorSelector" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export const ColorSelector: React.FC<ColorSelectorProps>
+export const ColorSelector: React.FC<ColorSelectorProps>;
 
 // Warning: (ae-missing-release-tag) "DomainBrush" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const DomainBrush: React.FC<DomainBrushProps>
+export const DomainBrush: React.FC<DomainBrushProps>;
 
 // Warning: (ae-missing-release-tag) "DomainBrushProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface DomainBrushProps {
     // (undocumented)
-	currentDomain?: [number, number]
+    currentDomain?: [number, number];
     // (undocumented)
-	histogram?: any[]
+    histogram?: any[];
     // (undocumented)
-	max?: number
+    max?: number;
     // (undocumented)
-	min?: number
+    min?: number;
     // (undocumented)
-	onChange?: (domain: [number, number]) => void
+    onChange?: (domain: [number, number]) => void;
     // (undocumented)
-	precision?: number
-	showTextInputs?: boolean
+    precision?: number;
+    showTextInputs?: boolean;
 }
 
 // Warning: (ae-missing-release-tag) "FileTable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export const FileTable: React.FC<FileTableProps>
+export const FileTable: React.FC<FileTableProps>;
 
 // Warning: (ae-missing-release-tag) "FileTableProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface FileTableProps {
     // (undocumented)
-	files: DataFile[]
+    files: DataFile[];
     // (undocumented)
-	onClick?: (file: DataFile) => void
+    onClick?: (file: DataFile) => void;
     // (undocumented)
-	selected?: DataFile
+    selected?: DataFile;
 }
 
 // Warning: (ae-missing-release-tag) "HeaderLegend" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export const HeaderLegend: React.FC<HeaderLegendProps>
+export const HeaderLegend: React.FC<HeaderLegendProps>;
 
 // Warning: (ae-missing-release-tag) "HeaderLegendProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface HeaderLegendProps {
     // (undocumented)
-	colorEncoding?: ColorEncoding
+    colorEncoding?: ColorEncoding;
     // (undocumented)
-	encoding: NumericEncoding | ColorEncoding
+    encoding: NumericEncoding | ColorEncoding;
     // (undocumented)
-	isDashes?: boolean
+    isDashes?: boolean;
     // (undocumented)
-	isNumeric?: boolean
+    isNumeric?: boolean;
     // (undocumented)
-	isUnset?: boolean
+    isUnset?: boolean;
     // (undocumented)
-	label: string
+    label: string;
     // (undocumented)
-	opacityEncoding?: NumericEncoding
+    opacityEncoding?: NumericEncoding;
     // (undocumented)
-	sizeEncoding?: NumericEncoding
+    sizeEncoding?: NumericEncoding;
 }
 
 // Warning: (ae-missing-release-tag) "NominalLegend" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const NominalLegend: React.FC<NominalLegendProps>
+export const NominalLegend: React.FC<NominalLegendProps>;
 
 // Warning: (ae-missing-release-tag) "NominalLegendProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface NominalLegendProps {
     // (undocumented)
-	encoding: ColorEncoding
+    encoding: ColorEncoding;
 }
 
 // Warning: (ae-missing-release-tag) "NumericDomainEditor" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const NumericDomainEditor: React.FC<NumericDomainEditorProps>
+export const NumericDomainEditor: React.FC<NumericDomainEditorProps>;
 
 // Warning: (ae-missing-release-tag) "NumericDomainEditorProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface NumericDomainEditorProps {
     // (undocumented)
-	encoding: Encoding
+    encoding: Encoding;
     // (undocumented)
-	onChange: (encoding: Partial<Encoding>) => void
-	table: ColumnTable
+    onChange: (encoding: Partial<Encoding>) => void;
+    table: ColumnTable;
 }
 
 // Warning: (ae-missing-release-tag) "NumericRangeEditor" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const NumericRangeEditor: React.FC<NumericRangeEditorProps>
+export const NumericRangeEditor: React.FC<NumericRangeEditorProps>;
 
 // Warning: (ae-missing-release-tag) "NumericRangeEditorProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface NumericRangeEditorProps {
     // (undocumented)
-	encoding: Encoding
+    encoding: Encoding;
     // (undocumented)
-	max?: number
+    max?: number;
     // (undocumented)
-	min?: number
+    min?: number;
     // (undocumented)
-	onChange: (encoding: Partial<Encoding>) => void
+    onChange: (encoding: Partial<Encoding>) => void;
     // (undocumented)
-	precision?: number
+    precision?: number;
 }
 
 // Warning: (ae-forgotten-export) The symbol "NumericSelectorProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "NumericSelector" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export const NumericSelector: React.FC<NumericSelectorProps>
+export const NumericSelector: React.FC<NumericSelectorProps>;
 
 // Warning: (ae-missing-release-tag) "ToggleHeader" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const ToggleHeader: React.FC<ToggleHeaderProps>
+export const ToggleHeader: React.FC<ToggleHeaderProps>;
 
 // Warning: (ae-missing-release-tag) "ToggleHeaderProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface ToggleHeaderProps {
     // (undocumented)
-	checked: boolean
+    checked: boolean;
     // (undocumented)
-	disabled?: boolean
+    disabled?: boolean;
     // (undocumented)
-	onChange?: (checked: boolean) => void
+    onChange?: (checked: boolean) => void;
     // (undocumented)
-	subtitle?: string
+    subtitle?: string;
     // (undocumented)
-	title: string
+    title: string;
 }
 
 // (No @packageDocumentation comment for this package)
+
 ```

packages/hooks/docs/hooks.api.md

@@ -3,38 +3,33 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-import { Color } from '@thematic/color'
-import type { ColorEncoding } from '@graph-drilldown/types'
-import type { ContinuousColorScaleFunction } from '@thematic/core'
-import type { NominalColorScaleFunction } from '@thematic/core'
-import type { NumericEncoding } from '@graph-drilldown/types'
+
+import { Color } from '@thematic/color';
+import type { ColorEncoding } from '@graph-drilldown/types';
+import type { ContinuousColorScaleFunction } from '@thematic/core';
+import type { NominalColorScaleFunction } from '@thematic/core';
+import type { NumericEncoding } from '@graph-drilldown/types';
 
 // Warning: (ae-missing-release-tag) "useColorEncodingScale" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function useColorEncodingScale(
-	encoding: ColorEncoding,
-): (value?: any) => Color
+export function useColorEncodingScale(encoding: ColorEncoding): (value?: any) => Color;
 
 // Warning: (ae-missing-release-tag) "useIsNominal" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function useIsNominal(encoding: ColorEncoding): boolean
+export function useIsNominal(encoding: ColorEncoding): boolean;
 
 // Warning: (ae-missing-release-tag) "useNumericEncodingScale" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function useNumericEncodingScale(
-	encoding: NumericEncoding,
-	overrides?: Partial<NumericEncoding>,
-): (value?: number | undefined) => number
+export function useNumericEncodingScale(encoding: NumericEncoding, overrides?: Partial<NumericEncoding>): (value?: number | undefined) => number;
 
 // Warning: (ae-missing-release-tag) "useThematicColorScale" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function useThematicColorScale(
-	encoding: ColorEncoding,
-): ContinuousColorScaleFunction | NominalColorScaleFunction
+export function useThematicColorScale(encoding: ColorEncoding): ContinuousColorScaleFunction | NominalColorScaleFunction;
 
 // (No @packageDocumentation comment for this package)
+
 ```

packages/types/docs/types.api.md

@@ -3,17 +3,18 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-import type ColumnTable from 'arquero/dist/types/table/column-table'
-import type { ScaleType } from '@thematic/core'
+
+import type ColumnTable from 'arquero/dist/types/table/column-table';
+import type { ScaleType } from '@thematic/core';
 
 // Warning: (ae-missing-release-tag) "ColorEncoding" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface ColorEncoding extends Encoding {
-	scaleName?: string
-	thematicSchemePath?: string
-	uniques?: string[] | number[]
-	value?: string
+    scaleName?: string;
+    thematicSchemePath?: string;
+    uniques?: string[] | number[];
+    value?: string;
 }
 
 // Warning: (ae-missing-release-tag) "ColumnDef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -21,13 +22,13 @@ export interface ColorEncoding extends Encoding {
 // @public (undocumented)
 export interface ColumnDef {
     // (undocumented)
-	dataType: string
+    dataType: string;
     // (undocumented)
-	name: string
+    name: string;
     // (undocumented)
-	readOnly?: boolean
+    readOnly?: boolean;
     // (undocumented)
-	type: ItemType
+    type: ItemType;
 }
 
 // Warning: (ae-missing-release-tag) "ColumnStats" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -35,17 +36,17 @@ export interface ColumnDef {
 // @public (undocumented)
 export interface ColumnStats {
     // (undocumented)
-	dataType?: string
+    dataType?: string;
     // (undocumented)
-	domain: [number, number]
+    domain: [number, number];
     // (undocumented)
-	domain95: [number, number]
+    domain95: [number, number];
     // (undocumented)
-	domain99: [number, number]
+    domain99: [number, number];
     // (undocumented)
-	precision: number
+    precision: number;
     // (undocumented)
-	unique: string[] | number[]
+    unique: string[] | number[];
 }
 
 // Warning: (ae-missing-release-tag) "Community" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -53,20 +54,20 @@ export interface ColumnStats {
 // @public (undocumented)
 export interface Community extends TableBackedItem {
     // (undocumented)
-	childCount: number
+    childCount: number;
     // (undocumented)
-	nodeCount: number
+    nodeCount: number;
     // (undocumented)
-	pid: string
+    pid: string;
 }
 
 // Warning: (ae-missing-release-tag) "DataBinding" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
 export enum DataBinding {
-	Fixed = 'fixed',
-	Palette = 'palette',
-	Scaled = 'scaled',
+    Fixed = "fixed",
+    Palette = "palette",
+    Scaled = "scaled"
 }
 
 // Warning: (ae-missing-release-tag) "DataFile" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -74,17 +75,17 @@ export enum DataBinding {
 // @public
 export interface DataFile {
     // (undocumented)
-	cols?: number
-	name?: string
+    cols?: number;
+    name?: string;
     // (undocumented)
-	origin: FileOrigin
+    origin: FileOrigin;
     // (undocumented)
-	rows?: number
+    rows?: number;
     // (undocumented)
-	table?: ColumnTable
-	tableType?: ItemType
+    table?: ColumnTable;
+    tableType?: ItemType;
     // (undocumented)
-	url: string
+    url: string;
 }
 
 // Warning: (ae-missing-release-tag) "Edge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -92,11 +93,11 @@ export interface DataFile {
 // @public (undocumented)
 export interface Edge extends TableBackedItem {
     // (undocumented)
-	source: string
+    source: string;
     // (undocumented)
-	target: string
+    target: string;
     // (undocumented)
-	weight?: number
+    weight?: number;
 }
 
 // Warning: (ae-missing-release-tag) "Encoding" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -104,38 +105,38 @@ export interface Edge extends TableBackedItem {
 // @public (undocumented)
 export interface Encoding {
     // (undocumented)
-	binding: DataBinding
-	dataType?: string
-	domain?: [number, number]
-	field?: string
-	range?: [number, number]
-	scaleType?: ScaleType
+    binding: DataBinding;
+    dataType?: string;
+    domain?: [number, number];
+    field?: string;
+    range?: [number, number];
+    scaleType?: ScaleType;
 }
 
 // Warning: (ae-missing-release-tag) "FileOrigin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export enum FileOrigin {
-	Local = 'local',
-	Preset = 'preset',
-	Remote = 'remote',
+    Local = "local",
+    Preset = "preset",
+    Remote = "remote"
 }
 
 // Warning: (ae-missing-release-tag) "ItemType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export type ItemType = 'node' | 'community' | 'edge' | 'join'
+export type ItemType = 'node' | 'community' | 'edge' | 'join';
 
 // Warning: (ae-missing-release-tag) "Node" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 interface Node_2 extends TableBackedItem {
     // (undocumented)
-	d?: number
+    d?: number;
     // (undocumented)
-	x: number
+    x: number;
     // (undocumented)
-	y: number
+    y: number;
 }
 export { Node_2 as Node }
 
@@ -143,7 +144,7 @@ export { Node_2 as Node }
 //
 // @public (undocumented)
 export interface NumericEncoding extends Encoding {
-	value?: number
+    value?: number;
 }
 
 // Warning: (ae-missing-release-tag) "Sort" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -151,9 +152,9 @@ export interface NumericEncoding extends Encoding {
 // @public (undocumented)
 export interface Sort {
     // (undocumented)
-	descending?: boolean
+    descending?: boolean;
     // (undocumented)
-	field: string
+    field: string;
 }
 
 // Warning: (ae-missing-release-tag) "TableBackedItem" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -161,11 +162,11 @@ export interface Sort {
 // @public (undocumented)
 export interface TableBackedItem {
     // (undocumented)
-	columns: string[]
+    columns: string[];
     // (undocumented)
-	get: (column: string) => any
+    get: (column: string) => any;
     // (undocumented)
-	id: string
+    id: string;
 }
 
 // Warning: (ae-missing-release-tag) "TableDef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -173,10 +174,11 @@ export interface TableBackedItem {
 // @public (undocumented)
 export interface TableDef {
     // (undocumented)
-	table: ColumnTable
+    table: ColumnTable;
     // (undocumented)
-	type: ItemType
+    type: ItemType;
 }
 
 // (No @packageDocumentation comment for this package)
+
 ```

packages/types/docsTemp/types.api.md

@@ -3,17 +3,18 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-import type ColumnTable from 'arquero/dist/types/table/column-table'
-import type { ScaleType } from '@thematic/core'
+
+import type ColumnTable from 'arquero/dist/types/table/column-table';
+import type { ScaleType } from '@thematic/core';
 
 // Warning: (ae-missing-release-tag) "ColorEncoding" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface ColorEncoding extends Encoding {
-	scaleName?: string
-	thematicSchemePath?: string
-	uniques?: string[] | number[]
-	value?: string
+    scaleName?: string;
+    thematicSchemePath?: string;
+    uniques?: string[] | number[];
+    value?: string;
 }
 
 // Warning: (ae-missing-release-tag) "ColumnDef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -21,13 +22,13 @@ export interface ColorEncoding extends Encoding {
 // @public (undocumented)
 export interface ColumnDef {
     // (undocumented)
-	dataType: string
+    dataType: string;
     // (undocumented)
-	name: string
+    name: string;
     // (undocumented)
-	readOnly?: boolean
+    readOnly?: boolean;
     // (undocumented)
-	type: ItemType
+    type: ItemType;
 }
 
 // Warning: (ae-missing-release-tag) "ColumnStats" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -35,17 +36,17 @@ export interface ColumnDef {
 // @public (undocumented)
 export interface ColumnStats {
     // (undocumented)
-	dataType?: string
+    dataType?: string;
     // (undocumented)
-	domain: [number, number]
+    domain: [number, number];
     // (undocumented)
-	domain95: [number, number]
+    domain95: [number, number];
     // (undocumented)
-	domain99: [number, number]
+    domain99: [number, number];
     // (undocumented)
-	precision: number
+    precision: number;
     // (undocumented)
-	unique: string[] | number[]
+    unique: string[] | number[];
 }
 
 // Warning: (ae-missing-release-tag) "Community" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -53,20 +54,20 @@ export interface ColumnStats {
 // @public (undocumented)
 export interface Community extends TableBackedItem {
     // (undocumented)
-	childCount: number
+    childCount: number;
     // (undocumented)
-	nodeCount: number
+    nodeCount: number;
     // (undocumented)
-	pid: string
+    pid: string;
 }
 
 // Warning: (ae-missing-release-tag) "DataBinding" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
 export enum DataBinding {
-	Fixed = 'fixed',
-	Palette = 'palette',
-	Scaled = 'scaled',
+    Fixed = "fixed",
+    Palette = "palette",
+    Scaled = "scaled"
 }
 
 // Warning: (ae-missing-release-tag) "DataFile" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -74,17 +75,17 @@ export enum DataBinding {
 // @public
 export interface DataFile {
     // (undocumented)
-	cols?: number
-	name?: string
+    cols?: number;
+    name?: string;
     // (undocumented)
-	origin: FileOrigin
+    origin: FileOrigin;
     // (undocumented)
-	rows?: number
+    rows?: number;
     // (undocumented)
-	table?: ColumnTable
-	tableType?: ItemType
+    table?: ColumnTable;
+    tableType?: ItemType;
     // (undocumented)
-	url: string
+    url: string;
 }
 
 // Warning: (ae-missing-release-tag) "Edge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -92,11 +93,11 @@ export interface DataFile {
 // @public (undocumented)
 export interface Edge extends TableBackedItem {
     // (undocumented)
-	source: string
+    source: string;
     // (undocumented)
-	target: string
+    target: string;
     // (undocumented)
-	weight?: number
+    weight?: number;
 }
 
 // Warning: (ae-missing-release-tag) "Encoding" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -104,38 +105,38 @@ export interface Edge extends TableBackedItem {
 // @public (undocumented)
 export interface Encoding {
     // (undocumented)
-	binding: DataBinding
-	dataType?: string
-	domain?: [number, number]
-	field?: string
-	range?: [number, number]
-	scaleType?: ScaleType
+    binding: DataBinding;
+    dataType?: string;
+    domain?: [number, number];
+    field?: string;
+    range?: [number, number];
+    scaleType?: ScaleType;
 }
 
 // Warning: (ae-missing-release-tag) "FileOrigin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export enum FileOrigin {
-	Local = 'local',
-	Preset = 'preset',
-	Remote = 'remote',
+    Local = "local",
+    Preset = "preset",
+    Remote = "remote"
 }
 
 // Warning: (ae-missing-release-tag) "ItemType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export type ItemType = 'node' | 'community' | 'edge' | 'join'
+export type ItemType = 'node' | 'community' | 'edge' | 'join';
 
 // Warning: (ae-missing-release-tag) "Node" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 interface Node_2 extends TableBackedItem {
     // (undocumented)
-	d?: number
+    d?: number;
     // (undocumented)
-	x: number
+    x: number;
     // (undocumented)
-	y: number
+    y: number;
 }
 export { Node_2 as Node }
 
@@ -143,7 +144,7 @@ export { Node_2 as Node }
 //
 // @public (undocumented)
 export interface NumericEncoding extends Encoding {
-	value?: number
+    value?: number;
 }
 
 // Warning: (ae-missing-release-tag) "Sort" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -151,9 +152,9 @@ export interface NumericEncoding extends Encoding {
 // @public (undocumented)
 export interface Sort {
     // (undocumented)
-	descending?: boolean
+    descending?: boolean;
     // (undocumented)
-	field: string
+    field: string;
 }
 
 // Warning: (ae-missing-release-tag) "TableBackedItem" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -161,11 +162,11 @@ export interface Sort {
 // @public (undocumented)
 export interface TableBackedItem {
     // (undocumented)
-	columns: string[]
+    columns: string[];
     // (undocumented)
-	get: (column: string) => any
+    get: (column: string) => any;
     // (undocumented)
-	id: string
+    id: string;
 }
 
 // Warning: (ae-missing-release-tag) "TableDef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -173,10 +174,11 @@ export interface TableBackedItem {
 // @public (undocumented)
 export interface TableDef {
     // (undocumented)
-	table: ColumnTable
+    table: ColumnTable;
     // (undocumented)
-	type: ItemType
+    type: ItemType;
 }
 
 // (No @packageDocumentation comment for this package)
+
 ```

packages/webapp/package.json

@@ -6,7 +6,8 @@
 	"main": "src/index.ts",
 	"scripts": {
 		"clean": "essex clean build",
-		"start": "essex serve",
+		"start:client": "essex serve",
+		"start": "yarn start:client",
 		"build": "essex bundle && shx cp -r public/* build/"
 	},
 	"dependencies": {
@@ -52,6 +53,7 @@
 		"react-animate-height": "^2.0.23",
 		"react-dom": "^17.0.2",
 		"react-dropzone": "^11.2.0",
+		"react-if": "^4.1.3",
 		"react-infinite-scroller": "^1.2.4",
 		"react-rnd": "^10.2.3",
 		"react-router-dom": "^5.2.0",

packages/webapp/src/App/App.tsx

@@ -6,10 +6,11 @@ import { useMemo } from 'react'
 import { HashRouter, Route } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { LazyCachingSwitch } from '../components/LazyCachingSwitch'
-import { DataManagerPage, GraphViewerPage } from '../pages'
+import { LazyCachingSwitch } from '~/components/LazyCachingSwitch'
+import { DataManagerPage, GraphViewerPage } from '~/pages'
+
 import { usePresetData, useTestFiles, useUrlFiles } from './App.hooks'
-import { CommandBar } from './commands'
+import { CommandBar } from './components/CommandBar'
 import { Footer } from './components/Footer'
 
 export const App: React.FC = () => {

packages/webapp/src/App/commands/modals/ModalButton.tsx

@@ -1,31 +0,0 @@
-/*!
- * Copyright (c) Microsoft. All rights reserved.
- * Licensed under the MIT license. See LICENSE file in the project.
- */
-import { IconButton } from '@fluentui/react'
-import { memo, useCallback } from 'react'
-
-export interface ButtonOptions {
-	iconName: string
-	text: string
-	content?: any
-}
-
-export interface ModalButtonProps extends ButtonOptions {
-	onClick: (title: string) => void
-}
-
-export const ModalButton = memo(function ModalButton({
-	iconName,
-	text,
-	onClick,
-}: ModalButtonProps) {
-	const handleIconClick = useCallback(() => onClick(text), [onClick, text])
-	return (
-		<IconButton
-			iconProps={{ iconName }}
-			title={text}
-			onClick={handleIconClick}
-		/>
-	)
-})

packages/webapp/src/App/components/CommandBar/CommandBar.tsx

@@ -6,8 +6,8 @@ import styled from 'styled-components'
 
 import { COMMANDBAR_HEIGHT, COMMANDBAR_MARGIN, PANEL_WIDTH } from '~/styles'
 
-import { ModalButtons } from './modals/ModalButtons'
-import { Navigation } from './Navigation'
+import { ModalButtons } from './ModalButtons'
+import { NavigationButtons } from './NavigationButtons'
 
 /**
  * This is a universal command bar for navigating and opening modals.
@@ -18,7 +18,7 @@ export const CommandBar = () => {
 		<Container>
 			<FlexContainer>
 				<ButtonGroup>
-					<Navigation />
+					<NavigationButtons />
 				</ButtonGroup>
 				<ButtonGroup>
 					<ModalButtons />

packages/webapp/src/App/components/CommandBar/ModalButtons.tsx

@@ -2,35 +2,46 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
+import { IconButton } from '@fluentui/react'
 import { memo, useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 
-import { Export } from '../../components/Export'
-import { Help } from '../../components/Help'
-import type { ButtonOptions } from './ModalButton'
-import { ModalButton } from './ModalButton'
-import { ModalContainer } from './ModalContainer'
-import { FileDropPanel } from './panels/FileDropPanel'
-import { SettingsContainer } from './panels/SettingsContainer'
+import { ModalContainer } from './modals/ModalContainer'
+import type { ButtonOptions } from './modals/ModalContainer.types'
+import { ModalPageType } from './modals/ModalContainer.types'
 
 const buttonMap: ButtonOptions[] = [
 	{
+		key: 'upload',
 		iconName: 'BulkUpload',
-		text: 'Quick import data',
-		content: <FileDropPanel />,
+		title: 'Quick import data',
+		type: ModalPageType.Upload,
 	},
-	{ iconName: 'PictureLibrary', text: 'Save image', content: <Export /> },
-	{ iconName: 'Settings', text: 'Settings', content: <SettingsContainer /> },
-	{ iconName: 'Help', text: 'Help', content: <Help /> },
+	{
+		key: 'export',
+		iconName: 'PictureLibrary',
+		title: 'Save image',
+		type: ModalPageType.Export,
+	},
+	{
+		key: 'settings',
+		iconName: 'Settings',
+		title: 'Settings',
+		type: ModalPageType.Settings,
+	},
+	{ key: 'help', iconName: 'Help', title: 'Help', type: ModalPageType.Help },
 ]
 
+/**
+ * This is a list of buttons for the CommandBar that each open a modal pane.
+ */
 export const ModalButtons: React.FC = memo(function ModalButtons() {
 	const [isModalOpen, setModalState] = useState<boolean>(false)
 	const [selected, setSelected] = useState<string | undefined>(undefined)
 
 	const handleIconClick = useCallback(
-		(title: string) => {
-			setSelected(title)
+		(key: string) => {
+			setSelected(key)
 			setModalState(!isModalOpen)
 		},
 		[setModalState, isModalOpen],
@@ -42,27 +53,28 @@ export const ModalButtons: React.FC = memo(function ModalButtons() {
 	}, [setModalState])
 
 	const selectedButton = useMemo(
-		() => buttonMap.find(item => item.text === selected),
+		() => buttonMap.find(item => item.key === selected),
 		[selected],
 	)
 
 	return (
 		<Container>
 			{buttonMap.map((item, i) => (
-				<ModalButton
-					key={`modal-button${i}`}
-					iconName={item.iconName}
-					text={item.text}
-					onClick={handleIconClick}
+				<IconButton
+					key={`modal-button_${item.key}`}
+					iconProps={{
+						iconName: item.iconName,
+					}}
+					title={item.title}
+					onClick={() => handleIconClick(item.key)}
 				/>
 			))}
 			{selectedButton && selected ? (
 				<ModalContainer
-					titleId={selectedButton.text}
 					isModalOpen={isModalOpen}
-					title={selectedButton.text}
+					title={selectedButton.title}
 					hideModal={hideModal}
-					content={selectedButton.content}
+					modalType={selectedButton.type}
 				/>
 			) : null}
 		</Container>

packages/webapp/src/App/components/CommandBar/NavigationButtons.tsx

@@ -4,9 +4,13 @@
  */
 import { useLocation } from 'react-router-dom'
 
-import { RouterLinkIconButton } from '../../components/RouterLinkIconButton'
+import { RouterLinkIconButton } from '~/components/RouterLinkIconButton'
 
-export const Navigation: React.FC = () => {
+/**
+ * This is the list of buttons for the command bar that navigate the app pages
+ * @returns
+ */
+export const NavigationButtons: React.FC = () => {
 	const { search, pathname } = useLocation()
 	return (
 		<>

packages/webapp/src/App/components/CommandBar/modals/ModalContainer.tsx

@@ -2,17 +2,27 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import type { IDragOptions, IIconProps } from '@fluentui/react'
+import type {
+	IButtonStyles,
+	IDragOptions,
+	IIconProps,
+	IModalStyleProps,
+	IModalStyles,
+} from '@fluentui/react'
 import { ContextualMenu, IconButton, Modal, Text } from '@fluentui/react'
-import { memo } from 'react'
+import type { IStyleFunctionOrObject } from '@fluentui/utilities'
+import { useThematic } from '@thematic/react'
+import { memo, useMemo } from 'react'
+import { Case, Switch } from 'react-if'
 import styled from 'styled-components'
 
 import { variants } from '~/styles'
 
-import {
-	useIconButtonStyles,
-	useModalStyles,
-} from '../../../pages/GraphViewerPage/GraphViewerPage.hooks'
+import { Export } from '../../Export'
+import { Help } from '../../Help'
+import { ModalPageType } from './ModalContainer.types'
+import { SettingsModal } from './SettingsModal'
+import { UploadModal } from './UploadModal'
 
 const dragOptions: IDragOptions = {
 	moveMenuItemText: 'Move',
@@ -22,28 +32,25 @@ const dragOptions: IDragOptions = {
 const cancelIcon: IIconProps = { iconName: 'Cancel' }
 
 export interface ModalContainerProps {
-	titleId: string
 	title: string
 	hideModal: () => void
 	isModalOpen: boolean
-	content: any
+	modalType: ModalPageType
 }
 
 export const ModalContainer: React.FC<ModalContainerProps> = memo(
 	function ModalContainer({
-		titleId,
 		title,
 		hideModal,
 		isModalOpen,
-		content,
+		modalType,
 	}: ModalContainerProps) {
 		const iconButtonStyles = useIconButtonStyles()
 		const modalStyles = useModalStyles()
-
 		return (
 			<Container className={'modal-container'}>
 				<Modal
-					titleAriaId={titleId}
+					titleAriaId={title}
 					isOpen={isModalOpen}
 					onDismiss={hideModal}
 					isModeless={false}
@@ -65,7 +72,22 @@ export const ModalContainer: React.FC<ModalContainerProps> = memo(
 							onClick={hideModal}
 						/>
 					</Header>
-					<ContentContainer>{content}</ContentContainer>
+					<ContentContainer>
+						<Switch>
+							<Case condition={modalType === ModalPageType.Upload}>
+								<UploadModal />
+							</Case>
+							<Case condition={modalType === ModalPageType.Export}>
+								<Export />
+							</Case>
+							<Case condition={modalType === ModalPageType.Settings}>
+								<SettingsModal />
+							</Case>
+							<Case condition={modalType === ModalPageType.Help}>
+								<Help />
+							</Case>
+						</Switch>
+					</ContentContainer>
 				</Modal>
 			</Container>
 		)
@@ -88,3 +110,32 @@ const ContentContainer = styled.div`
 const Title = styled.span`
 	flex: 2;
 `
+
+export function useIconButtonStyles(): IButtonStyles {
+	const theme = useThematic()
+	return useMemo(
+		() => ({
+			root: {
+				color: theme.application().highContrast().hex(),
+				marginLeft: 'auto',
+				marginTop: '4px',
+				marginRight: '2px',
+			},
+			rootHovered: {
+				color: theme.application().accent().hex(),
+			},
+		}),
+		[theme],
+	)
+}
+
+function useModalStyles(): IStyleFunctionOrObject<
+	IModalStyleProps,
+	IModalStyles
+> {
+	const theme = useThematic()
+	return useMemo(
+		() => ({ main: { background: theme.application().faint().hex() } }),
+		[theme],
+	)
+}

packages/webapp/src/App/components/CommandBar/modals/ModalContainer.types.ts

@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) Microsoft. All rights reserved.
+ * Licensed under the MIT license. See LICENSE file in the project.
+ */
+export interface ButtonOptions {
+	key: string
+	iconName: string
+	title: string
+	type: ModalPageType
+}
+
+export enum ModalPageType {
+	Upload = 'upload',
+	Export = 'export',
+	Settings = 'settings',
+	Help = 'help',
+}

packages/webapp/src/App/components/CommandBar/modals/SettingsModal.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components'
 import { Settings } from '~/App/components/Settings'
 import { useSettings, useSettingsGroups } from '~/state'
 
-export const SettingsContainer: React.FC = () => {
+export const SettingsModal: React.FC = () => {
 	const [settings, setSettings] = useSettings()
 	const groups = useSettingsGroups()
 	const handleSettingsChange = useCallback(

packages/webapp/src/App/components/CommandBar/modals/UploadModal.tsx

@@ -6,16 +6,11 @@ import { DefaultButton } from '@fluentui/react'
 import { FileTable } from '@graph-drilldown/components'
 import styled from 'styled-components'
 
-import { useArqueroBigTable, useArqueroEdgeTable } from '~/arquero'
+import { QuickDrop } from '~/components/QuickDrop'
 import { useFileManagement } from '~/hooks/files'
 
-import { QuickDrop } from '../../../../components/QuickDrop'
-
-export const FileDropPanel: React.FC = () => {
-	const bigTable = useArqueroBigTable()
-	const edgeTable = useArqueroEdgeTable()
-
-	const { files, doClearAll } = useFileManagement()
+export const UploadModal: React.FC = () => {
+	const { files, doClearAll, hasData } = useFileManagement()
 
 	return (
 		<Container>
@@ -24,9 +19,7 @@ export const FileDropPanel: React.FC = () => {
 				<FileTable files={files} />
 			</Files>
 			<Reset>
-				{files.length > 0 ||
-				bigTable.numRows() > 0 ||
-				edgeTable.numRows() > 0 ? (
+				{hasData ? (
 					<DefaultButton text="Clear all" onClick={doClearAll} />
 				) : null}
 			</Reset>

packages/webapp/src/components/FileList/index.tsx

@@ -1,5 +0,0 @@
-/*!
- * Copyright (c) Microsoft. All rights reserved.
- * Licensed under the MIT license. See LICENSE file in the project.
- */
-export * from './FileList'

packages/webapp/src/components/PreviewGraph/index.tsx

@@ -1,5 +0,0 @@
-/*!
- * Copyright (c) Microsoft. All rights reserved.
- * Licensed under the MIT license. See LICENSE file in the project.
- */
-export * from './PreviewGraph'

packages/webapp/src/components/QuickDrop/QuickDrop.tsx

@@ -8,11 +8,7 @@ import { FileOrigin } from '@graph-drilldown/types'
 import { useCallback } from 'react'
 import styled from 'styled-components'
 
-import {
-	useArqueroAddTable,
-	useArqueroBigTable,
-	useArqueroEdgeTable,
-} from '~/arquero'
+import { useArqueroAddTable } from '~/arquero'
 import { useFileManagement } from '~/hooks/files'
 
 import { parseDSVTable } from '../../api'
@@ -37,10 +33,8 @@ export const QuickDrop: React.FC<QuickDropProps> = ({
 	dropHeightSize = SQUARE,
 	compact = false,
 }) => {
-	const bigTable = useArqueroBigTable()
-	const edgeTable = useArqueroEdgeTable()
 	const doAddTable = useArqueroAddTable()
-	const { doAddFile, doClearAll } = useFileManagement()
+	const { doAddFile, doClearAll, hasData } = useFileManagement()
 
 	const handleFileLoad = useCallback(
 		(content: string, type: ItemType, fileName: string) => {
@@ -99,7 +93,7 @@ export const QuickDrop: React.FC<QuickDropProps> = ({
 				</HelperText>
 			) : null}
 			<Reset>
-				{(bigTable.numRows() > 0 || edgeTable.numRows() > 0) && compact ? (
+				{hasData && compact ? (
 					<DefaultButton text="Clear all" onClick={doClearAll} />
 				) : null}
 			</Reset>

packages/webapp/src/hooks/files.ts

@@ -5,7 +5,11 @@
 import type { DataFile } from '@graph-drilldown/types'
 import { useCallback } from 'react'
 
-import { useClearAllTables } from '~/arquero'
+import {
+	useArqueroBigTable,
+	useArqueroEdgeTable,
+	useClearAllTables,
+} from '~/arquero'
 import {
 	useAddFile,
 	useClearFiles,
@@ -23,7 +27,10 @@ export function useFileManagement(): {
 	doClearAll: () => void
 	selectedFile: DataFile | undefined
 	onFileSelected: (file: DataFile | undefined) => void
+	hasData: boolean
 } {
+	const bigTable = useArqueroBigTable()
+	const edgeTable = useArqueroEdgeTable()
 	const resetTables = useClearAllTables()
 
 	const files = useFilesList()
@@ -48,5 +55,7 @@ export function useFileManagement(): {
 		doClearAll,
 		selectedFile,
 		onFileSelected,
+		hasData:
+			bigTable.numRows() > 0 || edgeTable.numRows() > 0 || files.length > 0,
 	}
 }

packages/webapp/src/pages/DataManagerPage/DataManagerPage.tsx

@@ -6,8 +6,8 @@ import type { FC } from 'react'
 import { Suspense } from 'react'
 import styled from 'styled-components'
 
-import { FileList } from '../../components/FileList'
-import { LeftSidePanel } from './LeftSidePanel'
+import { LeftSidePanel } from './components/LeftSidePanel'
+import { MainPanel } from './components/MainPanel'
 
 export const DataManagerPage: FC = () => {
 	return (
@@ -16,9 +16,9 @@ export const DataManagerPage: FC = () => {
 				<LeftSidePanel />
 			</Suspense>
 			<Content>
-				<DropContainer>
-					<FileList />
-				</DropContainer>
+				<MainContainer>
+					<MainPanel />
+				</MainContainer>
 			</Content>
 		</Container>
 	)
@@ -35,7 +35,7 @@ const Content = styled.div`
 	width: 100%;
 `
 
-const DropContainer = styled.div`
+const MainContainer = styled.div`
 	margin-top: 40px;
 	margin-bottom: 20px;
 	width: 800px;

packages/webapp/src/pages/DataManagerPage/components/LeftSidePanel.tsx

@@ -4,11 +4,11 @@
  */
 import styled from 'styled-components'
 
+import { QuickDrop } from '~/components/QuickDrop'
 import { useSettings } from '~/state'
 import { PANEL_WIDTH } from '~/styles'
 
-import { PreviewGraph } from '../../components/PreviewGraph'
-import { QuickDrop } from '../../components/QuickDrop'
+import { PreviewGraph } from './PreviewGraph'
 
 const PREVIEW_SIZE = PANEL_WIDTH - 16
 

packages/webapp/src/pages/DataManagerPage/components/MainPanel.tsx

@@ -7,14 +7,10 @@ import { DefaultButton } from '@fluentui/react'
 import { FileTable } from '@graph-drilldown/components'
 import styled from 'styled-components'
 
-import { useArqueroBigTable, useArqueroEdgeTable } from '~/arquero'
 import { useFileManagement } from '~/hooks/files'
 
-export const FileList: React.FC = () => {
-	const bigTable = useArqueroBigTable()
-	const edgeTable = useArqueroEdgeTable()
-
-	const { files, selectedFile, onFileSelected, doClearAll } =
+export const MainPanel: React.FC = () => {
+	const { files, selectedFile, onFileSelected, doClearAll, hasData } =
 		useFileManagement()
 
 	return (
@@ -26,9 +22,7 @@ export const FileList: React.FC = () => {
 					onClick={onFileSelected}
 				/>
 				<Reset>
-					{files.length > 0 ||
-					bigTable.numRows() > 0 ||
-					edgeTable.numRows() > 0 ? (
+					{hasData ? (
 						<DefaultButton text="Clear all" onClick={doClearAll} />
 					) : null}
 				</Reset>

packages/webapp/src/pages/DataManagerPage/components/PreviewGraph.tsx

@@ -5,10 +5,9 @@
 import { useThematic } from '@thematic/react'
 import { useMemo } from 'react'
 
+import { GraphViewer } from '~/components/GraphViewer'
 import { useInternedGraph } from '~/state/caches'
 
-import { GraphViewer } from '../GraphViewer'
-
 export interface PreviewGraphProps {
 	width: number
 	height: number

packages/webapp/src/pages/GraphViewerPage/GraphViewerPage.hooks.ts

@@ -2,7 +2,6 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-export * from './hooks/theme'
 export * from './hooks/useGraphDimensions'
 export * from './hooks/useLayoutStyle'
 export * from './hooks/useResizeHandlers'

packages/webapp/src/pages/GraphViewerPage/GraphViewerPage.tsx

@@ -6,16 +6,17 @@ import { memo, Suspense, useMemo, useRef, useState } from 'react'
 import type { RndResizeStartCallback } from 'react-rnd'
 import styled from 'styled-components'
 
+import { GraphPanel } from './components/GraphPanel'
+import { LeftSidePanel } from './components/LeftSidePanel'
 import { ResizableBrowser } from './components/ResizableBrowser'
-import { GraphPanel } from './GraphPanel'
+import { RightSidePanel } from './components/RightSidePanel'
+import { StyledSpinnner } from './components/StyledSpinner'
 import {
 	CSSFilter,
 	useGraphDimensions,
 	useLayoutStyle,
 	useResizeHandlers,
 } from './GraphViewerPage.hooks'
-import { LeftSidePanel, RightSidePanel } from './SidePanel'
-import { StyledSpinnner } from './StyledSpinner'
 
 export const GraphViewerPage: React.FC = memo(function GraphViewerPage() {
 	const ref = useRef(null)

packages/webapp/src/pages/GraphViewerPage/SidePanel/index.tsx

@@ -1,6 +0,0 @@
-/*!
- * Copyright (c) Microsoft. All rights reserved.
- * Licensed under the MIT license. See LICENSE file in the project.
- */
-export * from './LeftSidePanel'
-export * from './RightSidePanel'

packages/webapp/src/pages/GraphViewerPage/components/GraphPanel.tsx

@@ -9,7 +9,7 @@ import styled from 'styled-components'
 import { useArqueroHoveredNodes } from '~/arquero'
 import { useDynamicCameraBounds, useInputGraph } from '~/hooks/graph'
 
-import { GraphViewer } from '../../components/GraphViewer'
+import { GraphViewer } from '../../../components/GraphViewer'
 
 const TRANSITION = 1000
 

packages/webapp/src/pages/GraphViewerPage/components/HierarchyBrowserPanel/HierarchyBrowerPanel.hooks.ts

@@ -26,8 +26,8 @@ import {
 	useNavigationState,
 } from '~/state'
 
-import { ROOT_COMMUNITY_ID } from '../../constants'
-import type { NavTreeArray } from '../../types'
+import { ROOT_COMMUNITY_ID } from '../../../../constants'
+import type { NavTreeArray } from '../../../../types'
 
 interface NodeAccum {
 	[id: string]: string | number

packages/webapp/src/pages/GraphViewerPage/components/HierarchyBrowserPanel/HierarchyBrowserPanel.tsx

@@ -22,7 +22,7 @@ import {
 	useGroupedByParentTable,
 } from '~/state'
 
-import { ROOT_COMMUNITY_ID } from '../../constants'
+import { ROOT_COMMUNITY_ID } from '../../../../constants'
 import {
 	useCommunityList,
 	useEntityCallback,

packages/webapp/src/pages/GraphViewerPage/components/LeftSidePanel.tsx

@@ -12,9 +12,9 @@ import { useDataBounds, useStaticInputGraph } from '~/hooks/graph'
 import { useSettings } from '~/state'
 import { BREAD_CRUMB_STYLES, HEADER_HEIGHT, variants } from '~/styles'
 
-import { Minimap } from '../../../components/Minimap'
-import { BreadcrumbPanel } from './PanelComponents/BreadcrumbPanel'
-import { CommunityPanel } from './PanelComponents/CommunityPanel'
+import { Minimap } from './Minimap'
+import { BreadcrumbPanel } from './panels/BreadcrumbPanel'
+import { CommunityPanel } from './panels/CommunityPanel'
 
 const textContainerLabel = 15
 const headerLabelStyle = {

packages/webapp/src/pages/GraphViewerPage/components/Minimap/Minimap.tsx

@@ -15,8 +15,8 @@ import {
 	useMiniMapNodeColor,
 	useNodeIds,
 	useSelectedNodeColor,
-} from '../../hooks/graph'
-import type { Bounds } from '../../types'
+} from '../../../../hooks/graph'
+import type { Bounds } from '../../../../types'
 import { useAOIBounds, usePlotTheme } from './MiniMap.hooks'
 
 export interface MinimapProps {

packages/webapp/src/pages/GraphViewerPage/components/Pivot.css

@@ -1,9 +0,0 @@
-/* Override default button styles for PivotItem */
-#ShapeColorPivot_table {
-	height: 24px;
-	line-height: 24px;
-}
-#ShapeColorPivot_browser {
-	height: 24px;
-	line-height: 24px;
-}

packages/webapp/src/pages/GraphViewerPage/components/PivotContent.tsx

@@ -2,8 +2,6 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-// control style height for pivot items, doesn't seem like option in Pivot Style Props?
-import './Pivot.css'
 
 import { Pivot, PivotItem } from '@fluentui/react'
 import { memo, useCallback } from 'react'
@@ -16,8 +14,11 @@ export interface PivotContentProps {
 	selectedKey: BrowserOptions
 }
 
-const getTabId = (itemKey: string) => {
-	return `ShapeColorPivot_${itemKey}`
+const styles = {
+	link: {
+		height: 24,
+		lineHeight: 24,
+	},
 }
 
 // Pivots content between Community Table and Hierarchy Browser
@@ -38,7 +39,7 @@ export const PivotContent: React.FC<PivotContentProps> = memo(
 					selectedKey={selectedKey}
 					onLinkClick={handleLinkClick}
 					headersOnly={true}
-					getTabId={getTabId}
+					styles={styles}
 				>
 					<PivotItem
 						headerText="Hierarchy browser"

packages/webapp/src/pages/GraphViewerPage/components/ResizableBrowser.tsx

@@ -11,10 +11,10 @@ import styled from 'styled-components'
 import { HEADER_HEIGHT } from '~/styles'
 import { BrowserOptions } from '~/types'
 
-import { CommunitiesTable } from '../../../components/CommunitiesTable'
-import { HierarchyBrowserPanel } from '../../../components/HierarchyBrowserPanel'
 import type { IPosition } from '../GraphViewerPage.hooks'
 import { DIRECTION } from '../hooks/useResizeHandlers'
+import { CommunitiesTable } from './CommunitiesTable'
+import { HierarchyBrowserPanel } from './HierarchyBrowserPanel'
 import { PivotContent } from './PivotContent'
 
 export type Enable = {
@@ -108,8 +108,8 @@ export const ResizableBrowser: React.FC<GraphPanelProps> = memo(
 							iconProps={{
 								iconName,
 							}}
-							text="Resize Viewer"
-							title="Resize Viewer"
+							text="Resize viewer"
+							title="Resize viewer"
 							onClick={handleClick}
 						/>
 						<PivotContent

packages/webapp/src/pages/GraphViewerPage/components/RightSidePanel.tsx

@@ -20,23 +20,23 @@ import {
 	useSetNodesVisible,
 } from '~/state'
 
-import { EdgeColorHeaderLegend } from '../../../components/legends/EdgeColorHeaderLegend'
-import { EdgeOpacityHeaderLegend } from '../../../components/legends/EdgeOpacityHeaderLegend'
-import { EdgeSizeHeaderLegend } from '../../../components/legends/EdgeSizeHeaderLegend'
-import { NodeColorHeaderLegend } from '../../../components/legends/NodeColorHeaderLegend'
-import { NodeOpacityHeaderLegend } from '../../../components/legends/NodeOpacityHeaderLegend'
-import { NodeSizeHeaderLegend } from '../../../components/legends/NodeSizeHeaderLegend'
-import { ColumnEditorPanel } from './PanelComponents/ColumnEditorPanel'
-import { EdgeColorControlsPanel } from './PanelComponents/EdgeColorControlsPanel'
-import { EdgeOpacityControlsPanel } from './PanelComponents/EdgeOpacityControlsPanel'
-import { EdgeSizeControlsPanel } from './PanelComponents/EdgeSizeControlsPanel'
-import { Layout } from './PanelComponents/Layout'
-import { NodeColorControlsPanel } from './PanelComponents/NodeColorControlsPanel'
-import { NodeDetailsPanel } from './PanelComponents/NodeDetailsPanel'
-import { NodeHoverHeader } from './PanelComponents/NodeHoverHeader'
-import { NodeOpacityControlsPanel } from './PanelComponents/NodeOpacityControlsPanel'
-import { NodeSizeControlsPanel } from './PanelComponents/NodeSizeControlsPanel'
-import { SearchPanel } from './PanelComponents/SearchPanel'
+import { EdgeColorHeaderLegend } from './legends/EdgeColorHeaderLegend'
+import { EdgeOpacityHeaderLegend } from './legends/EdgeOpacityHeaderLegend'
+import { EdgeSizeHeaderLegend } from './legends/EdgeSizeHeaderLegend'
+import { NodeColorHeaderLegend } from './legends/NodeColorHeaderLegend'
+import { NodeOpacityHeaderLegend } from './legends/NodeOpacityHeaderLegend'
+import { NodeSizeHeaderLegend } from './legends/NodeSizeHeaderLegend'
+import { ColumnEditorPanel } from './panels/ColumnEditorPanel'
+import { EdgeColorControlsPanel } from './panels/EdgeColorControlsPanel'
+import { EdgeOpacityControlsPanel } from './panels/EdgeOpacityControlsPanel'
+import { EdgeSizeControlsPanel } from './panels/EdgeSizeControlsPanel'
+import { Layout } from './panels/Layout'
+import { NodeColorControlsPanel } from './panels/NodeColorControlsPanel'
+import { NodeDetailsPanel } from './panels/NodeDetailsPanel'
+import { NodeHoverHeader } from './panels/NodeHoverHeader'
+import { NodeOpacityControlsPanel } from './panels/NodeOpacityControlsPanel'
+import { NodeSizeControlsPanel } from './panels/NodeSizeControlsPanel'
+import { SearchPanel } from './panels/SearchPanel'
 
 export const GUTTER = 10
 
@@ -62,9 +62,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ style }) => {
 	return (
 		<Container style={style}>
 			<DisplayRelative>
+				<CollapsiblePanelContainer>
 					<SearchPanel />
 					<NodesHeader />
-				<CollapsiblePanelContainer>
 					<CollapsiblePanel
 						title={'Hovered node'}
 						onRenderHeader={renderNodeHoverHeader}

packages/webapp/src/pages/GraphViewerPage/components/panels/ColumnEditorPanel.tsx

@@ -5,22 +5,18 @@
 import { DefaultButton } from '@fluentui/react'
 import styled from 'styled-components'
 
-import { useArqueroBigTable, useArqueroEdgeTable } from '~/arquero'
 import { useFileManagement } from '~/hooks/files'
 
-import { ColumnEditor } from '../../../../components/ColumnEditor'
+import { ColumnEditor } from '../ColumnEditor'
 
 export const ColumnEditorPanel = () => {
-	const bigTable = useArqueroBigTable()
-	const edgeTable = useArqueroEdgeTable()
-
-	const { doClearAll } = useFileManagement()
+	const { doClearAll, hasData } = useFileManagement()
 
 	return (
 		<Content>
 			<ColumnEditor />
 			<Reset>
-				{bigTable.numRows() > 0 || edgeTable.numRows() > 0 ? (
+				{hasData ? (
 					<DefaultButton text="Clear all" onClick={doClearAll} />
 				) : null}
 			</Reset>

packages/webapp/src/pages/GraphViewerPage/components/panels/CommunityPanel.tsx

@@ -4,7 +4,7 @@
  */
 import { useArqueroVisibleCommunities } from '~/arquero'
 
-import { CommunityList } from '../../../../components/CommunityList'
+import { CommunityList } from '../CommunityList'
 
 export const CommunityPanel: React.FC = () => {
 	const communities = useArqueroVisibleCommunities()

packages/webapp/src/pages/GraphViewerPage/components/panels/EdgeColorControlsPanel.tsx

@@ -4,7 +4,7 @@
  */
 import styled from 'styled-components'
 
-import { EdgeColorControls } from '../../../../components/controls/EdgeColorControls'
+import { EdgeColorControls } from '../controls/EdgeColorControls'
 
 export const EdgeColorControlsPanel = () => {
 	return (

packages/webapp/src/pages/GraphViewerPage/components/panels/EdgeOpacityControlsPanel.tsx

@@ -4,7 +4,7 @@
  */
 import styled from 'styled-components'
 
-import { EdgeOpacityControls } from '../../../../components/controls/EdgeOpacityControls'
+import { EdgeOpacityControls } from '../controls/EdgeOpacityControls'
 
 export const EdgeOpacityControlsPanel = () => {
 	return (

packages/webapp/src/pages/GraphViewerPage/components/panels/EdgeSizeControlsPanel.tsx

@@ -4,7 +4,7 @@
  */
 import styled from 'styled-components'
 
-import { EdgeSizeControls } from '../../../../components/controls/EdgeSizeControls'
+import { EdgeSizeControls } from '../controls/EdgeSizeControls'
 
 export const EdgeSizeControlsPanel = () => {
 	return (

packages/webapp/src/pages/GraphViewerPage/components/panels/NodeColorControlsPanel.tsx

@@ -4,7 +4,7 @@
  */
 import styled from 'styled-components'
 
-import { NodeColorControls } from '../../../../components/controls/NodeColorControls'
+import { NodeColorControls } from '../controls/NodeColorControls'
 
 export const NodeColorControlsPanel = () => {
 	return (

packages/webapp/src/pages/GraphViewerPage/components/panels/NodeListItem.tsx

@@ -6,7 +6,7 @@ import { SelectionState } from '@thematic/core'
 import { useCallback } from 'react'
 import styled from 'styled-components'
 
-import type { TableRowStyles } from '../../../../components/CommunityList/CommunityList.types'
+import type { TableRowStyles } from '../CommunityList/CommunityList.types'
 
 export interface CommunityRowProps {
 	nodeId: string

packages/webapp/src/pages/GraphViewerPage/components/panels/NodeOpacityControlsPanel.tsx

@@ -4,7 +4,7 @@
  */
 import styled from 'styled-components'
 
-import { NodeOpacityControls } from '../../../../components/controls/NodeOpacityControls'
+import { NodeOpacityControls } from '../controls/NodeOpacityControls'
 
 export const NodeOpacityControlsPanel = () => {
 	return (

packages/webapp/src/pages/GraphViewerPage/components/panels/NodeSizeControlsPanel.tsx

@@ -4,7 +4,7 @@
  */
 import styled from 'styled-components'
 
-import { NodeSizeControls } from '../../../../components/controls/NodeSizeControls'
+import { NodeSizeControls } from '../controls/NodeSizeControls'
 
 export const NodeSizeControlsPanel = () => {
 	return (

packages/webapp/src/pages/GraphViewerPage/components/panels/SearchItems.tsx

@@ -12,9 +12,6 @@ import { desc, from } from 'arquero'
 import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
-import { useColumns } from '../../../../components/CommunityList/CommunityList.hooks'
-import type { CommunityRowStyles } from '../../../../components/CommunityList/CommunityList.types'
-import { CommunityRow } from '../../../../components/CommunityList/CommunityRow'
 import { useNodeIds } from '../../../../hooks/graph'
 import {
 	useCommunitySort,
@@ -26,6 +23,9 @@ import {
 	useSetSelectedCommunity,
 	useSetSelectedNodes,
 } from '../../../../state'
+import { useColumns } from '../CommunityList/CommunityList.hooks'
+import type { CommunityRowStyles } from '../CommunityList/CommunityList.types'
+import { CommunityRow } from '../CommunityList/CommunityRow'
 import { NodeListItem } from './NodeListItem'
 import { SearchItemHeader } from './SearchItemHeader'