Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: LEAP-1314: Remove Stale Feature Flag - fflag_feat_front_dev… #6732

Merged
merged 2 commits into from
Dec 2, 2024
Merged

refactor: LEAP-1314: Remove Stale Feature Flag - fflag_feat_front_dev… #6732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
99ba1cb
refactor: LEAP-1314: Remove Stale Feature Flag - fflag_feat_front_dev…
luarmr Nov 27, 2024
38079d6
Merge branch 'develop' into 'fb-leap-1314/remove-stale-feature-flag--…
yyassi-heartex Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion label_studio/core/feature_flags/stale_feature_flags.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
'fflag_fix_front_dev_3666_max_usages_on_region_creation_171122_short': True,
'fflag_fix_front_dev_3617_taxonomy_memory_leaks_fix': True,
'fflag_fix_front_dev_3350_restrict_drawing_area_short': True,
'fflag_feat_front_dev_2984_dm_draggable_columns_short': True,
'fflag_feat_front_dev_2461_audio_paragraphs_seek_chunk_position_short': True,
'ff_front_dev_2432_auto_save_polygon_draft_210622_short': True,
'ff_front_dev_2575_projects_list_performance_280622_short': True,
Expand Down
261 changes: 117 additions & 144 deletions web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,11 @@ import { TableCell, TableCellContent } from "../TableCell/TableCell";
import { TableContext, TableElem } from "../TableContext";
import { getStyle } from "../utils";
import "./TableHead.scss";
import { FF_DEV_2984, FF_DEV_3873, isFF } from "../../../../utils/feature-flags";
import { FF_DEV_3873, isFF } from "../../../../utils/feature-flags";
import { getRoot } from "mobx-state-tree";

const { Block, Elem } = BemWithSpecifiContext();

const is2984FF = isFF(FF_DEV_2984);

