@ichigo_san/graphing/dist/components/editor/TechnicalTooltip.js

A lightweight UML-style diagram editor built with React Flow and Tailwind CSS

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _technicalDetailsParser = require("../utils/technicalDetailsParser");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const TechnicalTooltip = ({
  element,
  position,
  isVisible
}) => {
  var _element$data, _element$data2;
  if (!isVisible || !element) return null;
  const isNode = element.type === 'node';
  const technicalDetails = isNode ? (0, _technicalDetailsParser.extractTechnicalDetails)(element) : (0, _technicalDetailsParser.extractConnectionTechnicalDetails)(element);
  const elementLabel = ((_element$data = element.data) === null || _element$data === void 0 ? void 0 : _element$data.label) || element.label || 'Unknown Element';
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "technical-tooltip absolute z-50 pointer-events-none",
    style: {
      left: position.x + 10,
      top: position.y + 10
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "tooltip-content bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-3 max-w-xs pointer-events-auto"
  }, /*#__PURE__*/_react.default.createElement("h4", {
    className: "text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2"
  }, elementLabel), /*#__PURE__*/_react.default.createElement("div", {
    className: "tech-badges flex flex-wrap gap-1 mb-2"
  }, technicalDetails.protocol !== 'N/A' && /*#__PURE__*/_react.default.createElement("span", {
    className: `badge ${(0, _technicalDetailsParser.getTechnicalColor)('protocol', technicalDetails.protocol.split(', ')[0])} text-xs px-2 py-1 rounded`
  }, technicalDetails.protocol.split(', ')[0]), isNode && technicalDetails.security !== 'N/A' && /*#__PURE__*/_react.default.createElement("span", {
    className: `badge ${(0, _technicalDetailsParser.getTechnicalColor)('security', technicalDetails.security.split(', ')[0])} text-xs px-2 py-1 rounded`
  }, technicalDetails.security.split(', ')[0]), technicalDetails.performance.latency && /*#__PURE__*/_react.default.createElement("span", {
    className: `badge ${(0, _technicalDetailsParser.getTechnicalColor)('performance', 'latency')} text-xs px-2 py-1 rounded`
  }, technicalDetails.performance.latency), isNode && technicalDetails.scaling !== 'N/A' && /*#__PURE__*/_react.default.createElement("span", {
    className: `badge ${(0, _technicalDetailsParser.getTechnicalColor)('scaling', technicalDetails.scaling.split(', ')[0])} text-xs px-2 py-1 rounded`
  }, technicalDetails.scaling.split(', ')[0]), isNode && technicalDetails.infrastructure !== 'N/A' && /*#__PURE__*/_react.default.createElement("span", {
    className: `badge ${(0, _technicalDetailsParser.getTechnicalColor)('infrastructure', technicalDetails.infrastructure.split(', ')[0])} text-xs px-2 py-1 rounded`
  }, technicalDetails.infrastructure.split(', ')[0]), !isNode && technicalDetails.failureHandling !== 'N/A' && /*#__PURE__*/_react.default.createElement("span", {
    className: "badge bg-red-100 text-red-800 text-xs px-2 py-1 rounded"
  }, technicalDetails.failureHandling.split(', ')[0])), /*#__PURE__*/_react.default.createElement("div", {
    className: "text-xs text-gray-600 dark:text-gray-400 space-y-1"
  }, technicalDetails.protocol !== 'N/A' && /*#__PURE__*/_react.default.createElement("div", null, "Protocol: ", technicalDetails.protocol), technicalDetails.performance.throughput && /*#__PURE__*/_react.default.createElement("div", null, "Throughput: ", technicalDetails.performance.throughput, " req/sec"), technicalDetails.performance.timeout && /*#__PURE__*/_react.default.createElement("div", null, "Timeout: ", technicalDetails.performance.timeout, "s"), isNode && technicalDetails.scaling !== 'N/A' && /*#__PURE__*/_react.default.createElement("div", null, "Scaling: ", technicalDetails.scaling), isNode && technicalDetails.infrastructure !== 'N/A' && /*#__PURE__*/_react.default.createElement("div", null, "Infrastructure: ", technicalDetails.infrastructure), !isNode && technicalDetails.failureHandling !== 'N/A' && /*#__PURE__*/_react.default.createElement("div", null, "Failure Handling: ", technicalDetails.failureHandling)), ((_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.description) && /*#__PURE__*/_react.default.createElement("div", {
    className: "mt-2 pt-2 border-t border-gray-100 dark:border-gray-600"
  }, /*#__PURE__*/_react.default.createElement("p", {
    className: "text-xs text-gray-500 dark:text-gray-400 line-clamp-2"
  }, element.data.description))));
};
var _default = exports.default = TechnicalTooltip;