Skip to content

Commit 613e049

Browse files
TalMalka123TalMalka123
committed
fmt
1 parent 190e9b4 commit 613e049

File tree

11 files changed

+98
-74
lines changed

11 files changed

+98
-74
lines changed

‎src/components/dagshub/data-engine/CSVViewer/CSVViewer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function CSVViewer({ headers, values }: { headers: string[]; values: stri
3535

3636
const autoSizeStrategy: SizeColumnsToFitGridStrategy = {
3737
type: 'fitGridWidth',
38-
defaultMinWidth: 100
38+
defaultMinWidth: 100,
3939
};
4040

4141
return (

‎src/components/dagshub/data-engine/annotations/LabelStudioPolygonDrawer.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,8 @@ function getSingleAnnotationResultLayers(
173173
const [cx, cy] = pointPercentToPixel([cxPercent, cyPercent], dimension);
174174
const [rx, ry] = pointPercentToPixel([rxPercent, ryPercent], dimension);
175175

176-
const strokeWidth = rx * 2 > minStrokedObjectSize || ry * 2 > minStrokedObjectSize ? polygonStrokeWidth : 0;
176+
const strokeWidth =
177+
rx * 2 > minStrokedObjectSize || ry * 2 > minStrokedObjectSize ? polygonStrokeWidth : 0;
177178

178179
labelLayersPush(
179180
<Ellipse

‎src/components/dagshub/data-engine/metadataKeyValue/CustomTextField.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, {useEffect, useRef, useState} from 'react';
1+
import React, { useEffect, useRef, useState } from 'react';
22
import IconButton from '@mui/material/IconButton';
33
import EditIcon from '@mui/icons-material/Edit';
44
import Box from '@mui/material/Box';
55
import CancelIcon from '@mui/icons-material/Cancel';
66
import StyledTextField from './StyledTextField';
77
import './style.scss';
8-
import {ErroredTooltip, TooltipVariant} from "../../../elements/tooltipV2/ErroredTooltip";
8+
import { ErroredTooltip, TooltipVariant } from '../../../elements/tooltipV2/ErroredTooltip';
99

1010
function CustomTextField({
1111
readOnly,
@@ -78,7 +78,7 @@ function CustomTextField({
7878
};
7979

8080
const handleKeyDown = (event: any) => {
81-
if(event.key === 'ArrowRight' || event.key === 'ArrowLeft'){
81+
if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
8282
event.stopPropagation();
8383
}
8484
if (isEditing && event.key === 'Enter') {
@@ -116,7 +116,13 @@ function CustomTextField({
116116
}, [currentValue, shouldHighlightIfEmpty]);
117117

118118
return (
119-
<ErroredTooltip title={isErrored?"Value is not valid":''} placement={'top'} disableInteractive={true} open={isErrored || isHovered} tooltipVariant={TooltipVariant.Error}>
119+
<ErroredTooltip
120+
title={isErrored ? 'Value is not valid' : ''}
121+
placement={'top'}
122+
disableInteractive={true}
123+
open={isErrored || isHovered}
124+
tooltipVariant={TooltipVariant.Error}
125+
>
120126
<Box
121127
sx={{ width: '100%', height: '100%' }}
122128
onMouseEnter={() => {
@@ -168,7 +174,7 @@ function CustomTextField({
168174
value={getValue()}
169175
placeholder={placeholder}
170176
isErrored={isErrored}
171-
errorColor={"rgba(252, 165, 165, 1)"}
177+
errorColor={'rgba(252, 165, 165, 1)'}
172178
/>
173179
</Box>
174180
</ErroredTooltip>

‎src/components/dagshub/data-engine/metadataKeyValue/MetadataKeyValuePair.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,13 @@ export function MetadataKeyValuePair({
4343
autoFocusKey,
4444
validateValueByType,
4545
}: MetadataKeyValuePairProps) {
46-
4746
const [isErrored, setIsErrored] = React.useState(false);
4847

49-
useEffect(()=>{
50-
if(!!validateValueByType && !!valueType){
51-
setIsErrored(!validateValueByType(valueType, value as string))
48+
useEffect(() => {
49+
if (!!validateValueByType && !!valueType) {
50+
setIsErrored(!validateValueByType(valueType, value as string));
5251
}
53-
},[valueType])
52+
}, [valueType]);
5453

5554
const valueTypes: { id: MetadataType; label: string }[] = [
5655
{
@@ -120,11 +119,11 @@ export function MetadataKeyValuePair({
120119
gap: '8px',
121120
flexShrink: 1,
122121
minWidth: '65%',
123-
height:"100%",
122+
height: '100%',
124123
}}
125124
>
126125
{isNewlyCreated && (
127-
<div style={{width:"100%", maxWidth:"130px"}}>
126+
<div style={{ width: '100%', maxWidth: '130px' }}>
128127
<DropdownV2
129128
onChange={(event, value) => {
130129
if (saveValueTypeLocally) {
@@ -149,20 +148,21 @@ export function MetadataKeyValuePair({
149148
readOnly={!isEditable}
150149
value={value}
151150
onInputSave={(newVal) => {
152-
if (!!validateValueByType && !!valueType){
153-
setIsErrored(!validateValueByType(valueType, newVal as string))
151+
if (!!validateValueByType && !!valueType) {
152+
setIsErrored(!validateValueByType(valueType, newVal as string));
154153
}
155154
if (saveValueLocally) {
156155
saveValueLocally(index, newVal);
157156
}
158157
}}
159158
onInputChange={(newVal) => {
160-
if (!!validateValueByType && !!valueType){
161-
setIsErrored(!validateValueByType(valueType, newVal as string))
162-
}}}
159+
if (!!validateValueByType && !!valueType) {
160+
setIsErrored(!validateValueByType(valueType, newVal as string));
161+
}
162+
}}
163163
placeholder={isNewlyCreated || !value ? 'Add value' : 'Typing...'}
164164
shouldHighlightIfEmpty={shouldHighlightEmptyFields}
165-
isErrored={isErrored}//TODO: add validation
165+
isErrored={isErrored} //TODO: add validation
166166
/>
167167
{isEditable && isRemovable && (
168168
<IconButton

‎src/components/dagshub/data-engine/metadataKeyValue/StyledTextField.tsx

+8-11
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,12 @@ function StyledTextField({
3838
width: width ?? '100%',
3939
'.Mui-focused': {
4040
background: !focusModeDisabled ? `${backgroundColorFocus}!important` : undefined,
41-
boxShadow: !focusModeDisabled && !isErrored
42-
? 'inset 0px 0px 0px 3px rgba(196, 181, 253, 0.5)!important'
43-
: undefined,
41+
boxShadow:
42+
!focusModeDisabled && !isErrored
43+
? 'inset 0px 0px 0px 3px rgba(196, 181, 253, 0.5)!important'
44+
: undefined,
4445
'.MuiOutlinedInput-notchedOutline': {
45-
border: isErrored? `2px solid ${errorColor}!important`: '0px!important',
46+
border: isErrored ? `2px solid ${errorColor}!important` : '0px!important',
4647
},
4748
},
4849
'.MuiInputBase-root': {
@@ -65,15 +66,11 @@ function StyledTextField({
6566
padding: '8px',
6667
},
6768
'.MuiOutlinedInput-notchedOutline': {
68-
borderColor: isErrored
69-
? `${errorColor}!important`
70-
: 'rgba(226, 232, 240, 1)!important',
69+
borderColor: isErrored ? `${errorColor}!important` : 'rgba(226, 232, 240, 1)!important',
7170
'&:hover': {
72-
borderColor: isErrored
73-
? `${errorColor}!important`
74-
: 'rgba(203, 213, 225, 1)!important',
71+
borderColor: isErrored ? `${errorColor}!important` : 'rgba(203, 213, 225, 1)!important',
7572
},
76-
border: isErrored? '2px solid' : setBorder ? '1px solid' : '0px',
73+
border: isErrored ? '2px solid' : setBorder ? '1px solid' : '0px',
7774
},
7875
'.MuiSvgIcon-root ': {
7976
fill: 'rgba(148, 163, 184, 1)',

‎src/components/dagshub/data-engine/queryBuilder/ConditionTextField.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import StyledTextField from '../metadataKeyValue/StyledTextField';
44
import '../metadataKeyValue/style.scss';
55
import { ThemeProvider, Typography } from '@mui/material';
66
import theme from '../../../../theme';
7-
import {useDebounce} from "react-use";
7+
import { useDebounce } from 'react-use';
88

99
export function ConditionTextField({
1010
disabled,
@@ -68,9 +68,13 @@ export function ConditionTextField({
6868
}
6969
};
7070

71-
useDebounce(() => {
72-
onChange(currentValue);
73-
},200, [currentValue]);
71+
useDebounce(
72+
() => {
73+
onChange(currentValue);
74+
},
75+
200,
76+
[currentValue]
77+
);
7478

7579
return (
7680
<ThemeProvider theme={theme}>

‎src/components/dagshub/data-engine/queryBuilder/SimpleCondition.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export function SimpleCondition({
209209
...condition.filter,
210210
key: value?.id,
211211
valueType: metadataFields.find((field) => field.name === value?.label)?.valueType,
212-
}
212+
},
213213
});
214214
}}
215215
options={metadataFields?.map((field) => ({ id: field.name, label: field.name }))}

‎src/components/dagshub/data-engine/singleFileViewModal/SingleFileViewDataSection.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React, { useRef, useState } from 'react';
22
import { Box } from '@mui/system';
3-
import {MetadataKeyValueList, MetadataType, NewMetadataField} from '../metadataKeyValue/MetadataKeyValueList';
3+
import {
4+
MetadataKeyValueList,
5+
MetadataType,
6+
NewMetadataField,
7+
} from '../metadataKeyValue/MetadataKeyValueList';
48
import { Button, ButtonVariant, CustomAccordion } from '../../../elements';
59
import { Icon } from '../../../icons';
610
import { ItemData, SidebarProps, VisualizerProps } from './SingleFileViewModal';
@@ -32,7 +36,6 @@ export function SingleFileViewDataSection({
3236
sidebarRenderers?: React.ReactNode;
3337
validateValueByType?: (valueType: MetadataType, value: string) => boolean;
3438
}) {
35-
3639
const SIDEBAR_WIDTH = 350; //I decided on this number
3740
const ARROWS_SECTION_HEIGHT = 52;
3841

‎src/components/dagshub/data-engine/singleFileViewModal/SingleFileViewModal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Box } from '@mui/system';
22
import React, { useEffect, useRef, useState } from 'react';
33
import { useMediaQuery } from '@mui/material';
4-
import {GenericModal, MetadataField, MetadataType, NewMetadataField, RGB} from '../../index';
4+
import { GenericModal, MetadataField, MetadataType, NewMetadataField, RGB } from '../../index';
55
import './style.scss';
66
import TopButtonsSection from './TopButtonsSection';
77
import { SingleFileViewDataSection } from './SingleFileViewDataSection';

‎src/components/elements/tooltipV2/ErroredTooltip.tsx

+44-28
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,54 @@
1-
import {Tooltip, tooltipClasses, TooltipProps} from "@mui/material";
2-
import React, {ReactElement} from "react";
3-
import {styled} from "@mui/material/styles";
1+
import { Tooltip, tooltipClasses, TooltipProps } from '@mui/material';
2+
import React, { ReactElement } from 'react';
3+
import { styled } from '@mui/material/styles';
44

5-
const StyledTooltip = styled(({className, isEmpty, ...props}: {isEmpty?:boolean}&TooltipProps) => (
6-
<Tooltip {...props} classes={{popper: className}}/>
7-
))(({theme, isEmpty}) => (!isEmpty ?{
8-
[`& .${tooltipClasses.tooltip}`]: {
9-
backgroundColor: 'rgba(254, 226, 226, 1)',
10-
color: 'rgba(23, 45, 50, 1)',
11-
fontSize: theme.typography.pxToRem(12),
12-
fontWeight: 400,
13-
border: '1px solid rgba(254, 202, 202, 1)',
14-
},
15-
}:{[`& .${tooltipClasses.tooltip}`]: {
16-
backgroundColor: 'transparent',
17-
border: '0px',
18-
},}));
5+
const StyledTooltip = styled(
6+
({ className, isEmpty, ...props }: { isEmpty?: boolean } & TooltipProps) => (
7+
<Tooltip {...props} classes={{ popper: className }} />
8+
)
9+
)(({ theme, isEmpty }) =>
10+
!isEmpty
11+
? {
12+
[`& .${tooltipClasses.tooltip}`]: {
13+
backgroundColor: 'rgba(254, 226, 226, 1)',
14+
color: 'rgba(23, 45, 50, 1)',
15+
fontSize: theme.typography.pxToRem(12),
16+
fontWeight: 400,
17+
border: '1px solid rgba(254, 202, 202, 1)',
18+
},
19+
}
20+
: {
21+
[`& .${tooltipClasses.tooltip}`]: {
22+
backgroundColor: 'transparent',
23+
border: '0px',
24+
},
25+
}
26+
);
1927

20-
export const enum TooltipVariant { Default = 'default', Error = 'error'};
28+
export const enum TooltipVariant {
29+
Default = 'default',
30+
Error = 'error',
31+
}
2132

2233
export const ErroredTooltip = ({
23-
title,
24-
tooltipVariant= TooltipVariant.Default,
25-
children,
26-
placement= 'top',
27-
disableInteractive= true,
34+
title,
35+
tooltipVariant = TooltipVariant.Default,
36+
children,
37+
placement = 'top',
38+
disableInteractive = true,
2839
...restProps
29-
}: { tooltipVariant?: TooltipVariant, children: ReactElement<any, any>} & TooltipProps) => {
40+
}: { tooltipVariant?: TooltipVariant; children: ReactElement<any, any> } & TooltipProps) => {
3041
return (
3142
<>
32-
<StyledTooltip {...restProps} title={title} placement={placement} disableInteractive={disableInteractive} isEmpty={title === ''}>
43+
<StyledTooltip
44+
{...restProps}
45+
title={title}
46+
placement={placement}
47+
disableInteractive={disableInteractive}
48+
isEmpty={title === ''}
49+
>
3350
{children}
3451
</StyledTooltip>
3552
</>
36-
)
37-
}
38-
53+
);
54+
};

‎src/stories/dagshub/data-engine/singlefileViewModal/SingleFileViewModal.stories.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import SingleFileViewModal, {
44
ItemData,
55
singleFileViewModalProps,
66
} from '../../../../components/dagshub/data-engine/singleFileViewModal/SingleFileViewModal';
7-
import {MetadataType, NewMetadataField} from '../../../../components';
7+
import { MetadataType, NewMetadataField } from '../../../../components';
88
import { Button } from '@mui/material';
99
import React from 'react';
1010
import { SingleFileViewFileRenderer } from '../../../../components/dagshub/data-engine/singleFileViewModal/SingleFileViewFileRenderer';
@@ -210,11 +210,8 @@ singlefileViewModalWithEditingEnabled.args = {
210210
metadataOnChangeHandler: (metadataList: NewMetadataField[]) => {
211211
// console.log(metadataList)
212212
},
213-
validateValueByType: (
214-
valueType: MetadataType,
215-
value: string,
216-
): boolean => {
217-
if(!value){
213+
validateValueByType: (valueType: MetadataType, value: string): boolean => {
214+
if (!value) {
218215
return true; //Accept empty value, it will be handled separately
219216
}
220217
try {
@@ -237,7 +234,7 @@ singlefileViewModalWithEditingEnabled.args = {
237234
} catch (e) {
238235
return false;
239236
}
240-
}
237+
},
241238
};
242239

243240
export const singlefileViewModalWithSelectAllEnabled: StoryFn<typeof SingleFileViewModal> =

0 commit comments

Comments
 (0)