Add some changelog improvements

src/pages/internal/changelog.tsx

@@ -53,51 +53,53 @@ function ChangelogList({
                     </thead>
                     <tbody>
                         {(changelog?.page ?? []).map((i) => {
-                            let pfad = <></>;
-                            switch (i.type) {
-                                case "modification":
-                                    pfad = (
-                                        <>
-                                            <button
-                                                type="button"
-                                                className="btn btn-link p-0 align-baseline"
-                                                onClick={() => {
-                                                    setFilter(
-                                                        "object_type",
-                                                        i.object_type,
-                                                        true,
-                                                        false,
-                                                    );
-                                                    setFilter("object_id", i.object_id, true, true);
-                                                    setFilter("field", undefined, true, true);
-                                                }}
-                                            >
-                                                {`${i.object_type}.${i.object_id}`}
-                                            </button>
-                                            .
-                                            <button
-                                                type="button"
-                                                className="btn btn-link p-0 align-baseline"
-                                                onClick={() => {
+                            const filterLevel = (lvl: number) => {
+                                return () => {
                                     setFilter(
                                         "object_type",
-                                                        i.object_type,
+                                        lvl >= 1 ? i.object_type : undefined,
                                         true,
                                         false,
                                     );
                                     setFilter(
                                         "object_id",
-                                                        i.object_id,
+                                        lvl >= 2 ? i.object_id : undefined,
                                         true,
                                         false,
                                     );
                                     setFilter(
                                         "field",
-                                                        i.field_description!.id,
+                                        lvl >= 3 ? i.field_description!.id : undefined,
                                         true,
                                         true,
                                     );
-                                                }}
+                                };
+                            };
+                            let pfad = <></>;
+                            switch (i.type) {
+                                case "modification":
+                                    pfad = (
+                                        <>
+                                            <button
+                                                type="button"
+                                                className="btn btn-link p-0 align-baseline"
+                                                onClick={filterLevel(1)}
+                                            >
+                                                {`${i.object_type}`}
+                                            </button>
+                                            .
+                                            <button
+                                                type="button"
+                                                className="btn btn-link p-0 align-baseline"
+                                                onClick={filterLevel(2)}
+                                            >
+                                                {`${i.object_id}`}
+                                            </button>
+                                            .
+                                            <button
+                                                type="button"
+                                                className="btn btn-link p-0 align-baseline"
+                                                onClick={filterLevel(3)}
                                             >{`${i.field_description!.id}`}</button>
                                             {` (${i.field_description?.type})`}
                                         </>
@@ -109,48 +111,51 @@ function ChangelogList({
                                             <button
                                                 type="button"
                                                 className="btn btn-link p-0 align-baseline"
-                                                onClick={() => {
-                                                    setFilter(
-                                                        "object_type",
-                                                        i.object_type,
-                                                        true,
-                                                        false,
-                                                    );
-                                                    setFilter("object_id", i.object_id, true, true);
-                                                    setFilter("field", undefined, true, true);
-                                                }}
+                                                onClick={filterLevel(1)}
                                             >
-                                                {`${i.object_type}.${i.object_id}`}
+                                                {`${i.object_type}`}
                                             </button>
-                                            {` (variant:${i.variant})`}
+                                            .
+                                            <button
+                                                type="button"
+                                                className="btn btn-link p-0 align-baseline"
+                                                onClick={filterLevel(2)}
+                                            >
+                                                {`${i.object_id}`}
+                                            </button>
+                                            {typeof i.variant === "string" &&
+                                                ` (variant:${i.variant})`}
                                         </>
                                     );
                                     break;
                                 case "deletion_change":
                                     pfad = (
+                                        <>
                                             <button
                                                 type="button"
                                                 className="btn btn-link p-0 align-baseline"
-                                            onClick={() => {
-                                                setFilter(
-                                                    "object_type",
-                                                    i.object_type,
-                                                    true,
-                                                    false,
-                                                );
-                                                setFilter("object_id", i.object_id, true, true);
-                                                setFilter("field", undefined, true, true);
-                                            }}
+                                                onClick={filterLevel(1)}
+                                            >
+                                                {`${i.object_type}`}
+                                            </button>
+                                            .
+                                            <button
+                                                type="button"
+                                                className="btn btn-link p-0 align-baseline"
+                                                onClick={filterLevel(2)}
                                             >
-                                            {`${i.object_type}.${i.object_id}`}
+                                                {`${i.object_id}`}
                                             </button>
+                                        </>
                                     );
                                     break;
                                 case "unknown":
-                                    pfad = <>{`${i.unknown_type}.${i.unknown_field}`}</>;
+                                    pfad = (
+                                        <>{`${i.unknown_type}.${i.unknown_field}, id=${i.object_id}`}</>
+                                    );
                                     break;
                                 default:
-                                    pfad = <>i.type</>;
+                                    pfad = <>{i.type}</>;
                             }
                             const valToStr = (val: any) => {
                                 if (val === null) {