const DropdownWrapper = observer(({ column, cellViews, children, onChange }) => {
const types = ViewColumnType._types
.map((t) => t.value)
Expand Down Expand Up @@ -165,157 +163,132 @@ export const TableHead = observer(
ref,
) => {
const { columns, headerRenderers, cellViews } = React.useContext(TableContext);
const states = useLocalStore(() => ({
orderedColumns: {},
setOrderedColumns(updatedColumns) {
states.orderedColumns = { ...updatedColumns };
},
getOrderedColumns() {
return toJS(states.orderedColumns) ?? {};
},
isDragging: false,
setIsDragging(isDragging) {
states.isDragging = isDragging;
},
getIsDragging() {
return toJS(states.isDragging);
},
initialDragPos: false,
setInitialDragPos(initPos) {
states.initialDragPos = initPos;
},
getInitialDragPos() {
return toJS(states.initialDragPos);
},
draggedCol: null,
setDraggedCol(draggedCol) {
states.draggedCol = draggedCol;
},
getDraggedCol() {
return toJS(states.draggedCol);
},
}));
const colRefs = useRef({});
const getUpdatedColOrder = useCallback(
(cols) => {
const orderedColumns = {};

if (is2984FF) {
const states = useLocalStore(() => ({
orderedColumns: {},
setOrderedColumns(updatedColumns) {
states.orderedColumns = { ...updatedColumns };
},
getOrderedColumns() {
return toJS(states.orderedColumns) ?? {};
},
isDragging: false,
setIsDragging(isDragging) {
states.isDragging = isDragging;
},
getIsDragging() {
return toJS(states.isDragging);
},
initialDragPos: false,
setInitialDragPos(initPos) {
states.initialDragPos = initPos;
},
getInitialDragPos() {
return toJS(states.initialDragPos);
},
draggedCol: null,
setDraggedCol(draggedCol) {
states.draggedCol = draggedCol;
},
getDraggedCol() {
return toJS(states.draggedCol);
},
}));
const colRefs = useRef({});
const getUpdatedColOrder = useCallback(
(cols) => {
const orderedColumns = {};

(cols ?? columns).forEach((col, colIndex) => {
orderedColumns[col.id] = colIndex;
});
return orderedColumns;
},
[columns],
);
(cols ?? columns).forEach((col, colIndex) => {
orderedColumns[col.id] = colIndex;
});
return orderedColumns;
},
[columns],
);

useEffect(() => {
ref.current?.addEventListener("mousedown", (event) => {
const className = event.target.className;
useEffect(() => {
ref.current?.addEventListener("mousedown", (event) => {
const className = event.target.className;

// This element could be an SVG element where className is an object, not a string.
if (className?.includes?.("handle")) {
event.preventDefault();
}
});
}, []);
// This element could be an SVG element where className is an object, not a string.
if (className?.includes?.("handle")) {
event.preventDefault();
}
});
}, []);

return (
<Block
name="table-head"
ref={ref}
style={{
...style,
height: isFF(FF_DEV_3873) && 42,
}}
mod={{ droppable: true }}
mix="horizontal-shadow"
onDragOver={useCallback(
(e) => {
const draggedCol = states.getDraggedCol();
return (
<Block
name="table-head"
ref={ref}
style={{
...style,
height: isFF(FF_DEV_3873) && 42,
}}
mod={{ droppable: true }}
mix="horizontal-shadow"
onDragOver={useCallback(
(e) => {
const draggedCol = states.getDraggedCol();

colRefs.current[draggedCol].style.setProperty("--scale", "0");
e.stopPropagation();
},
[states],
)}
>
{columns.map((col) => {
return (
<Elem
name="draggable"
draggable={true}
ref={(ele) => (colRefs.current[col.id] = ele)}
key={col.id}
onDragStart={(e) => {
e.dataTransfer.effectAllowed = "none";
const ele = colRefs.current[col.id];
colRefs.current[draggedCol].style.setProperty("--scale", "0");
e.stopPropagation();
},
[states],
)}
>
{columns.map((col) => {
return (
<Elem
name="draggable"
draggable={true}
ref={(ele) => (colRefs.current[col.id] = ele)}
key={col.id}
onDragStart={(e) => {
e.dataTransfer.effectAllowed = "none";
const ele = colRefs.current[col.id];

states.setInitialDragPos({
x: ele.offsetLeft,
y: ele.offsetTop,
});
states.setDraggedCol(col.id);
}}
onDragEnd={(e) => {
e.stopPropagation();
const draggedCol = states.getDraggedCol();
const curColumns = columns.filter((curCol) => curCol.id !== draggedCol);
const newIndex = curColumns.findIndex((curCol) => {
const colRefrence = colRefs.current[curCol.id];
const mousePos = e.clientX + (ref?.current?.parentElement?.parentElement.scrollLeft ?? 0);
const isGreaterThanPos = mousePos < colRefrence.offsetLeft + colRefrence.clientWidth / 2;
states.setInitialDragPos({
x: ele.offsetLeft,
y: ele.offsetTop,
});
states.setDraggedCol(col.id);
}}
onDragEnd={(e) => {
e.stopPropagation();
const draggedCol = states.getDraggedCol();
const curColumns = columns.filter((curCol) => curCol.id !== draggedCol);
const newIndex = curColumns.findIndex((curCol) => {
const colRefrence = colRefs.current[curCol.id];
const mousePos = e.clientX + (ref?.current?.parentElement?.parentElement.scrollLeft ?? 0);
const isGreaterThanPos = mousePos < colRefrence.offsetLeft + colRefrence.clientWidth / 2;

return isGreaterThanPos;
});
return isGreaterThanPos;
});

colRefs.current[draggedCol].style.setProperty("--scale", "");
colRefs.current[draggedCol].style.setProperty("--scale", "");

states.setDraggedCol(null);
curColumns.splice(newIndex, 0, col);
const updatedColOrder = getUpdatedColOrder(curColumns);
states.setDraggedCol(null);
curColumns.splice(newIndex, 0, col);
const updatedColOrder = getUpdatedColOrder(curColumns);

onDragEnd?.(updatedColOrder);
}}
>
<ColumnRenderer
column={col}
mod={{ draggable: true }}
headerRenderers={headerRenderers}
cellViews={cellViews}
columnHeaderExtra={columnHeaderExtra}
sortingEnabled={sortingEnabled}
stopInteractions={stopInteractions}
decoration={decoration}
onTypeChange={onTypeChange}
onResize={onResize}
onReset={onReset}
/>
</Elem>
);
})}
<Elem name="extra">{extra}</Elem>
</Block>
);
}
return (
<Block name="table-head" ref={ref} style={style} mix="horizontal-shadow">
{columns.map((col) => {
return (
<ColumnRenderer
key={col.id}
column={col}
headerRenderers={headerRenderers}
cellViews={cellViews}
columnHeaderExtra={columnHeaderExtra}
sortingEnabled={sortingEnabled}
stopInteractions={stopInteractions}
decoration={decoration}
onTypeChange={onTypeChange}
onResize={onResize}
onReset={onReset}
/>
onDragEnd?.(updatedColOrder);
}}
>
<ColumnRenderer
column={col}
mod={{ draggable: true }}
headerRenderers={headerRenderers}
cellViews={cellViews}
columnHeaderExtra={columnHeaderExtra}
sortingEnabled={sortingEnabled}
stopInteractions={stopInteractions}
decoration={decoration}
onTypeChange={onTypeChange}
onResize={onResize}
onReset={onReset}
/>
</Elem>
);
})}
<Elem name="extra">{extra}</Elem>
Expand Down
3 changes: 0 additions & 3 deletions web/libs/datamanager/src/utils/feature-flags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,6 @@ export const FF_DEV_2715 = "ff_front_dev_2715_audio_3_280722_short";
// Comments for annotation editor
export const FF_DEV_2887 = "fflag-feat-dev-2887-comments-ui-editor-short";

// toggles the ability to drag columns on the datamanager table
export const FF_DEV_2984 = "fflag_feat_front_dev_2984_dm_draggable_columns_short";

export const FF_DEV_3034 = "fflag-feat-dev-3034-comments-with-drafts-short";

export const FF_DEV_3873 = "fflag_feat_front_dev_3873_labeling_ui_improvements_short";
Expand Down
Loading