Merge branch 'main' into bookmark-bar-colors

packages/app/src/atoms/config/upsetConfigAtoms.ts

@@ -1,38 +1,10 @@
-import { UpsetConfig } from '@visdesignlab/upset2-core';
+import { UpsetConfig, DefaultConfig } from '@visdesignlab/upset2-core';
 import { atom } from 'recoil';
 
-export const defaultConfig: UpsetConfig = {
-  plotInformation: {
-    description: '',
-    sets: '',
-    items: '',
-  },
-  firstAggregateBy: 'None',
-  firstOverlapDegree: 2,
-  secondAggregateBy: 'None',
-  secondOverlapDegree: 2,
-  sortVisibleBy: 'Alphabetical',
-  sortBy: 'Size',
-  sortByOrder: 'Descending',
-  filters: {
-    maxVisible: 3,
-    minVisible: 0,
-    hideEmpty: true,
-    hideNoSet: false,
-  },
-  visibleSets: [],
-  visibleAttributes: [],
-  bookmarkedIntersections: [],
-  collapsed: [],
-  plots: {
-    scatterplots: [],
-    histograms: [],
-    wordClouds: [],
-  },
-  allSets: [],
-};
+// fields can be edited here to stray from default config
+const config = { ...DefaultConfig };
 
 export const upsetConfigAtom = atom<UpsetConfig>({
   key: 'app-config',
-  default: defaultConfig,
+  default: config,
 });

packages/core/src/defaultConfig.ts

@@ -0,0 +1,33 @@
+import { UpsetConfig } from './types';
+
+export const DefaultConfig: UpsetConfig = {
+  plotInformation: {
+    description: '',
+    sets: '',
+    items: '',
+  },
+  horizontal: false,
+  firstAggregateBy: 'None',
+  firstOverlapDegree: 2,
+  secondAggregateBy: 'None',
+  secondOverlapDegree: 2,
+  sortVisibleBy: 'Alphabetical',
+  sortBy: 'Size',
+  sortByOrder: 'Descending',
+  filters: {
+    maxVisible: 6,
+    minVisible: 0,
+    hideEmpty: true,
+    hideNoSet: false,
+  },
+  visibleSets: [],
+  visibleAttributes: [],
+  bookmarkedIntersections: [],
+  collapsed: [],
+  plots: {
+    scatterplots: [],
+    histograms: [],
+    wordClouds: [],
+  },
+  allSets: [],
+};

packages/core/src/index.ts

@@ -16,3 +16,4 @@ export * from './aggregate';
 export * from './sort';
 export * from './filter';
 export * from './render';
+export * from './defaultConfig';

packages/core/src/types.ts

@@ -1,14 +1,18 @@
 export type ColumnName = string;
 
 export type Column = {
-  name: string,
-  size: number
+  name: string;
+  size: number;
 };
 
 export type ColumnDefs = {
   [columnName: string]: 'number' | 'boolean' | 'string' | 'label';
 };
 
