StatsHouse UI: grid dash

Author: vauweb

statshouse-ui/package-lock.json

@@ -46,10 +46,12 @@
     "react": "^19.1.0",
     "react-data-grid": "^7.0.0-beta.51",
     "react-dom": "^19.1.0",
+    "react-grid-layout": "^1.5.1",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.5.0",
     "react-window": "^1.8.11",
     "remark-gfm": "^4.0.1",
+    "reselect": "^5.1.1",
     "rollup": "^4.39.0",
     "sass": "^1.69.7",
     "typescript": "^5.8.3",
@@ -66,6 +68,7 @@
     "@types/node": "^20.17.12",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.2",
+    "@types/react-grid-layout": "^1.3.5",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
     "prettier": "^3.5.3"

statshouse-ui/package.json

@@ -428,9 +428,9 @@ export function EditForm(props: { isReadonly: boolean; adminMode: boolean; isHis
           </label>
           <div className="col">
             <div id="tagsDraft" className="form-text"></div>
-            {values.tags_draft.map((tag_draft_info, index) => (
+            {values.tags_draft.map((tag_draft_info) => (
               <TagDraft
-                key={index}
+                key={tag_draft_info.name}
                 tag_key={tag_draft_info.name}
                 tag={tag_draft_info}
                 free_tags={free_tags}

statshouse-ui/src/admin/pages/FormPage.tsx

@@ -4,7 +4,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import { invertObj, isEnum, toEnum, toNumber } from '../common/helpers';
+import { invertObj, isEnum, toEnum, toNumber } from '@/common/helpers';
 
 export type Enum<T> = T[keyof T];
 
@@ -36,6 +36,8 @@ export const GET_PARAMS = {
   metricMaxHost: 'mh',
   metricAgg: 'g',
   metricPromQL: 'q',
+  metricGroupKey: 'dg',
+  metricLayout: 'dl',
   /**
    * widget type
    */
@@ -447,3 +449,20 @@ export const TIME_RANGE_ABBREV_DESCRIPTION: Record<TimeRangeAbbrev, string> = {
   [TIME_RANGE_ABBREV.last1y]: 'Last year',
   [TIME_RANGE_ABBREV.last2y]: 'Last 2 years',
 };
+
+export const LAYOUT_WIDGET_SIZE = Object.freeze({
+  [PLOT_TYPE.Metric]: {
+    minW: 2,
+    minH: 2,
+    maxW: 12,
+    maxH: 10,
+  },
+  [PLOT_TYPE.Event]: {
+    minW: 2,
+    minH: 2,
+    maxW: 12,
+    maxH: 10,
+  },
+} as const);
+
+export const LAYOUT_COLUMNS = 12;

statshouse-ui/src/api/enum.ts

@@ -174,6 +174,30 @@ export function useApiTable<T = ApiTable>(
   });
 }
 
+export function useApiTableNoLive<T = ApiTable>(
+  plot: PlotParams,
+  timeRange: TimeRange,
+  variables: Partial<Record<VariableKey, VariableParams>>,
+  key?: string,
+  fromEnd: boolean = false,
+  limit: number = 1000,
+  select?: (response?: ApiTable) => T,
+  enabled: boolean = true
+) {
+  const queryClient = useQueryClient();
+
+  const options = useMemo(
+    () => getTableOptions<ApiTable>(queryClient, plot, timeRange, variables, undefined, key, fromEnd, limit),
+    [queryClient, plot, timeRange, variables, key, fromEnd, limit]
+  );
+
+  return useQuery({
+    ...options,
+    select,
+    enabled,
+  });
+}
+
 type QueryFnTableInfinitePageParam = {
   fromEnd: boolean;
   key: string;

statshouse-ui/src/api/table.ts

@@ -659,7 +659,7 @@ export const Select: FC<SelectProps> = ({
   }, [filterOptions, updatePositionClass, multiple, meOpen, listOnlyOpen]);
 
   const labelWidth = useMemo(() => {
-    const labelsLength = options.map((o) => (o.title || o.value).length).sort((a, b) => b - a);
+    const labelsLength = options.map((o) => (o.name || o.title || o.value).length).sort((a, b) => b - a);
     const k = multiple ? 30 : 0;
     const full = (labelsLength[0] ?? 0) * pxPerChar + k;
     const p75 = (labelsLength[Math.floor(labelsLength.length * 0.25)] ?? 0) * pxPerChar + k;

statshouse-ui/src/components/Select/Select.tsx

@@ -12,7 +12,7 @@ import cn from 'classnames';
 import css from './style.module.css';
 import { freeKeyPrefix, PlotParams, TimeRange } from '@/url2';
 import { useEventTagColumns2 } from '@/hooks/useEventTagColumns2';
-import { ApiTable, useApiTable } from '@/api/table';
+import { ApiTable, useApiTableNoLive } from '@/api/table';
 import { toNumber } from '@/common/helpers';
 import { StatsHouseStore, useStatsHouse } from '@/store2';
 
@@ -69,7 +69,7 @@ export const PlotEventOverlayTable = memo(function PlotEventOverlayTable({
     [plot]
   );
 
-  const queryTable = useApiTable(
+  const queryTable = useApiTableNoLive(
     { ...plot, customAgg: toNumber(agg, 1) },
     range,
     variables,

statshouse-ui/src/components2/Plot/PlotView/PlotEventOverlay/PlotEventOverlayTable.tsx

@@ -16,12 +16,12 @@ import {
   VariableKey,
   VariableParams,
 } from '@/url2';
-import type { StatsHouseStore } from '../statsHouseStore';
+import type { StatsHouseStore } from '@/store2';
 import type { TagKey } from '@/api/enum';
 import { isNotNil, toNumberM } from '@/common/helpers';
-import { clonePlot } from '../../url2/clonePlot';
-import { cloneGroup } from '../../url2/cloneGroup';
-import { cloneVariable } from '../../url2/cloneVariable';
+import { clonePlot } from '@/url2/clonePlot';
+import { cloneGroup } from '@/url2/cloneGroup';
+import { cloneVariable } from '@/url2/cloneVariable';
 
 export type VariableLinks = { variableKey: VariableKey; tag: TagKey };
 

statshouse-ui/src/store2/urlStore/updateParamsPlotStruct.ts

@@ -4,7 +4,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import { StatsHouseStore } from '../statsHouseStore';
+import { StatsHouseStore } from '@/store2';
 import type { PlotKey } from '@/url2';
 import { PLOT_TYPE, type PlotType, QUERY_WHAT, TAG_KEY } from '@/api/enum';
 import { ProduceUpdate } from '../helpers';
@@ -41,7 +41,7 @@ export function updatePlotType(plotKey: PlotKey, nextType: PlotType): ProduceUpd
       }
 
       if (plot.type === PLOT_TYPE.Metric) {
-        store.params.orderPlot.forEach((pK) => {
+        Object.keys(store.params.plots).forEach((pK) => {
           const pl = store.params.plots[pK];
           if (pl?.events.indexOf(plotKey)) {
             pl.events = pl.events.filter((epK) => epK !== plotKey);

statshouse-ui/src/store2/urlStore/updatePlotType.ts

@@ -6,6 +6,7 @@
 
 export const filterInSep = '-';
 export const filterNotInSep = '~';
+export const layoutPlotSplitter = '.';
 export const orderPlotSplitter = '.';
 export const orderGroupSplitter = '.';
 export const orderVariableSplitter = '.';