in hugegraph-hubble/hubble-fe/src/components/graph-management/metadata-configs/graph-view/CheckAndEditEdge.tsx [322:782]
content: t('addition.operate.modify-success'),
size: 'medium',
showCloseIcon: false
});
}
handleCloseDrawer();
graphViewStore.visNetwork!.unselectAll();
edgeTypeStore.fetchEdgeTypeList({ fetchAll: true });
}
}}
key="drawer-manipulation"
>
{isEditEdge ? t('addition.common.save') : t('addition.common.edit')}
</Button>,
<Tooltip
placement="top-start"
tooltipShown={isDeletePop}
modifiers={{
offset: {
offset: '0, 10'
}
}}
tooltipWrapperProps={{
className: 'metadata-graph-tooltips',
style: {
zIndex: 1042
}
}}
tooltipWrapper={
<div ref={deleteWrapperRef}>
<p style={{ marginBottom: 8 }}>
{t('addition.edge.confirm-del-edge-type')}
</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={handleDeleteEdge}
>
{t('addition.common.confirm')}
</div>
<div
onClick={() => {
switchDeletePop(false);
}}
>
{t('addition.common.cancel')}
</div>
</div>
</div>
}
childrenProps={{
onClick() {
if (isEditEdge) {
handleCloseDrawer();
return;
}
switchDeletePop(true);
}
}}
>
<Button size="medium" style={{ width: 60 }}>
{isEditEdge ? t('addition.common.close') : t('addition.common.del')}
</Button>
</Tooltip>
]}
>
<div>
<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.common.edge-type-name')}：</span>
</div>
<div style={{ maxWidth: 420 }}>
{edgeTypeStore.selectedEdgeType!.name}
</div>
</div>
<div className="metadata-drawer-options">
<div className="metadata-drawer-options-name">
<span
className={
isEditEdge ? 'metadata-drawer-options-name-edit' : ''
}
>
{t('addition.common.edge-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={!isEditEdge}
value={
<div
className="new-vertex-type-select"
style={{
background:
edgeTypeStore.editedSelectedEdgeType.style.color !==
null
? edgeTypeStore.editedSelectedEdgeType.style.color.toLowerCase()
: edgeTypeStore.selectedEdgeType!.style.color!.toLowerCase(),
marginTop: 5
}}
></div>
}
onChange={(value: string) => {
edgeTypeStore.mutateEditedSelectedEdgeType({
...edgeTypeStore.editedSelectedEdgeType,
style: {
color: value,
icon: null,
with_arrow:
edgeTypeStore.editedSelectedEdgeType.style
.with_arrow !== null
? edgeTypeStore.editedSelectedEdgeType.style
.with_arrow
: edgeTypeStore.selectedEdgeType!.style.with_arrow,
thickness:
edgeTypeStore.editedSelectedEdgeType.style.thickness !==
null
? edgeTypeStore.editedSelectedEdgeType.style.thickness
: edgeTypeStore.selectedEdgeType!.style.thickness,
display_fields:
edgeTypeStore.editedSelectedEdgeType.style
.display_fields.length !== 0
? edgeTypeStore.editedSelectedEdgeType.style
.display_fields
: edgeTypeStore.editedSelectedEdgeType!.style
.display_fields
}
});
}}
>
{edgeTypeStore.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={
(edgeTypeStore.editedSelectedEdgeType.style.color !==
null
? edgeTypeStore.editedSelectedEdgeType.style.color.toLowerCase()
: edgeTypeStore.selectedEdgeType!.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={66}
size="medium"
showSearch={false}
disabled={!isEditEdge}
value={
(
edgeTypeStore.editedSelectedEdgeType.style.with_arrow !==
null
? edgeTypeStore.editedSelectedEdgeType.style.with_arrow
: edgeTypeStore.selectedEdgeType!.style.with_arrow
) ? (
<div>
<img src={NoSelectedSoilidArrowIcon} />
</div>
) : (
<div>
<img src={NoSelectedSoilidStraightIcon} />
</div>
)
}
onChange={(e: any) => {
edgeTypeStore.mutateEditedSelectedEdgeType({
...edgeTypeStore.editedSelectedEdgeType,
style: {
with_arrow: e[0] && e[1] === 'solid',
color:
edgeTypeStore.editedSelectedEdgeType.style.color !==
null
? edgeTypeStore.editedSelectedEdgeType.style.color.toLowerCase()
: edgeTypeStore.selectedEdgeType!.style.color!.toLowerCase(),
icon: null,
thickness:
edgeTypeStore.editedSelectedEdgeType.style.thickness !==
null
? edgeTypeStore.editedSelectedEdgeType.style.thickness
: edgeTypeStore.selectedEdgeType!.style.thickness,
display_fields:
edgeTypeStore.editedSelectedEdgeType.style
.display_fields.length !== 0
? edgeTypeStore.editedSelectedEdgeType.style
.display_fields
: edgeTypeStore.selectedEdgeType!.style.display_fields
}
});
}}
>
{edgeTypeStore.edgeShapeSchemas.map((item, index) => (
<Select.Option
value={[item.flag, item.shape]}
key={item.flag}
style={{ width: 66 }}
>
<div
className="new-vertex-type-options-color"
style={{ marginTop: 5, marginLeft: 5 }}
>
<img
src={
edgeTypeStore.editedSelectedEdgeType.style
.with_arrow === null
? item.flag ===
edgeTypeStore.selectedEdgeType!.style.with_arrow
? item.blueicon
: item.blackicon
: edgeTypeStore.editedSelectedEdgeType.style
.with_arrow === item.flag
? item.blueicon
: item.blackicon
}
alt="toogleEdgeArrow"
/>
</div>
</Select.Option>
))}
</Select>
</div>
<div className="new-vertex-type-options-colors">
<Select
width={66}
size="medium"
showSearch={false}
disabled={!isEditEdge}
style={{ paddingLeft: 7 }}
value={
edgeTypeStore.editedSelectedEdgeType.style.thickness !== null
? edgeTypeStore.editedSelectedEdgeType.style.thickness
: edgeTypeStore.selectedEdgeType!.style.thickness
}
onChange={(value: string) => {
edgeTypeStore.mutateEditedSelectedEdgeType({
...edgeTypeStore.editedSelectedEdgeType,
style: {
with_arrow:
edgeTypeStore.editedSelectedEdgeType.style
.with_arrow !== null
? edgeTypeStore.editedSelectedEdgeType.style
.with_arrow
: edgeTypeStore.selectedEdgeType!.style.with_arrow,
color:
edgeTypeStore.editedSelectedEdgeType.style.color !==
null
? edgeTypeStore.editedSelectedEdgeType.style.color.toLowerCase()
: edgeTypeStore.selectedEdgeType!.style.color!.toLowerCase(),
icon: null,
thickness: value,
display_fields:
edgeTypeStore.editedSelectedEdgeType.style
.display_fields.length !== 0
? edgeTypeStore.editedSelectedEdgeType.style
.display_fields
: edgeTypeStore.selectedEdgeType!.style.display_fields
}
});
}}
>
{edgeTypeStore.thicknessSchemas.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.source-type')}：</span>
</div>
<div style={{ maxWidth: 420 }}>
{edgeTypeStore.selectedEdgeType!.source_label}
</div>
</div>
<div className={metadataDrawerOptionClass}>
<div className="metadata-drawer-options-name">
<span>{t('addition.common.target-type')}：</span>
</div>
<div style={{ maxWidth: 420 }}>
{edgeTypeStore.selectedEdgeType!.target_label}
</div>
</div>
<div className={metadataDrawerOptionClass}>
<div className="metadata-drawer-options-name">
<span>{t('addition.common.allow-multiple-connections')}：</span>
</div>
<Switch
checkedChildren={t('addition.operate.open')}
unCheckedChildren={t('addition.operate.close')}
checked={edgeTypeStore.selectedEdgeType!.link_multi_times}
size="large"
disabled
/>
</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>
{edgeTypeStore.selectedEdgeType!.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>
)
)}
{isEditEdge &&
edgeTypeStore.editedSelectedEdgeType.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.open')}
checked={true}
size="large"
disabled
/>
</div>
</div>
)
)}
{isEditEdge && (
<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>
)}
{isEditEdge && isAddProperty && (
<div
className="metadata-configs-content-dropdown"
ref={dropdownWrapperRef}
>
{metadataPropertyStore.metadataProperties
.filter(
(property) =>
edgeTypeStore.selectedEdgeType!.properties.find(
({ name }) => name === property.name
) === undefined
)
.map((property) => (
<div key={property.name}>
<span>
<Checkbox
checked={
[
...edgeTypeStore.addedPropertiesInSelectedEdgeType
].findIndex(
(propertyIndex) =>
propertyIndex === property.name
) !== -1
}
onChange={() => {
const addedPropertiesInSelectedVertextType =
edgeTypeStore.addedPropertiesInSelectedEdgeType;
addedPropertiesInSelectedVertextType.has(
property.name
)
? addedPropertiesInSelectedVertextType.delete(
property.name
)
: addedPropertiesInSelectedVertextType.add(
property.name
);
edgeTypeStore.mutateEditedSelectedEdgeType({
...edgeTypeStore.editedSelectedEdgeType,
append_properties: [
...addedPropertiesInSelectedVertextType
].map((propertyName) => {