Move useViewport to ui form core (#12578)

### Summary & Motivation

`useViewport` is a useful hook outside of just core. I'm moving it to
`UI` so I can use it in the tagSelector component

### How I Tested These Changes

 buildkite

js_modules/dagit/packages/core/src/gantt/GanttChart.tsx

@@ -9,6 +9,7 @@ import {
   Spinner,
   SpinnerWrapper,
   SplitPanelContainer,
+  useViewport,
 } from '@dagster-io/ui';
 import isEqual from 'lodash/isEqual';
 import * as React from 'react';
@@ -67,7 +68,6 @@ import {GanttStatusPanel} from './GanttStatusPanel';
 import {OptionsContainer, OptionsSpacer} from './VizComponents';
 import {ZoomSlider} from './ZoomSlider';
 import {useGanttChartMode} from './useGanttChartMode';
-import {useViewport} from './useViewport';
 
 export {GanttChartMode} from './Constants';
 

js_modules/dagit/packages/core/src/partitions/AssetJobPartitionsView.tsx

@@ -1,4 +1,4 @@
-import {Box, Button, Colors, Subheading} from '@dagster-io/ui';
+import {Box, Button, Colors, Subheading, useViewport} from '@dagster-io/ui';
 import React from 'react';
 
 import {useAssetGraphData} from '../asset-graph/useAssetGraphData';
@@ -9,7 +9,6 @@ import {
   isTimeseriesDimension,
 } from '../assets/MultipartitioningSupport';
 import {usePartitionHealthData} from '../assets/usePartitionHealthData';
-import {useViewport} from '../gantt/useViewport';
 import {RepositorySelector} from '../graphql/types';
 import {DagsterTag} from '../runs/RunTag';
 import {repoAddressToSelector} from '../workspace/repoAddressToSelector';

js_modules/dagit/packages/core/src/partitions/OpJobPartitionsView.tsx

@@ -1,10 +1,9 @@
 import {gql, useQuery} from '@apollo/client';
-import {Box, Button, Dialog, Icon, Tooltip, Colors, Subheading} from '@dagster-io/ui';
+import {Box, Button, Dialog, Icon, Tooltip, Colors, Subheading, useViewport} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {usePermissionsForLocation} from '../app/Permissions';
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
-import {useViewport} from '../gantt/useViewport';
 import {DagsterTag} from '../runs/RunTag';
 import {Loading} from '../ui/Loading';
 import {repoAddressToSelector} from '../workspace/repoAddressToSelector';

js_modules/dagit/packages/core/src/partitions/PartitionStatus.tsx

@@ -1,8 +1,7 @@
-import {Box, Tooltip, Colors} from '@dagster-io/ui';
+import {Box, Tooltip, Colors, useViewport} from '@dagster-io/ui';
 import * as React from 'react';
 import styled from 'styled-components/macro';
 
-import {useViewport} from '../gantt/useViewport';
 import {RunStatus} from '../graphql/types';
 
 import {assembleIntoSpans} from './SpanRepresentation';

js_modules/dagit/packages/core/src/partitions/PartitionStepStatus.tsx

@@ -9,6 +9,7 @@ import {
   MenuItem,
   Menu,
   Popover,
+  useViewport,
 } from '@dagster-io/ui';
 import * as React from 'react';
 import styled from 'styled-components/macro';
@@ -23,7 +24,6 @@ import {
 } from '../assets/usePartitionHealthData';
 import {GanttChartMode} from '../gantt/Constants';
 import {buildLayout} from '../gantt/GanttChartLayout';
-import {useViewport} from '../gantt/useViewport';
 import {RunStatus} from '../graphql/types';
 import {linkToRunEvent} from '../runs/RunUtils';
 import {RunFilterToken} from '../runs/RunsFilterInput';

js_modules/dagit/packages/core/src/ticks/EvaluateScheduleDialog.tsx

@@ -15,6 +15,7 @@ import {
   Spinner,
   Subheading,
   Tag,
+  useViewport,
 } from '@dagster-io/ui';
 import React from 'react';
 import styled from 'styled-components/macro';
@@ -23,7 +24,6 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment';
 import {PythonErrorInfo} from '../app/PythonErrorInfo';
 import {TimezoneContext} from '../app/time/TimezoneContext';
 import {timestampToString} from '../app/time/timestampToString';
-import {useViewport} from '../gantt/useViewport';
 import {testId} from '../testing/testId';
 import {repoAddressToSelector} from '../workspace/repoAddressToSelector';
 import {RepoAddress} from '../workspace/types';

js_modules/dagit/packages/ui/package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@react-hook/resize-observer": "^1.2.6",
+    "amator": "^1.1.0",
     "codemirror": "^5.65.2",
     "deepmerge": "^4.2.2",
     "react-codemirror2": "^7.2.1",

js_modules/dagit/packages/core/src/gantt/useViewport.tsx → js_modules/dagit/packages/ui/src/components/useViewport.tsx

@@ -1,7 +1,12 @@
 import animate from 'amator';
 import * as React from 'react';
 
-import {GanttViewport} from './Constants';
+export interface Viewport {
+  left: number; // Note: pixel values
+  top: number;
+  width: number;
+  height: number;
+}
 
 type ContainerRef = {
   element: HTMLDivElement;
@@ -155,7 +160,7 @@ export const useViewport = (
   );
 
   return {
-    viewport: {...offset, ...size} as GanttViewport,
+    viewport: {...offset, ...size} as Viewport,
     containerProps: {
       ref: setRef,
       onScroll,

js_modules/dagit/packages/ui/src/index.ts

@@ -38,6 +38,7 @@ export * from './components/Suggest';
 export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/Tag';
+export * from './components/TagSelector';
 export * from './components/Text';
 export * from './components/TextInput';
 export * from './components/Toaster';
@@ -48,6 +49,7 @@ export * from './components/Warning';
 export * from './components/styles';
 export * from './components/useSuggestionsForString';
 export * from './components/ErrorBoundary';
+export * from './components/useViewport';
 
 // Global font styles, exported as styled-component components to render in
 // your app tree root. E.g. <GlobalInconsolata />

js_modules/dagit/packages/ui/src/types/amator.d.ts

@@ -0,0 +1 @@
+declare module 'amator';

js_modules/dagit/yarn.lock

@@ -6488,6 +6488,7 @@ __metadata:
     "@types/rollup-plugin-node-globals": ^1
     "@types/styled-components": ^5
     "@types/testing-library__jest-dom": ^5.14.2
+    amator: ^1.1.0
     babel-jest: ^27.4.6
     babel-loader: ^8.2.4
     babel-plugin-macros: ^3.1.0