From 49e1df75c048759c41bdf55ffa8fd29b4eaae4d0 Mon Sep 17 00:00:00 2001 From: Raul Martin Date: Thu, 15 Feb 2024 06:24:36 -0800 Subject: [PATCH] refactor: OPTIC-429: Remove unused FF ff_front_dev_1470_dm_pagination_010422_short (#305) --- src/components/MainView/DataView/DataView.js | 390 ------------------ .../MainView/DataView/DataView.styl | 56 --- .../{DataViewOld => DataView}/Table.js | 2 +- .../{DataViewOld => DataView}/Table.styl | 0 src/components/MainView/GridView/GridView.js | 66 ++- .../MainView/GridView/GridView.styl | 3 - .../MainView/GridViewOld/GridView.js | 200 --------- .../MainView/GridViewOld/GridView.styl | 52 --- src/components/MainView/index.js | 6 +- src/mixins/DataStore/DataStore.js | 4 +- src/stores/Tabs/tab.js | 4 +- src/utils/feature-flags.js | 3 - 12 files changed, 58 insertions(+), 728 deletions(-) delete mode 100644 src/components/MainView/DataView/DataView.js delete mode 100644 src/components/MainView/DataView/DataView.styl rename src/components/MainView/{DataViewOld => DataView}/Table.js (99%) rename src/components/MainView/{DataViewOld => DataView}/Table.styl (100%) delete mode 100644 src/components/MainView/GridViewOld/GridView.js delete mode 100644 src/components/MainView/GridViewOld/GridView.styl diff --git a/src/components/MainView/DataView/DataView.js b/src/components/MainView/DataView/DataView.js deleted file mode 100644 index 544abce2..00000000 --- a/src/components/MainView/DataView/DataView.js +++ /dev/null @@ -1,390 +0,0 @@ -import { inject, observer } from "mobx-react"; -import { getRoot } from "mobx-state-tree"; -import { useCallback, useMemo, useState } from "react"; -import { FaQuestionCircle } from "react-icons/fa"; -import { useShortcut } from "../../../sdk/hotkeys"; -import { Block, Elem } from "../../../utils/bem"; -import { FF_DEV_2536, FF_DEV_4008, FF_LOPS_86, FF_OPTIC_2, isFF } from '../../../utils/feature-flags'; -import * as CellViews from "../../CellViews"; -import { Icon } from "../../Common/Icon/Icon"; -import { DEFAULT_PAGE_SIZE, getStoredPageSize, Pagination, setStoredPageSize } from "../../Common/Pagination/Pagination"; -import { ImportButton } from "../../Common/SDKButtons"; -import { Spinner } from "../../Common/Spinner"; -import { Table } from "../../Common/Table/Table"; -import { Tag } from "../../Common/Tag/Tag"; -import { Tooltip } from "../../Common/Tooltip/Tooltip"; -import { GridView } from "../GridView/GridView"; -import "./DataView.styl"; -import { Button } from "../../Common/Button/Button"; -import { useEffect } from "react"; - -const injector = inject(({ store }) => { - const { dataStore, currentView } = store; - let props = { - store, - dataStore, - updated: dataStore.updated, - view: currentView, - viewType: currentView?.type ?? "list", - columns: currentView?.fieldsAsColumns ?? [], - hiddenColumns: currentView?.hiddenColumnsList, - selectedItems: currentView?.selected, - selectedCount: currentView?.selected?.length ?? 0, - isLabeling: store.isLabeling ?? false, - data: dataStore?.list ?? [], - total: dataStore?.total ?? 0, - isLoading: dataStore?.loading ?? true, - isLocked: currentView?.locked ?? false, - hasData: (store.project?.task_count ?? store.project?.task_number ?? dataStore?.total ?? 0) > 0, - focusedItem: dataStore?.selected ?? dataStore?.highlighted, - }; - - return props; -}); - -export const DataView = injector( - observer(({ - store, - data, - columns, - view, - selectedItems, - dataStore, - viewType, - total, - isLoading, - isLabeling, - hiddenColumns = [], - hasData = false, - isLocked, - ...props - }) => { - const [datasetStatusID, setDatasetStatusID] = useState(store.SDK.dataset?.status?.id); - const [currentPageSize, setPageSize] = useState(getStoredPageSize("tasks", DEFAULT_PAGE_SIZE)); - - const setPage = useCallback((page, pageSize) => { - setPageSize(pageSize); - setStoredPageSize("tasks", pageSize); - }, []); - - const focusedItem = useMemo(() => { - return props.focusedItem; - }, [props.focusedItem]); - - const isItemLoaded = useCallback( - (data, index) => { - const rowExists = !!data[index]; - const hasNextPage = dataStore.hasNextPage; - - return !hasNextPage || rowExists; - }, - [dataStore.hasNextPage], - ); - - const columnHeaderExtra = useCallback( - ({ parent, original, help }, decoration) => { - const children = []; - - if (parent) { - children.push( - - {original?.readableType ?? parent.title} - , - ); - } - - if (help && decoration?.help !== false) { - children.push( - - - , - ); - } - - return children.length ? <>{children} : null; - }, - [], - ); - - const onSelectAll = useCallback(() => { - view.selectAll(); - }, [view]); - - const onRowSelect = useCallback((id) => { - view.toggleSelected(id); - }, [view]); - - const onRowClick = useCallback( - async (item, e) => { - const itemID = item.task_id ?? item.id; - - if (store.SDK.type === 'DE') { - store.SDK.invoke('recordPreview', item, columns, getRoot(view).taskStore.associatedList); - } else if (e.metaKey || e.ctrlKey) { - window.open(`./?task=${itemID}`, "_blank"); - } else { - console.log(item); - if (isFF(FF_OPTIC_2)) await self.LSF?.saveDraft(); - - getRoot(view).startLabeling(item); - } - }, - [view, columns], - ); - - const renderContent = (content) => { - if (isLoading && total === 0 && !isLabeling) { - return ( - - - - ); - } else if (store.SDK.type === 'DE' && ['canceled', 'failed'].includes(datasetStatusID)) { - return ( - - Failed to sync data - {isFF(FF_LOPS_86) ? ( - <> - Check your storage settings and resync to import records - - - ) : ( - Check your storage settings. You may need to recreate this dataset - )} - - ); - } else if (store.SDK.type === 'DE' && (total === 0 || data.length === 0 || !hasData) && datasetStatusID === 'completed') { - return ( - - Nothing found - Try adjusting the filter or similarity search parameters - - ); - } else if (store.SDK.type === 'DE' && (total === 0 || data.length === 0 || !hasData)) { - return ( - - Hang tight! Records are syncing in the background - Press the button below to see any synced records - - - ); - } else if (total === 0 || !hasData) { - return ( - - - {hasData ? ( - <> -

Nothing found

- Try adjusting the filter - - ) : ( - "Looks like you have not imported any data yet" - )} - - {!hasData && ( - - - Go to import - - - )} - - ); - } - - return content; - }; - - const decorationContent = (col) => { - const column = col.original; - - if (column.icon) { - return ( - - {column.icon} - - ); - } - - return column.title; - }; - - const commonDecoration = useCallback(( - alias, - size, - align = "flex-start", - help = false, - ) => ({ - alias, - content: decorationContent, - style: (col) => ({ width: col.width ?? size, justifyContent: align }), - help, - }), []); - - const decoration = useMemo( - () => [ - commonDecoration("total_annotations", 60, "center"), - commonDecoration("cancelled_annotations", 60, "center"), - commonDecoration("total_predictions", 60, "center"), - commonDecoration("completed_at", 180, "space-between", true), - commonDecoration("reviews_accepted", 60, "center"), - commonDecoration("reviews_rejected", 60, "center"), - commonDecoration("ground_truth", 60, "center"), - isFF(FF_DEV_2536) && commonDecoration("comment_count", 60, "center"), - isFF(FF_DEV_2536) && commonDecoration("unresolved_comment_count", 60, "center"), - { - resolver: (col) => col.type === "Number", - style(col) { - return /id/.test(col.id) ? { width: 50 } : { width: 110 }; - }, - }, - { - resolver: (col) => col.type === "Image" && col.original && getRoot(col.original)?.SDK?.type !== 'DE', - style: { width: 150, justifyContent: "center" }, - }, - { - resolver: (col) => col.type === "Image" && col.original && getRoot(col.original)?.SDK?.type === 'DE', - style: { width: 150 }, - }, - { - resolver: (col) => ["Date", "Datetime"].includes(col.type), - style: { width: 240 }, - }, - { - resolver: (col) => ["Audio", "AudioPlus"].includes(col.type), - style: { width: 150 }, - }, - ], - [commonDecoration], - ); - - const content = - view.root.isLabeling || viewType === "list" ? ( - col.original.setType(type)} - onColumnResize={(col, width) => { - col.original.setWidth(width); - }} - onColumnReset={(col) => { - col.original.resetWidth(); - }} - /> - ) : ( - view.toggleSelected(id)} - hiddenFields={hiddenColumns} - stopInteractions={isLocked} - /> - ); - - useShortcut("dm.focus-previous", () => { - if (document.activeElement !== document.body) return; - - const task = dataStore.focusPrev(); - - if (isFF(FF_DEV_4008)) getRoot(view).startLabeling(task); - }); - - useShortcut("dm.focus-next", () => { - if (document.activeElement !== document.body) return; - - const task = dataStore.focusNext(); - - if (isFF(FF_DEV_4008)) getRoot(view).startLabeling(task); - }); - - useShortcut("dm.close-labeling", () => { - if (document.activeElement !== document.body) return; - - if (dataStore.selected) store.closeLabeling(); - }); - - useShortcut("dm.open-labeling", () => { - if (document.activeElement !== document.body) return; - - const { highlighted } = dataStore; - // don't close QuickView by Enter - - if (highlighted && !highlighted.isSelected) store.startLabeling(highlighted); - }); - - useEffect(() => { - const updateDatasetStatus = (dataset) => ( - dataset?.status?.id && setDatasetStatusID(dataset?.status?.id) - ); - - getRoot(store).SDK.on("datasetUpdated", updateDatasetStatus); - return () => getRoot(store).SDK.off("datasetUpdated", updateDatasetStatus); - }, []); - - // Render the UI for the table - return ( - - {renderContent(content)} - - {store.mode !== "labelstream" && ( - - { - if (page !== dataStore.page || pageSize !== dataStore.pageSize) { - await dataStore.fetch({ - pageNumber: page, - pageSize, - }); - } - }} - /> - - )} - - ); - }), -); diff --git a/src/components/MainView/DataView/DataView.styl b/src/components/MainView/DataView/DataView.styl deleted file mode 100644 index 94ddf9e5..00000000 --- a/src/components/MainView/DataView/DataView.styl +++ /dev/null @@ -1,56 +0,0 @@ -.data-view - flex 1 - display flex - overflow hidden - flex-direction column - - &_loading - opacity 0.6 - pointer-events none - - &_locked - pointer-events none - - &__footer - display flex - padding 5px 8px - min-height 36px - align-items center - justify-content flex-end - background-color #fff - border-top 1px solid rgba(#000, 0.1) - -.no-results - height 100% - display flex - flex-direction column - justify-content center - align-items center - - &__description - font-size 16px - text-align center - color rgba(#000, 0.6) - -.syncInProgress - height 100% - display flex - flex-direction column - justify-content center - align-items center - font-size 16px - text-align center - color rgba(#000, 0.6) - - .button - color rgba(9, 109, 217, 1) - padding 8px 16px - border 1px solid rgba(9, 109, 217, 0.16) - border-radius 4px - box-shadow none - font-size 16px - font-weight 500 - line-height 24px - letter-spacing 0.15px - &__text - margin-bottom 1em \ No newline at end of file diff --git a/src/components/MainView/DataViewOld/Table.js b/src/components/MainView/DataView/Table.js similarity index 99% rename from src/components/MainView/DataViewOld/Table.js rename to src/components/MainView/DataView/Table.js index 5f696544..4b039a9f 100644 --- a/src/components/MainView/DataViewOld/Table.js +++ b/src/components/MainView/DataView/Table.js @@ -12,7 +12,7 @@ import { Spinner } from "../../Common/Spinner"; import { Table } from "../../Common/TableOld/Table"; import { Tag } from "../../Common/Tag/Tag"; import { Tooltip } from "../../Common/Tooltip/Tooltip"; -import { GridView } from "../GridViewOld/GridView"; +import { GridView } from "../GridView/GridView"; import "./Table.styl"; import { Button } from "../../Common/Button/Button"; import { useState } from "react"; diff --git a/src/components/MainView/DataViewOld/Table.styl b/src/components/MainView/DataView/Table.styl similarity index 100% rename from src/components/MainView/DataViewOld/Table.styl rename to src/components/MainView/DataView/Table.styl diff --git a/src/components/MainView/GridView/GridView.js b/src/components/MainView/GridView/GridView.js index 35766ddb..4e8f7ccb 100644 --- a/src/components/MainView/GridView/GridView.js +++ b/src/components/MainView/GridView/GridView.js @@ -2,6 +2,7 @@ import { observer } from "mobx-react"; import React from "react"; import AutoSizer from "react-virtualized-auto-sizer"; import { FixedSizeGrid } from "react-window"; +import InfiniteLoader from "react-window-infinite-loader"; import { Block, Elem } from "../../../utils/bem"; import { Checkbox } from "../../Common/Checkbox/Checkbox"; import { Space } from "../../Common/Space/Space"; @@ -77,7 +78,7 @@ const GridCell = observer( ); export const GridView = observer( - ({ data, view, fields, onChange, hiddenFields }) => { + ({ data, view, loadMore, fields, onChange, hiddenFields }) => { const columnCount = view.gridWidth ?? 4; const getCellIndex = (row, column) => columnCount * row + column; @@ -131,8 +132,33 @@ export const GridView = observer( ], ); + const onItemsRenderedWrap = (cb) => ({ + visibleRowStartIndex, + visibleRowStopIndex, + overscanRowStopIndex, + overscanRowStartIndex, + }) => { + cb({ + overscanStartIndex: overscanRowStartIndex, + overscanStopIndex: overscanRowStopIndex, + visibleStartIndex: visibleRowStartIndex, + visibleStopIndex: visibleRowStopIndex, + }); + }; + const itemCount = Math.ceil(data.length / columnCount); + const isItemLoaded = React.useCallback( + (index) => { + const rowIndex = index * columnCount; + const rowFullfilled = + data.slice(rowIndex, columnCount).length === columnCount; + + return !view.dataStore.hasNextPage || rowFullfilled; + }, + [columnCount, data, view.dataStore.hasNextPage], + ); + return ( {({ width, height }) => ( - - {renderItem} - + {({ onItemsRendered, ref }) => ( + + {renderItem} + + )} + )} diff --git a/src/components/MainView/GridView/GridView.styl b/src/components/MainView/GridView/GridView.styl index 23977210..8aa63297 100644 --- a/src/components/MainView/GridView/GridView.styl +++ b/src/components/MainView/GridView/GridView.styl @@ -30,9 +30,6 @@ border-radius 2px background none - img - object-fit contain - &::after top 0 left 0 diff --git a/src/components/MainView/GridViewOld/GridView.js b/src/components/MainView/GridViewOld/GridView.js deleted file mode 100644 index 4e8f7ccb..00000000 --- a/src/components/MainView/GridViewOld/GridView.js +++ /dev/null @@ -1,200 +0,0 @@ -import { observer } from "mobx-react"; -import React from "react"; -import AutoSizer from "react-virtualized-auto-sizer"; -import { FixedSizeGrid } from "react-window"; -import InfiniteLoader from "react-window-infinite-loader"; -import { Block, Elem } from "../../../utils/bem"; -import { Checkbox } from "../../Common/Checkbox/Checkbox"; -import { Space } from "../../Common/Space/Space"; -import { getProperty, prepareColumns } from "../../Common/Table/utils"; -import * as DataGroups from "../../DataGroups"; -import "./GridView.styl"; -import { FF_LOPS_E_3, isFF } from "../../../utils/feature-flags"; -import { SkeletonLoader } from "../../Common/SkeletonLoader"; - -const GridHeader = observer(({ row, selected }) => { - return ( - - - - {row.id} - - - ); -}); - -const GridBody = observer(({ row, fields }) => { - const dataFields = fields.filter((f) => f.parent?.alias === "data"); - - return dataFields.map((field, index) => { - const valuePath = field.id.split(":")[1] ?? field.id; - const value = getProperty(row, valuePath); - - return ( - - ); - }); -}); - -const GridDataGroup = observer(({ type, value, field, row }) => { - const DataTypeComponent = DataGroups[type]; - - return (isFF(FF_LOPS_E_3) && row.loading === field.alias) ? : ( - DataTypeComponent ? ( - - ) : ( - - ) - ); -}); - -const GridCell = observer( - ({ view, selected, row, fields, onClick, ...props }) => { - return ( - - - - - - - ); - }, -); - -export const GridView = observer( - ({ data, view, loadMore, fields, onChange, hiddenFields }) => { - const columnCount = view.gridWidth ?? 4; - - const getCellIndex = (row, column) => columnCount * row + column; - - const fieldsData = React.useMemo(() => { - return prepareColumns(fields, hiddenFields); - }, [fields, hiddenFields]); - - const rowHeight = fieldsData - .filter((f) => f.parent?.alias === "data") - .reduce((res, f) => { - const height = (DataGroups[f.currentType] ?? DataGroups.TextDataGroup) - .height; - - return res + height; - }, 16); - - const renderItem = React.useCallback( - ({ style, rowIndex, columnIndex }) => { - const index = getCellIndex(rowIndex, columnIndex); - const row = data[index]; - - if (!row) return null; - - const props = { - style: { - ...style, - marginLeft: "1em", - }, - }; - - return ( - onChange?.(row.id)} - /> - ); - }, - [ - data, - fieldsData, - view.selected, - view, - view.selected.list, - view.selected.all, - columnCount, - ], - ); - - const onItemsRenderedWrap = (cb) => ({ - visibleRowStartIndex, - visibleRowStopIndex, - overscanRowStopIndex, - overscanRowStartIndex, - }) => { - cb({ - overscanStartIndex: overscanRowStartIndex, - overscanStopIndex: overscanRowStopIndex, - visibleStartIndex: visibleRowStartIndex, - visibleStopIndex: visibleRowStopIndex, - }); - }; - - const itemCount = Math.ceil(data.length / columnCount); - - const isItemLoaded = React.useCallback( - (index) => { - const rowIndex = index * columnCount; - const rowFullfilled = - data.slice(rowIndex, columnCount).length === columnCount; - - return !view.dataStore.hasNextPage || rowFullfilled; - }, - [columnCount, data, view.dataStore.hasNextPage], - ); - - return ( - - - {({ width, height }) => ( - - {({ onItemsRendered, ref }) => ( - - {renderItem} - - )} - - )} - - - ); - }, -); diff --git a/src/components/MainView/GridViewOld/GridView.styl b/src/components/MainView/GridViewOld/GridView.styl deleted file mode 100644 index 8aa63297..00000000 --- a/src/components/MainView/GridViewOld/GridView.styl +++ /dev/null @@ -1,52 +0,0 @@ -.grid-view - --column-count 4 - - &__resize - width 100% - - &__list - padding 0 0 16px - - &__cell - padding: 16px 16px 0 0 - box-sizing border-box - - &:nth-child(var(--column-count)) - padding-right: 0; - - &-header - padding 5px - width 100% - display flex - background #f9f9f9 - justify-content space-betwee - - &-content - width 100% - height 100% - cursor pointer - overflow hidden - position relative - border-radius 2px - background none - - &::after - top 0 - left 0 - right 0 - bottom 0 - content "" - border-radius 2px - position absolute - pointer-events none - box-shadow 0 0 0 1px rgba(0,0,0,0.2) inset - - &_selected &-content - background-color #eff7ff - box-shadow 0 0 2px 2px rgba($accent_color, 0.44) - - &::after - box-shadow 0 0 0 1px rgba(26, 144, 255, 0.6) inset - - .skeletonLoader - padding 5px \ No newline at end of file diff --git a/src/components/MainView/index.js b/src/components/MainView/index.js index 6c52e0c8..3f16d593 100644 --- a/src/components/MainView/index.js +++ b/src/components/MainView/index.js @@ -1,5 +1 @@ -import { DataView as DataViewOld } from "./DataViewOld/Table"; -import { DataView as DataViewNew } from "./DataView/DataView"; -import { FF_DEV_1470, isFF } from "../../utils/feature-flags"; - -export const DataView = isFF(FF_DEV_1470) ? DataViewNew : DataViewOld; +export { DataView } from "./DataView/Table"; diff --git a/src/mixins/DataStore/DataStore.js b/src/mixins/DataStore/DataStore.js index 58b11d86..e5b6b1ad 100644 --- a/src/mixins/DataStore/DataStore.js +++ b/src/mixins/DataStore/DataStore.js @@ -2,7 +2,7 @@ import { flow, getRoot, types } from "mobx-state-tree"; import { guidGenerator } from "../../utils/random"; import { isDefined } from "../../utils/utils"; import { DEFAULT_PAGE_SIZE, getStoredPageSize } from "../../components/Common/Pagination/Pagination"; -import { FF_DEV_1470, FF_LOPS_E_3, isFF } from "../../utils/feature-flags"; +import { FF_LOPS_E_3, isFF } from "../../utils/feature-flags"; const listIncludes = (list, id) => { const index = @@ -197,7 +197,7 @@ export const DataStore = ( self.loading = true; - if(interaction === "filter" || ((!isFF(FF_DEV_1470)) && interaction === "ordering") || ((!isFF(FF_DEV_1470)) && reload)) { + if(interaction === "filter" || interaction === "ordering" || reload) { self.page = 1; } else if (reload || isDefined(pageNumber)) { if (self.page === 0) diff --git a/src/stores/Tabs/tab.js b/src/stores/Tabs/tab.js index 2b29f45f..55ecbca6 100644 --- a/src/stores/Tabs/tab.js +++ b/src/stores/Tabs/tab.js @@ -14,7 +14,7 @@ import { TabFilter } from "./tab_filter"; import { TabHiddenColumns } from "./tab_hidden_columns"; import { TabSelectedItems } from "./tab_selected_items"; import { History } from '../../utils/history'; -import { FF_DEV_1470, FF_LOPS_12, isFF } from "../../utils/feature-flags"; +import { FF_LOPS_12, isFF } from "../../utils/feature-flags"; import { CustomJSON, StringOrNumberID, ThresholdType } from "../types"; import { clamp } from "../../utils/helpers"; @@ -253,7 +253,7 @@ export const Tab = types setType(type) { self.type = type; self.root.SDK.invoke("tabTypeChanged", { tab: self.id, type }); - self.save({ reload: isFF(FF_DEV_1470) }); + self.save({ reload: false }); }, setTarget(target) { diff --git a/src/utils/feature-flags.js b/src/utils/feature-flags.js index a1185f59..8d9314eb 100644 --- a/src/utils/feature-flags.js +++ b/src/utils/feature-flags.js @@ -1,9 +1,6 @@ // Outliner + Details export const FF_DEV_1170 = "ff_front_1170_outliner_030222_short"; -// Switch to page navigation -export const FF_DEV_1470 = "ff_front_dev_1470_dm_pagination_010422_short"; - /** * Support for notification links in the Label Steam and the Review Stream. * @link https://app.launchdarkly.com/default/branch/features/feat_front_dev_1752_notification_links_in_label_and_review_streams