+export type Meta = {
+  columns: ColumnDefs;
+};
+
 export type PlotInformation = {
   description: string;
   sets: string;
@@ -161,6 +165,7 @@ export type Bookmark = { id: string; label: string; size: number }
 
 export type UpsetConfig = {
   plotInformation: PlotInformation;
+  horizontal: boolean;
   firstAggregateBy: AggregateBy;
   firstOverlapDegree: number;
   secondAggregateBy: AggregateBy;

packages/upset/src/atoms/config/upsetConfigAtoms.ts

@@ -1,39 +1,8 @@
-import { UpsetConfig } from '@visdesignlab/upset2-core';
+import { UpsetConfig, DefaultConfig } from '@visdesignlab/upset2-core';
 import { atom } from 'recoil';
 
 // This config is overruled by any config provided by an external source
-export const defaultConfig: UpsetConfig = {
-  plotInformation: {
-    description: '',
-    sets: '',
-    items: '',
-  },
-  firstAggregateBy: 'None',
-  firstOverlapDegree: 2,
-  secondAggregateBy: 'None',
-  secondOverlapDegree: 2,
-  sortVisibleBy: 'Alphabetical',
-  sortBy: 'Size',
-  sortByOrder: 'Descending',
-  filters: {
-    maxVisible: 3,
-    minVisible: 0,
-    hideEmpty: true,
-    hideNoSet: false,
-  },
-  visibleSets: [],
-  visibleAttributes: [],
-  bookmarkedIntersections: [],
-  collapsed: [],
-  plots: {
-    scatterplots: [],
-    histograms: [],
-    wordClouds: [],
-  },
-  allSets: [],
-};
-
 export const upsetConfigAtom = atom<UpsetConfig>({
   key: 'upset-config',
-  default: defaultConfig,
+  default: DefaultConfig,
 });

packages/upset/src/atoms/provenanceAtom.ts

@@ -1,9 +1,7 @@
-import { UpsetConfig } from '@visdesignlab/upset2-core';
+import { UpsetConfig, DefaultConfig } from '@visdesignlab/upset2-core';
 import { atom } from 'recoil';
 
-import { defaultConfig } from './config/upsetConfigAtoms';
-
 export const stateAtom = atom<UpsetConfig>({
   key: 'upset-state',
-  default: defaultConfig,
+  default: DefaultConfig,
 });

packages/upset/src/components/AltTextSidebar.tsx

@@ -13,7 +13,6 @@ import {
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CloseIcon from '@mui/icons-material/Close';
-import Markdown from 'react-markdown'
 import {
   useState, useEffect, FC, useContext,
 } from 'react';

packages/upset/src/components/AttributeBar.tsx

@@ -1,4 +1,6 @@
-import { Aggregate, FiveNumberSummary, Items, Subset, isRowAggregate } from '@visdesignlab/upset2-core';
+import {
+  Aggregate, FiveNumberSummary, Items, Subset, isRowAggregate,
+} from '@visdesignlab/upset2-core';
 import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 
@@ -40,7 +42,7 @@ export const AttributeBar: FC<Props> = ({ attribute, summary, row }) => {
     <g transform={translate(0, dimensions.attribute.plotHeight / 2)}>
       { row.size > 5
         ? <BoxPlot scale={scale} summary={summary} />
-        : <DotPlot scale={scale} values={values} attribute={attribute} summary={summary} isAggregate={isRowAggregate(row)} />}
+        : <DotPlot scale={scale} values={values} attribute={attribute} summary={summary} isAggregate={isRowAggregate(row)} row={row} />}
     </g>
   );
 };

packages/upset/src/components/AttributeBars.tsx

@@ -20,13 +20,15 @@ export const AttributeBars: FC<Props> = ({ attributes, row }) => {
     <g
       transform={translate(
         dimensions.matrixColumn.width +
-          dimensions.bookmarkStar.gap +
-          dimensions.bookmarkStar.width +
-          dimensions.bookmarkStar.gap +
-          dimensions.size.width +
-          dimensions.gap +
-          dimensions.attribute.width +
-          dimensions.attribute.vGap,
+        dimensions.bookmarkStar.gap +
+        dimensions.bookmarkStar.width +
+        dimensions.bookmarkStar.gap +
+        dimensions.degreeColumn.width +
+        dimensions.degreeColumn.gap +
+        dimensions.size.width +
+        dimensions.gap +
+        dimensions.attribute.width +
+        dimensions.attribute.vGap,
         (dimensions.body.rowHeight - dimensions.attribute.plotHeight) / 2,
       )}
     >

packages/upset/src/components/BackgroundRects.tsx

@@ -27,7 +27,7 @@ export const BackgroundRects = () => {
             <rect
               className={setName}
               css={css`
-                ${hoveredColumn === setName && highlight}
+                ${hoveredColumn.includes(setName) && highlight}
               `}
               height={dimensions.body.height}
               width={dimensions.set.width}

packages/upset/src/components/Degree.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { useRecoilValue } from 'recoil';
+import { dimensionsSelector } from '../atoms/dimensionsAtom';
+import translate from '../utils/transform';
+
+type Props = {
+  degree: number;
+}
+
+export const Degree: FC<Props> = ({ degree }) => {
+  const dimensions = useRecoilValue(dimensionsSelector);
+  return (
+    <g
+      transform={translate(
+        dimensions.matrixColumn.width +
+        dimensions.bookmarkStar.gap +
+        dimensions.bookmarkStar.width +
+        dimensions.bookmarkStar.gap,
+        dimensions.body.rowHeight / 2 + 5,
+      )}
+    >
+      <text>
+        {degree}
+      </text>
+    </g>
+  );
+};

packages/upset/src/components/DeviationBar.tsx

@@ -1,4 +1,3 @@
-import { css } from '@emotion/react';
 import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 
@@ -28,6 +27,8 @@ export const DeviationBar: FC<Props> = ({ deviation }) => {
         dimensions.bookmarkStar.gap +
         dimensions.bookmarkStar.width +
         dimensions.bookmarkStar.gap +
+        dimensions.degreeColumn.width +
+        dimensions.degreeColumn.gap +
         dimensions.size.width +
         dimensions.gap +
         dimensions.attribute.width / 2,

packages/upset/src/components/ForegroundRects.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @emotion/react */
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { visibleSetSelector } from '../atoms/config/visibleSetsAtoms';
 import { dimensionsSelector } from '../atoms/dimensionsAtom';
@@ -12,7 +12,7 @@ export const ForegroundRects = () => {
   const dimensions = useRecoilValue(dimensionsSelector);
   const rows = useRecoilValue(flattenedRowsSelector);
   const setHoveredRow = useSetRecoilState(rowHoverAtom);
-  const setHoveredColumn = useSetRecoilState(columnHoverAtom);
+  const [hoveredColumn, setHoveredColumn] = useRecoilState(columnHoverAtom);
 
   return (
     <>
@@ -28,10 +28,10 @@ export const ForegroundRects = () => {
               width={dimensions.set.width}
               fill="none"
               onMouseEnter={() => {
-                setHoveredColumn(setName);
+                setHoveredColumn([...hoveredColumn, setName]);
               }}
               onMouseLeave={() => {
-                setHoveredColumn(null);
+                setHoveredColumn([]);
               }}
             />
           </g>

packages/upset/src/components/Header/AttributeButton.tsx

@@ -7,14 +7,15 @@ import translate from '../../utils/transform';
 import { ProvenanceContext } from '../Root';
 import { sortByOrderSelector, sortBySelector } from '../../atoms/config/sortByAtom';
 import { contextMenuAtom } from '../../atoms/contextMenuAtom';
+import { HeaderSortArrow } from '../custom/HeaderSortArrow';
 
 /** @jsxImportSource @emotion/react */
 type Props = {
   label: string;
-  sort?: boolean;
+  sortable?: boolean;
 };
 
-export const AttributeButton: FC<Props> = ({ label, sort = false }) => {
+export const AttributeButton: FC<Props> = ({ label, sortable = false }) => {
   const dimensions = useRecoilValue(dimensionsSelector);
   const { actions } = useContext(
     ProvenanceContext,
@@ -23,17 +24,27 @@ export const AttributeButton: FC<Props> = ({ label, sort = false }) => {
   const sortByOrder = useRecoilValue(sortByOrderSelector);
   const setContextMenu = useSetRecoilState(contextMenuAtom);
 
-  const handleContextMenuClose = () => {
-    setContextMenu(null);
-  };
-
   const sortByHeader = (order: SortByOrder) => {
     actions.sortBy(label as SortBy, order);
   };
 
+  const handleOnClick = () => {
+    if (sortable) {
+      if (sortBy !== label) {
+        sortByHeader('Ascending');
+      } else {
+        sortByHeader(sortByOrder === 'Ascending' ? 'Descending' : 'Ascending');
+      }
+    }
+  };
+
+  const handleContextMenuClose = () => {
+    setContextMenu(null);
+  };
+
   const getMenuItems = () => {
     const items = [];
-    if (sort) {
+    if (sortable) {
       items.push(
         {
           label: `Sort by ${label} - Ascending`,
@@ -81,14 +92,15 @@ export const AttributeButton: FC<Props> = ({ label, sort = false }) => {
         '&:hover': {
           opacity: 0.7,
         },
-        cursor: (sort ? 'context-menu' : 'default'),
+        cursor: 'context-menu',
       }}
-      onContextMenu={(e) => {
+      onContextMenu={(e: any) => {
         e.preventDefault();
         e.stopPropagation();
         openContextMenu(e);
       }}
       transform={translate(0, 6)}
+      onClick={handleOnClick}
     >
       <rect
         height={dimensions.attribute.buttonHeight}
@@ -98,17 +110,23 @@ export const AttributeButton: FC<Props> = ({ label, sort = false }) => {
         opacity="0.5"
         strokeWidth="0.3px"
       />
-      <text
-        pointerEvents={sort ? 'default' : 'none'}
-        dominantBaseline="middle"
+      <g
         transform={translate(
           dimensions.attribute.width / 2,
           dimensions.attribute.buttonHeight / 2,
         )}
-        textAnchor="middle"
       >
-        {label}
-      </text>
+        <text
+          id={`header-text-${label}`}
+          pointerEvents={sortable ? 'default' : 'none'}
+          dominantBaseline="middle"
+          textAnchor="middle"
+        >
+          {label}
+        </text>
+        {(sortable && sortBy === label) &&
+          <HeaderSortArrow />}
+      </g>
     </g>
   );
 };