App cuts off descriptions with hyperlinks

[DM1122]

The app seems to cut descriptions that have hyperlinked embedded. For instance, the FINCH-Spacecraft-AcquisitionTelemetry requirement description reads,

"Capture the telemetry listed in FINCH Acquisition Telemetry during image acquisitions"

But the inspector component displays the description as "Capture the telemetry listed in ". The full description should be present in the inspector. See picture

[dosubot]

🤖

Hi @DM1122! Good to see you again. I hope you're doing well since our last interaction.

Thank you for bringing this to our attention. The issue of descriptions being cut off that contain hyperlinks is likely due to the way the text is being handled in the go.TextBlock for the description in the go.Panel of the go.Node template.

In the code, the go.TextBlock for the description is set to have a maximum of 3 lines and to overflow with an ellipsis when the text exceeds this limit:

$(
    go.TextBlock,
    {
        row: 2,
        column: 0,
        font: "9pt " + this.font,
        stretch: go.GraphObject.Fill,
        maxLines: 3,
        overflow: go.TextBlock.OverflowEllipsis,
    },
    new go.Binding("text", "description")
)

This means that if the description contains a hyperlink and the hyperlink is long enough to exceed these constraints, it will be cut off and replaced with an ellipsis.

To fix this issue, you could consider increasing the maxLines property or handling hyperlinks differently, perhaps by displaying them as clickable text rather than the full URL. However, the best solution would depend on the specific requirements and constraints of your application.

The hyperlink text in the go.TextBlock for the description in the go.Panel of the go.Node template is currently being handled by binding the "text" property of the go.TextBlock to the "description" property of the data model. This is done using the new go.Binding("text", "description") line of code.

Here is the relevant code snippet:

$(
    go.TextBlock,
    {
        row: 2,
        column: 0,
        font: "9pt " + this.font,
        stretch: go.GraphObject.Fill,
        maxLines: 3,
        overflow: go.TextBlock.OverflowEllipsis,
    },
    new go.Binding("text", "description")
)

This code creates a go.TextBlock that is bound to the "description" property of the data model. The text in this block will display the value of the "description" property. The text block is configured to fill its container, limit the number of lines to 3, and use an ellipsis for overflow text.

I hope this helps clarify the issue. If you have any further questions, please feel free to ask.

Sources

• client/src/app/components/org-chart/org-chart.component.ts

[DM1122]

@dosu-bot the behaviour you're referring to for the org-chart component is expected. The text should be cut after three lines. The issue is that the description field is being cutoff for requirements with URLs embedded in the Inspector component. This is not desired behaviour

[dosubot]

🤖

Thank you for bringing this issue to our attention. The problem you're experiencing with the description field in the Inspector component cutting off requirements with embedded URLs is likely due to the use of the <input> HTML element for the description field. The <input> element is not designed to handle multiline text or text with special formatting such as URLs.

To resolve this issue, I recommend replacing the <input> element with a <textarea> element, similar to how the "Parents" field is implemented. This will allow the description field to handle multiline text and URLs properly.

Here's how you can modify the code:

<mat-form-field appearance="outline" floatLabel="always">
    <mat-label>Description</mat-label>
    <textarea matInput [readonly]="read_only" [value]="description"></textarea>
</mat-form-field>

This change should resolve the issue with the description field cutting off requirements with embedded URLs.

As for the current implementation of the description field in the Inspector component, it is a string property of the InspectorComponent class. It is initially set to 'The tree visualizer shall do things'. When the ngOnChanges method is triggered (which happens when the @Input property selectedNode changes), the description field is updated based on the new value of selectedNode.

If selectedNode is null, the description field is set to '-'. If selectedNode is not null, the description field is set to the description property of the data object of selectedNode. The data object is of type Requirement.

I hope this helps! If you have any further questions or need additional assistance, please don't hesitate to ask.

Sources

• client/src/app/components/inspector/inspector.component.html
• client/src/app/components/inspector/inspector.component.ts

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.