in hugegraph-hubble/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CheckAndEditVertex.tsx [330:675]
content: t('addition.operate.modify-success'),
size: 'medium',
showCloseIcon: false
});
}
handleCloseDrawer();
graphViewStore.visNetwork!.unselectAll();
vertexTypeStore.fetchVertexTypeList({ fetchAll: true });
}
}}
key="drawer-manipulation"
>
{isEditVertex ? t('addition.common.save') : t('addition.common.edit')}
</Button>,
<Tooltip
placement="top-start"
tooltipShown={isDeletePop}
modifiers={{
offset: {
offset: '0, 15'
}
}}
tooltipWrapperProps={{
className: 'metadata-graph-tooltips',
style: {
zIndex: 1042
}
}}
tooltipWrapper={
<div ref={deleteWrapperRef}>
{vertexTypeStore.vertexTypeUsingStatus &&
vertexTypeStore.vertexTypeUsingStatus[
vertexTypeStore.selectedVertexType!.name
] ? (
<p style={{ width: 200 }}>
{t('addition.vertex.using-cannot-delete')}
</p>
) : (
<>
<p style={{ marginBottom: 8 }}>
{t('addition.vertex.del-vertex-confirm')}
</p>
<p>{t('addition.edge.confirm-del-edge-careful-notice')}</p>
<p>{t('addition.message.long-time-notice')}</p>
<div
style={{
display: 'flex',
marginTop: 12,
color: '#2b65ff',
cursor: 'pointer'
}}
>
<div
style={{ marginRight: 16, cursor: 'pointer' }}
onClick={handleDeleteVertex}
>
{t('addition.common.confirm')}
</div>
<div
onClick={() => {
switchDeletePop(false);
}}
>
{t('addition.common.cancel')}
</div>
</div>
</>
)}
</div>
}
childrenProps={{
onClick() {
if (isEditVertex) {
handleCloseDrawer();
return;
}
switchDeletePop(true);
}
}}
>
<Button size="medium" style={{ width: 60 }}>
{isEditVertex
? t('addition.common.close')
: t('addition.common.del')}
</Button>
</Tooltip>
]}
>
<div className="metadata-configs-drawer">
<div
className="metadata-title"
style={{ marginBottom: 16, width: 88, textAlign: 'right' }}
>
{t('addition.menu.base-info')}
</div>
<div
className={metadataDrawerOptionClass}
style={{ alignItems: 'center' }}
>
<div className="metadata-drawer-options-name">
<span>{t('addition.vertex.vertex-type-name')}：</span>
</div>
<div style={{ maxWidth: 420 }}>
{vertexTypeStore.selectedVertexType!.name}
</div>
</div>
<div className="metadata-drawer-options">
<div className="metadata-drawer-options-name">
<span
className={
isEditVertex ? 'metadata-drawer-options-name-edit' : ''
}
>
{t('addition.vertex.vertex-style')}：
</span>
</div>
<div className="new-vertex-type-options-colors">
<Select
width={66}
size="medium"
prefixCls="new-fc-one-select-another"
dropdownMatchSelectWidth={false}
showSearch={false}
disabled={!isEditVertex}
value={vertexTypeStore.editedSelectedVertexType.style.color?.toLowerCase()}
onChange={(value: string) => {
vertexTypeStore.mutateEditedSelectedVertexType({
...vertexTypeStore.editedSelectedVertexType,
style: {
color: value,
icon: null,
size:
vertexTypeStore.editedSelectedVertexType.style.size !==
null
? vertexTypeStore.editedSelectedVertexType.style.size
: vertexTypeStore.selectedVertexType!.style.size,
display_fields:
vertexTypeStore.editedSelectedVertexType.style
.display_fields.length !== 0
? vertexTypeStore.editedSelectedVertexType.style
.display_fields
: vertexTypeStore.selectedVertexType!.style
.display_fields
}
});
}}
>
{vertexTypeStore.colorSchemas.map(
(color: string, index: number) => (
<Select.Option
value={color}
key={color}
style={{
display: 'inline-block',
marginLeft: index % 5 === 0 ? 8 : 0,
marginTop: index < 5 ? 6 : 2,
width: 31
}}
>
<div
className={
(vertexTypeStore.editedSelectedVertexType.style
.color !== null
? vertexTypeStore.editedSelectedVertexType.style.color.toLowerCase()
: vertexTypeStore.selectedVertexType!.style.color!.toLowerCase()) ===
color
? 'new-vertex-type-options-border new-vertex-type-options-color'
: 'new-vertex-type-options-no-border new-vertex-type-options-color'
}
style={{
background: color,
marginLeft: -4,
marginTop: 4.4
}}
></div>
</Select.Option>
)
)}
</Select>
</div>
<div className="new-vertex-type-options-colors">
<Select
width={67}
size="medium"
showSearch={false}
disabled={!isEditVertex}
style={{ paddingLeft: 7 }}
value={
vertexTypeStore.editedSelectedVertexType.style.size !== null
? vertexTypeStore.editedSelectedVertexType.style.size
: vertexTypeStore.selectedVertexType!.style.size
}
onChange={(value: string) => {
vertexTypeStore.mutateEditedSelectedVertexType({
...vertexTypeStore.editedSelectedVertexType,
style: {
color:
vertexTypeStore.editedSelectedVertexType.style.color !==
null
? vertexTypeStore.editedSelectedVertexType.style.color.toLowerCase()
: vertexTypeStore.selectedVertexType!.style.color!.toLowerCase(),
icon: null,
display_fields:
vertexTypeStore.editedSelectedVertexType.style
.display_fields.length !== 0
? vertexTypeStore.editedSelectedVertexType.style
.display_fields
: vertexTypeStore.selectedVertexType!.style
.display_fields,
size: value
}
});
}}
>
{vertexTypeStore.vertexSizeSchemas.map((value, index) => (
<Select.Option
value={value.en}
key={value.en}
style={{ width: 66 }}
>
<div
className="new-vertex-type-options-color"
style={{
marginTop: 4,
marginLeft: 5
}}
>
{value.ch}
</div>
</Select.Option>
))}
</Select>
</div>
</div>
<div className={metadataDrawerOptionClass}>
<div className="metadata-drawer-options-name">
<span>{t('addition.common.id-strategy')}：</span>
</div>
{IDStrategyMappings[vertexTypeStore.selectedVertexType!.id_strategy]}
</div>
<div className="metadata-drawer-options">
<div className="metadata-drawer-options-name">
<span>{t('addition.common.association-property')}：</span>
</div>
<div className="metadata-drawer-options-list">
<div className="metadata-drawer-options-list-row">
<span>{t('addition.common.property')}</span>
<span>{t('addition.common.allow-null')}</span>
</div>
{vertexTypeStore.selectedVertexType!.properties.map(
({ name, nullable }) => (
<div className="metadata-drawer-options-list-row" key={name}>
<div style={{ maxWidth: 260 }}>{name}</div>
<div style={{ width: 70, textAlign: 'center' }}>
<Switch
checkedChildren={t('addition.operate.open')}
unCheckedChildren={t('addition.operate.close')}
checked={nullable}
size="large"
disabled
/>
</div>
</div>
)
)}
{isEditVertex &&
vertexTypeStore.editedSelectedVertexType.append_properties.map(
({ name }) => (
<div className="metadata-drawer-options-list-row" key={name}>
<div>{name}</div>
<div style={{ width: 70, textAlign: 'center' }}>
<Switch
checkedChildren={t('addition.operate.open')}
unCheckedChildren={t('addition.operate.close')}
checked={true}
size="large"
disabled
/>
</div>
</div>
)
)}
{isEditVertex && (
<div
className="metadata-drawer-options-list-row"
style={{
color: '#2b65ff',
cursor: 'pointer',
justifyContent: 'normal',
alignItems: 'center'
}}
onClick={() => {
switchIsAddProperty(!isAddProperty);
}}
>
<span style={{ marginRight: 4 }}>
{t('addition.common.add-property')}
</span>
<img src={BlueArrowIcon} alt="toogleAddProperties" />
</div>
)}
{isEditVertex && isAddProperty && (
<div
className="metadata-configs-content-dropdown"
ref={dropdownWrapperRef}
>
{metadataPropertyStore.metadataProperties
.filter(
(property) =>
vertexTypeStore.selectedVertexType!.properties.find(
({ name }) => name === property.name
) === undefined
)
.map((property) => (
<div key={property.name}>
<span>
<Checkbox
checked={
[
...vertexTypeStore.addedPropertiesInSelectedVertextType
].findIndex(
(propertyIndex) => propertyIndex === property.name
) !== -1
}
onChange={() => {
const addedPropertiesInSelectedVertextType =
vertexTypeStore.addedPropertiesInSelectedVertextType;
addedPropertiesInSelectedVertextType.has(
property.name
)
? addedPropertiesInSelectedVertextType.delete(
property.name
)
: addedPropertiesInSelectedVertextType.add(
property.name
);
vertexTypeStore.mutateEditedSelectedVertexType({
...vertexTypeStore.editedSelectedVertexType,
append_properties: [
...addedPropertiesInSelectedVertextType
].map((propertyName) => {