export function addGraphNodes()

in hugegraph-hubble/hubble-fe/src/stores/utils/index.ts [127:200]

• 60 lines of code
• 7 McCabe index (conditional complexity)

export function addGraphNodes(
  collection: GraphNode[],
  visGraphNodes: vis.data.DataSet<GraphNode>,
  vertexSizeMapping: Record<string, string>,
  colorMappings: Record<string, string>,
  displayFieldMappings: Record<string, string[]>
) {
  collection.forEach(({ id, label, properties }) => {
    const joinedLabel = !isUndefined(displayFieldMappings[label])
      ? displayFieldMappings[label]
          .map((field) => (field === '~id' ? id : properties[field]))
          .filter((label) => label !== undefined && label !== null)
          .join('-')
      : id;

    visGraphNodes.add({
      id,
      label:
        size(joinedLabel) <= 15
          ? joinedLabel
          : joinedLabel.slice(0, 15) + '...',
      vLabel: label,
      value: vertexRadiusMapping[vertexSizeMapping[label]],
      font: { size: 16 },
      properties,
      title: `
            <div class="tooltip-fields">
              <div>${i18next.t('addition.common.vertex-type')}：</div>
              <div>${label}</div>
            </div>
            <div class="tooltip-fields">
              <div>${i18next.t('addition.common.vertex-id')}：</div>
              <div>${id}</div>
            </div>
            ${Object.entries(properties)
              .map(([key, value]) => {
                return `<div class="tooltip-fields">
                          <div>${key}: </div>
                          <div>${convertArrayToString(value)}</div>
                        </div>`;
              })
              .join('')}
          `,
      color: {
        background: colorMappings[label] || '#5c73e6',
        border: colorMappings[label] || '#5c73e6',
        highlight: { background: '#fb6a02', border: '#fb6a02' },
        hover: { background: '#ec3112', border: '#ec3112' }
      },
      // reveal label when zoom to max
      scaling: {
        label: {
          max: Infinity,
          maxVisible: Infinity
        }
      },
      chosen: {
        node(values: any, id: string, selected: boolean, hovering: boolean) {
          if (hovering || selected) {
            values.shadow = true;
            values.shadowColor = 'rgba(0, 0, 0, 0.6)';
            values.shadowX = 0;
            values.shadowY = 0;
            values.shadowSize = 25;
          }

          if (selected) {
            values.size += 5;
          }
        }
      }
    });
  });
}