تلميحات الأدوات

تقوم خيارات قائمة تلميحات الأدوات بتكوين تلميحات الأدوات الافتراضية والمخصصة للعقد والحواف.

افتراضيًا:

• تم تمكين تلميحات الأدوات.
• تأتي عناوين/ترجمات العقدة والحافة من خرائط الرأس الخاصة بها.
• تأتي الخصائص من خرائط خصائص العقدة/الحافة.

تعطيل تلميحات الأدوات

بسيط جدًا عن طريق تعيين الخاصية enabled على false.

const options = {
    UI: {
        tooltip: { 
            enabled: false
        }
    }
}

اختيار ما يظهر تلميح الأداة

enabled يأخذ أيضًا خريطة للأنواع أو الوظائف، للرسم البياني الذي يريد تلميحات الأدوات على بعض يحوم فقط. الأنواع هي nodes و edges و groups المجموعات تبسيط توجه. المفتاح المفقود هو true، لذلك { edges: false } يحتفظ بالعقد والمجموعات.

الرسم البياني الذي تنمو عقده بالفعل إلى بطاقة تفصيلية عند التمرير ليس له أي استخدام لتلميح أداة العقدة، لكن المجموعة تشرح نفسها فقط في تلميح الأدوات الخاص بها قبل فتحها:

const options = {
    UI: {
        tooltip: { 
            enabled: { nodes: false, edges: false, groups: true }
        }
    }
}

يتم سؤال دالة عند كل تمريرة، مع العنصر ونوعه ('node'، 'edge' أو 'group'). الدالة التي ترمي false، ويتم تسجيل الخطأ مرة واحدة لكل عنصر.

const options = {
    UI: {
        tooltip: { 
            enabled: (element, kind) => kind === 'node' && element.getData().important === true
        }
    }
}

يتم استبعاد تلميح الأداة نفسه فقط عندما يكون enabled هو false، أو خريطة مع إيقاف تشغيل كل نوع.

تعيين الرأس

على غرار التعيين الذي تم إجراؤه في الرأس الرئيسي بالشريط الجانبي، يمكنك توفير تعيين لرأس تلميح الأداة لكل من العقد والحواف.

Mapping for node and edge

const options = {
    UI: {
        tooltip: {  
            nodeHeaderMap: {
                title: node => `Node ${node.id}`,
                subtitle: node => node.data.description ?? ''
            },
            edgeHeaderMap: {
                title: edge => `Edge ${edge.from} → ${edge.to}`,
                subtitle: edge => edge.data.label ?? ''
            }
        }
    }
}

محتوى إضافي

على غرار المحتوى الإضافي الموجود في الشريط الجانبي، يمكنك تحديد محتوى إضافي ليتم إلحاقه في نهاية تلميح الأداة.

Extra content

const options = {
    UI: {
        tooltip: { 
            renderNodeExtra: (node) => {
                const div = document.createElement('div')
                div.textContent = `Type: ${node.data.type ?? 'Unknown'}`
                return div
            },
            renderEdgeExtra: (edge) => `Weight: ${edge.data.weight ?? '0'}`
        }
    }
}

تقديم مخصص

وأخيرًا، يمكنك تجاوز محتوى تلميح الأداة بالكامل باستخدام الوظيفة render.

Custom tooltip

const options = {
    UI: {
        tooltip: {
            render: (element) => {
                const div = document.createElement('div')
                div.textContent = `Element ID: ${element.id}`
                div.style.fontWeight = 'bold'
                return div
            }
        }
    }
}

جلب محتوى تلميح الأداة

render، renderNodeExtra، renderEdgeExtra، nodePropertiesMap و edgePropertiesMap قد يكون كله async. يعرض تلميح الأداة عنصرًا نائبًا أثناء الوعد معلق، ويستبدل المحتوى عندما يتم حله، ويعيد وضعه نفسه بحيث يبقى تلميح الأدوات المتنامي على الشاشة.

const options = {
    UI: {
        tooltip: {
            renderNodeExtra: async (node, { signal }) => { 
                const res = await fetch(`/enrich/${node.getData().uuid}`, { signal })
                return renderChips(await res.json())
            },
        },
    },
}

تلميح الأداة هو السطح الذي يهمه الأمر أكثر، لأنه مفرد الحاوية المُعاد استخدامها مفتوحة بعد تأخير قدره 400 مللي ثانية: بدأ الجلب لعقدة واحدة بخلاف ذلك قد يقع في تلميح أداة يصف بالفعل أداة أخرى. لا يمكن هنا - يؤدي تحريك العقدة الثانية إلى إحباط العرض الأول signal وإسقاط نتيجته، حتى لو تم حلها أخيرًا. راجع محتوى غير متزامن للتعرف على العقد الكامل وUI.asyncContent، الذي يخصص العنصر النائب.

تثبيت تلميح أداة معلق

يعد التثبيت أثناء استمرار تحميل المحتوى أمرًا جيدًا: حيث تملأ النسخة نفسها عندما يتم حل عملية الجلب، طالما لم يتم استبدالها بتمريرة أخرى أولاً.