EOS - Data flow analysis steps that restrict snippet size and make th…

…e entire width clickable (#34)

src/components/Page/Eos/ContextualAnalysis.test.tsx

@@ -22,7 +22,7 @@ describe('ContextualAnalysis component', () => {
 		const { getByText } = render(<ContextualAnalysis analysisSteps={analysisSteps} />)
 		expect(getByText('DATA FLOW ANALYSIS')).toBeInTheDocument()
 		analysisSteps.forEach(step => {
-			const analysisStepElement = getByText(`${step.fileName} ${step.startRow}:`)
+			const analysisStepElement = getByText(`${step.fileName}${step.startRow}:`)
 			expect(analysisStepElement).toBeInTheDocument()
 		})
 	})

src/components/UI/List/AnalysisStepsListElement.module.css

@@ -1,5 +1,6 @@
 .container {
 	display: flex;
+	width: 100%;
 	justify-content: space-between;
 	color: #a0a0a0;
 	font-weight: 400;
@@ -20,6 +21,10 @@
 	align-items: center;
 }
 
+.snippet {
+	color: rgba(255, 255, 255, 0.8);
+}
+
 .number {
 	background: #454545;
 	border-radius: 20px;

src/components/UI/List/AnalysisStepsListElement.test.tsx

@@ -42,8 +42,8 @@ describe('AnalysisStepsListElement component', () => {
 		expect(buttons).toHaveLength(defaultProps.items.length)
 
 		// Assert that the button content is rendered correctly
-		expect(getByText('Example File 1:')).toBeInTheDocument()
-		expect(getByText('Test File 10:')).toBeInTheDocument()
+		expect(getByText('Example File1:')).toBeInTheDocument()
+		expect(getByText('Test File10:')).toBeInTheDocument()
 	})
 
 	test('calls jumpToCode when button is clicked', () => {

src/components/UI/List/AnalysisStepsListElement.tsx

@@ -2,7 +2,6 @@ import { IAnalysisStep } from '../../../model/analysisStep'
 import css from './AnalysisStepsListElement.module.css'
 import { useContext } from 'react'
 import { eventManagerContext } from '../../../store/eventContext'
-import Markdown from '../Markdown/Markdown'
 
 export interface Props {
 	items: IAnalysisStep[]
@@ -16,6 +15,14 @@ export default function AnalysisStepsListElement(props: Props): JSX.Element {
 		ctx.jumpToCode(item)
 	}
 
+	const hideOverflowText = (text: string, max: number): string => {
+		if (text.length > max) {
+			return `${text.substring(0, max)}...`
+		}
+
+		return text
+	}
+
 	return (
 		<>
 			{props.items.map((item, i) => (
@@ -29,10 +36,12 @@ export default function AnalysisStepsListElement(props: Props): JSX.Element {
 					<div className={css.file} id={i.toString()}>
 						<div className={css.number}>{i + 1}</div>
 						<div className={css.row}>
-							{' '}
-							{item.fileName} {item.startRow}:{' '}
+							{item.fileName && hideOverflowText(item.fileName, 30)}
+							{item.startRow}:
+						</div>
+						<div className={css.snippet}>
+							{item.snippet && <div>{hideOverflowText(item.snippet, 100)}</div>}
 						</div>
-						{item.snippet && <Markdown text={item.snippet} />}
 					</div>
 				</button>
 			))}