@dxos/plugin-explorer 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/dist/lib/browser/{ExplorerContainer-BFAWRIAJ.mjs → ExplorerContainer-JBCVWH3M.mjs} +19 -16
  2. package/dist/lib/browser/ExplorerContainer-JBCVWH3M.mjs.map +7 -0
  3. package/dist/lib/browser/{chunk-HIFLWHXR.mjs → chunk-6KEHUEEZ.mjs} +11 -23
  4. package/dist/lib/browser/chunk-6KEHUEEZ.mjs.map +7 -0
  5. package/dist/lib/browser/{chunk-YNQF4CPY.mjs → chunk-LSUP47BZ.mjs} +2 -2
  6. package/dist/lib/browser/{chunk-YNQF4CPY.mjs.map → chunk-LSUP47BZ.mjs.map} +1 -1
  7. package/dist/lib/{node-esm/chunk-QLMTN2XI.mjs → browser/chunk-WX7QIZMF.mjs} +218 -18
  8. package/dist/lib/browser/{chunk-AGZAGILW.mjs.map → chunk-WX7QIZMF.mjs.map} +4 -4
  9. package/dist/lib/browser/index.mjs +22 -25
  10. package/dist/lib/browser/index.mjs.map +3 -3
  11. package/dist/lib/browser/meta.json +1 -1
  12. package/dist/lib/browser/meta.mjs +1 -1
  13. package/dist/lib/browser/{react-surface-RWVHQL3J.mjs → react-surface-4ZMQAZRT.mjs} +13 -10
  14. package/dist/lib/browser/react-surface-4ZMQAZRT.mjs.map +7 -0
  15. package/dist/lib/browser/types/index.mjs +1 -1
  16. package/dist/lib/node-esm/{ExplorerContainer-YQ2KKBVS.mjs → ExplorerContainer-5JTSMOCL.mjs} +19 -16
  17. package/dist/lib/node-esm/ExplorerContainer-5JTSMOCL.mjs.map +7 -0
  18. package/dist/lib/{browser/chunk-AGZAGILW.mjs → node-esm/chunk-3Z2WBI3N.mjs} +220 -16
  19. package/dist/lib/node-esm/{chunk-QLMTN2XI.mjs.map → chunk-3Z2WBI3N.mjs.map} +4 -4
  20. package/dist/lib/node-esm/{chunk-DK77RB6M.mjs → chunk-EN3JZNEY.mjs} +2 -2
  21. package/dist/lib/node-esm/{chunk-DK77RB6M.mjs.map → chunk-EN3JZNEY.mjs.map} +1 -1
  22. package/dist/lib/node-esm/{chunk-3OE6TBJI.mjs → chunk-WSE2Z4OT.mjs} +11 -23
  23. package/dist/lib/node-esm/chunk-WSE2Z4OT.mjs.map +7 -0
  24. package/dist/lib/node-esm/index.mjs +22 -25
  25. package/dist/lib/node-esm/index.mjs.map +3 -3
  26. package/dist/lib/node-esm/meta.json +1 -1
  27. package/dist/lib/node-esm/meta.mjs +1 -1
  28. package/dist/lib/node-esm/{react-surface-3REUS7KW.mjs → react-surface-SDDTZDSI.mjs} +13 -10
  29. package/dist/lib/node-esm/react-surface-SDDTZDSI.mjs.map +7 -0
  30. package/dist/lib/node-esm/types/index.mjs +1 -1
  31. package/dist/types/src/ExplorerPlugin.d.ts.map +1 -1
  32. package/dist/types/src/capabilities/react-surface/index.d.ts +1 -1
  33. package/dist/types/src/capabilities/react-surface/index.d.ts.map +1 -1
  34. package/dist/types/src/capabilities/react-surface/react-surface.d.ts +2 -2
  35. package/dist/types/src/capabilities/react-surface/react-surface.d.ts.map +1 -1
  36. package/dist/types/src/components/Graph/D3ForceGraph.d.ts +3 -3
  37. package/dist/types/src/components/Graph/D3ForceGraph.d.ts.map +1 -1
  38. package/dist/types/src/components/Graph/D3ForceGraph.stories.d.ts +2 -2
  39. package/dist/types/src/components/Graph/ForceGraph.stories.d.ts +1 -1
  40. package/dist/types/src/components/Tree/types/tree.d.ts +3 -3
  41. package/dist/types/src/components/Tree/types/tree.d.ts.map +1 -1
  42. package/dist/types/src/components/index.d.ts +0 -2
  43. package/dist/types/src/components/index.d.ts.map +1 -1
  44. package/dist/types/src/containers/ExplorerContainer/ExplorerContainer.d.ts +6 -0
  45. package/dist/types/src/containers/ExplorerContainer/ExplorerContainer.d.ts.map +1 -0
  46. package/dist/types/src/containers/ExplorerContainer/index.d.ts +3 -0
  47. package/dist/types/src/containers/ExplorerContainer/index.d.ts.map +1 -0
  48. package/dist/types/src/containers/index.d.ts +3 -0
  49. package/dist/types/src/containers/index.d.ts.map +1 -0
  50. package/dist/types/src/hooks/useGraphModel.d.ts.map +1 -1
  51. package/dist/types/src/translations.d.ts +2 -0
  52. package/dist/types/src/translations.d.ts.map +1 -1
  53. package/dist/types/src/types/ExplorerAction.d.ts.map +1 -1
  54. package/dist/types/src/types/Graph.d.ts +2 -9
  55. package/dist/types/src/types/Graph.d.ts.map +1 -1
  56. package/dist/types/tsconfig.tsbuildinfo +1 -1
  57. package/package.json +38 -37
  58. package/src/ExplorerPlugin.tsx +12 -10
  59. package/src/capabilities/react-surface/react-surface.tsx +7 -6
  60. package/src/components/Chart/Chart.stories.tsx +2 -2
  61. package/src/components/Globe/Globe.stories.tsx +2 -2
  62. package/src/components/Graph/D3ForceGraph.stories.tsx +10 -10
  63. package/src/components/Graph/D3ForceGraph.tsx +6 -5
  64. package/src/components/Graph/ForceGraph.stories.tsx +10 -10
  65. package/src/components/Graph/testing.ts +2 -2
  66. package/src/components/Tree/Tree.stories.tsx +2 -2
  67. package/src/components/Tree/types/tree.ts +3 -3
  68. package/src/components/index.ts +0 -4
  69. package/src/{components → containers/ExplorerContainer}/ExplorerContainer.tsx +19 -18
  70. package/src/containers/ExplorerContainer/index.ts +7 -0
  71. package/src/containers/index.ts +7 -0
  72. package/src/hooks/useGraphModel.ts +4 -3
  73. package/src/meta.ts +1 -1
  74. package/src/translations.ts +1 -0
  75. package/src/types/ExplorerAction.ts +0 -1
  76. package/src/types/Graph.ts +10 -23
  77. package/dist/lib/browser/ExplorerContainer-BFAWRIAJ.mjs.map +0 -7
  78. package/dist/lib/browser/chunk-BZMTFAP3.mjs +0 -34
  79. package/dist/lib/browser/chunk-BZMTFAP3.mjs.map +0 -7
  80. package/dist/lib/browser/chunk-HIFLWHXR.mjs.map +0 -7
  81. package/dist/lib/browser/chunk-MGBT2ZFU.mjs +0 -177
  82. package/dist/lib/browser/chunk-MGBT2ZFU.mjs.map +0 -7
  83. package/dist/lib/browser/react-surface-RWVHQL3J.mjs.map +0 -7
  84. package/dist/lib/node-esm/ExplorerContainer-YQ2KKBVS.mjs.map +0 -7
  85. package/dist/lib/node-esm/chunk-3OE6TBJI.mjs.map +0 -7
  86. package/dist/lib/node-esm/chunk-IPIGIQHX.mjs +0 -36
  87. package/dist/lib/node-esm/chunk-IPIGIQHX.mjs.map +0 -7
  88. package/dist/lib/node-esm/chunk-YWJBDETV.mjs +0 -179
  89. package/dist/lib/node-esm/chunk-YWJBDETV.mjs.map +0 -7
  90. package/dist/lib/node-esm/react-surface-3REUS7KW.mjs.map +0 -7
  91. package/dist/types/src/components/ExplorerContainer.d.ts +0 -7
  92. package/dist/types/src/components/ExplorerContainer.d.ts.map +0 -1
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/ExplorerContainer.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type SurfaceComponentProps } from '@dxos/app-framework/react';\nimport { type Filter } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\nimport { Layout } from '@dxos/react-ui-mosaic';\nimport { type View } from '@dxos/schema';\n\nimport { useGraphModel } from '../hooks';\n\nimport { D3ForceGraph } from './Graph';\n\nexport type ExplorerContainerProps = SurfaceComponentProps<View.View>;\n\nconst ExplorerContainer = ({ role, subject: view }: ExplorerContainerProps) => {\n const space = getSpace(view);\n const [filter, setFilter] = useState<Filter.Any>();\n const model = useGraphModel(space, filter);\n const { match } = useGlobalSearch();\n\n const builder = useMemo(() => new QueryBuilder(), []);\n const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {\n setFilter(builder.build(value).filter);\n }, []);\n\n const showToolbar = role === 'article';\n\n if (!space || !model) {\n return null;\n }\n\n return (\n <Layout.Main role={role} toolbar={showToolbar}>\n {showToolbar && (\n <Toolbar.Root>\n <QueryEditor db={space.db} onChange={handleChange} />\n </Toolbar.Root>\n )}\n <D3ForceGraph model={model} match={match} />\n </Layout.Main>\n );\n};\n\nexport default ExplorerContainer;\n"],
5
- "mappings": ";;;;;;;;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAItD,SAASC,oBAAoB;AAC7B,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,mBAA0C;AACnD,SAASC,cAAc;AASvB,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,SAASC,KAAI,MAA0B;AACxE,QAAMC,QAAQC,SAASF,IAAAA;AACvB,QAAM,CAACG,QAAQC,SAAAA,IAAaC,SAAAA;AAC5B,QAAMC,QAAQC,cAAcN,OAAOE,MAAAA;AACnC,QAAM,EAAEK,MAAK,IAAKC,gBAAAA;AAElB,QAAMC,UAAUC,QAAQ,MAAM,IAAIC,aAAAA,GAAgB,CAAA,CAAE;AACpD,QAAMC,eAAeC,YAAuD,CAACC,UAAAA;AAC3EX,cAAUM,QAAQM,MAAMD,KAAAA,EAAOZ,MAAM;EACvC,GAAG,CAAA,CAAE;AAEL,QAAMc,cAAcnB,SAAS;AAE7B,MAAI,CAACG,SAAS,CAACK,OAAO;AACpB,WAAO;EACT;AAEA,SACE,sBAAA,cAACY,OAAOC,MAAI;IAACrB;IAAYsB,SAASH;KAC/BA,eACC,sBAAA,cAACI,QAAQC,MAAI,MACX,sBAAA,cAACC,aAAAA;IAAYC,IAAIvB,MAAMuB;IAAIC,UAAUZ;OAGzC,sBAAA,cAACa,cAAAA;IAAapB;IAAcE;;AAGlC;AAEA,IAAA,4BAAeX;",
6
- "names": ["React", "useCallback", "useMemo", "useState", "QueryBuilder", "useGlobalSearch", "getSpace", "Toolbar", "QueryEditor", "Layout", "ExplorerContainer", "role", "subject", "view", "space", "getSpace", "filter", "setFilter", "useState", "model", "useGraphModel", "match", "useGlobalSearch", "builder", "useMemo", "QueryBuilder", "handleChange", "useCallback", "value", "build", "showToolbar", "Layout", "Main", "toolbar", "Toolbar", "Root", "QueryEditor", "db", "onChange", "D3ForceGraph"]
7
- }
@@ -1,34 +0,0 @@
1
- // src/hooks/useGraphModel.ts
2
- import { RegistryContext } from "@effect-atom/atom-react";
3
- import { useContext, useEffect, useState } from "react";
4
- import { SpaceGraphModel } from "@dxos/schema";
5
- var useGraphModel = (space, filter, options, queue) => {
6
- const registry = useContext(RegistryContext);
7
- const [model, setModel] = useState(void 0);
8
- useEffect(() => {
9
- if (!space) {
10
- void model?.close();
11
- setModel(void 0);
12
- return;
13
- }
14
- if (!model || model.queue !== queue) {
15
- const model2 = new SpaceGraphModel(registry).setFilter(filter).setOptions(options);
16
- void model2.open(space.db, queue);
17
- setModel(model2);
18
- } else {
19
- model.setFilter(filter).setOptions(options);
20
- }
21
- }, [
22
- space,
23
- filter,
24
- options,
25
- queue,
26
- registry
27
- ]);
28
- return model;
29
- };
30
-
31
- export {
32
- useGraphModel
33
- };
34
- //# sourceMappingURL=chunk-BZMTFAP3.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/hooks/useGraphModel.ts"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { RegistryContext } from '@effect-atom/atom-react';\nimport { useContext, useEffect, useState } from 'react';\n\nimport { type Filter, type Queue, type Space } from '@dxos/client/echo';\nimport { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';\n\n// TODO(burdon): Factor out.\nexport const useGraphModel = (\n space: Space | undefined,\n filter?: Filter.Any | undefined,\n options?: SpaceGraphModelOptions,\n queue?: Queue,\n): SpaceGraphModel | undefined => {\n const registry = useContext(RegistryContext);\n const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);\n useEffect(() => {\n if (!space) {\n void model?.close();\n setModel(undefined);\n return;\n }\n\n // TODO(burdon): Does this need to be a dependency?\n if (!model || model.queue !== queue) {\n const model = new SpaceGraphModel(registry).setFilter(filter).setOptions(options);\n void model.open(space.db, queue);\n setModel(model);\n } else {\n model.setFilter(filter).setOptions(options);\n }\n }, [space, filter, options, queue, registry]);\n\n return model;\n};\n"],
5
- "mappings": ";AAIA,SAASA,uBAAuB;AAChC,SAASC,YAAYC,WAAWC,gBAAgB;AAGhD,SAASC,uBAAoD;AAGtD,IAAMC,gBAAgB,CAC3BC,OACAC,QACAC,SACAC,UAAAA;AAEA,QAAMC,WAAWC,WAAWC,eAAAA;AAC5B,QAAM,CAACC,OAAOC,QAAAA,IAAYC,SAAsCC,MAAAA;AAChEC,YAAU,MAAA;AACR,QAAI,CAACX,OAAO;AACV,WAAKO,OAAOK,MAAAA;AACZJ,eAASE,MAAAA;AACT;IACF;AAGA,QAAI,CAACH,SAASA,MAAMJ,UAAUA,OAAO;AACnC,YAAMI,SAAQ,IAAIM,gBAAgBT,QAAAA,EAAUU,UAAUb,MAAAA,EAAQc,WAAWb,OAAAA;AACzE,WAAKK,OAAMS,KAAKhB,MAAMiB,IAAId,KAAAA;AAC1BK,eAASD,MAAAA;IACX,OAAO;AACLA,YAAMO,UAAUb,MAAAA,EAAQc,WAAWb,OAAAA;IACrC;EACF,GAAG;IAACF;IAAOC;IAAQC;IAASC;IAAOC;GAAS;AAE5C,SAAOG;AACT;",
6
- "names": ["RegistryContext", "useContext", "useEffect", "useState", "SpaceGraphModel", "useGraphModel", "space", "filter", "options", "queue", "registry", "useContext", "RegistryContext", "model", "setModel", "useState", "undefined", "useEffect", "close", "SpaceGraphModel", "setFilter", "setOptions", "open", "db"]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/types/ExplorerAction.ts", "../../../src/types/Graph.ts"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';\n\nexport const GraphProps = Schema.Struct({\n name: Schema.optional(Schema.String),\n // TODO(wittjosiah): This should be a query input instead.\n typename: Schema.String.pipe(\n Schema.annotations({ title: 'Select type' }),\n TypeInputOptionsAnnotation.set({\n location: ['database', 'runtime'],\n kind: ['user'],\n registered: ['registered'],\n }),\n Schema.optional,\n ),\n});\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Filter, Obj, Query, QueryAST, Ref, Type } from '@dxos/echo';\nimport { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';\nimport { View, ViewAnnotation } from '@dxos/schema';\n\nconst GraphSchema = Schema.Struct({\n name: Schema.optional(Schema.String),\n\n view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),\n\n query: Schema.Struct({\n raw: Schema.optional(Schema.String),\n ast: QueryAST.Query,\n }).pipe(FormInputAnnotation.set(false)),\n}).pipe(\n Type.object({\n typename: 'dxos.org/type/Graph',\n version: '0.2.0',\n }),\n LabelAnnotation.set(['name']),\n ViewAnnotation.set(true),\n);\nexport interface Graph extends Schema.Schema.Type<typeof GraphSchema> {}\nexport const Graph: Type.Obj<Graph> = GraphSchema as any;\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Graph>>, 'view'> & {\n view: View.View;\n};\n\n/**\n * Make a graph as a view of a data set.\n */\nexport const make = ({\n name,\n query = { raw: '', ast: Query.select(Filter.nothing()).ast },\n view,\n}: MakeProps): Graph => {\n return Obj.make(Graph, { name, view: Ref.make(view), query });\n};\n\n//\n// V1\n//\n\nexport const GraphV1 = Schema.Struct({\n name: Schema.optional(Schema.String),\n query: Schema.Struct({\n raw: Schema.optional(Schema.String),\n ast: QueryAST.Query,\n }),\n}).pipe(\n Type.object({\n typename: 'dxos.org/type/Graph',\n version: '0.1.0',\n }),\n LabelAnnotation.set(['name']),\n);\n"],
5
- "mappings": ";;;;;AAAA;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,kCAAkC;AAEpC,IAAMC,aAAoBC,cAAO;EACtCC,MAAaC,gBAAgBC,aAAM;;EAEnCC,UAAiBD,cAAOE,KACfC,mBAAY;IAAEC,OAAO;EAAc,CAAA,GAC1CC,2BAA2BC,IAAI;IAC7BC,UAAU;MAAC;MAAY;;IACvBC,MAAM;MAAC;;IACPC,YAAY;MAAC;;EACf,CAAA,GACOV,eAAQ;AAEnB,CAAA;;;ACpBA;;;;;;AAIA,YAAYW,aAAY;AAExB,SAASC,QAAQC,KAAKC,OAAOC,UAAUC,KAAKC,YAAY;AACxD,SAASC,qBAAqBC,uBAAuB;AACrD,SAASC,MAAMC,sBAAsB;AAErC,IAAMC,cAAqBC,eAAO;EAChCC,MAAaC,iBAAgBC,cAAM;EAEnCC,MAAMC,KAAKC,IAAIC,KAAKA,IAAI,EAAEC,KAAKC,oBAAoBC,IAAI,KAAA,CAAA;EAEvDC,OAAcX,eAAO;IACnBY,KAAYV,iBAAgBC,cAAM;IAClCU,KAAKC,SAASC;EAChB,CAAA,EAAGP,KAAKC,oBAAoBC,IAAI,KAAA,CAAA;AAClC,CAAA,EAAGF,KACDH,KAAKW,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBT,IAAI;EAAC;CAAO,GAC5BU,eAAeV,IAAI,IAAA,CAAA;AAGd,IAAMW,QAAyBtB;AAS/B,IAAMuB,OAAO,CAAC,EACnBrB,MACAU,QAAQ;EAAEC,KAAK;EAAIC,KAAKE,MAAMQ,OAAOC,OAAOC,QAAO,CAAA,EAAIZ;AAAI,GAC3DT,KAAI,MACM;AACV,SAAOsB,IAAIJ,KAAKD,OAAO;IAAEpB;IAAMG,MAAME,IAAIgB,KAAKlB,IAAAA;IAAOO;EAAM,CAAA;AAC7D;AAMO,IAAMgB,UAAiB3B,eAAO;EACnCC,MAAaC,iBAAgBC,cAAM;EACnCQ,OAAcX,eAAO;IACnBY,KAAYV,iBAAgBC,cAAM;IAClCU,KAAKC,SAASC;EAChB,CAAA;AACF,CAAA,EAAGP,KACDH,KAAKW,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBT,IAAI;EAAC;CAAO,CAAA;",
6
- "names": ["Schema", "TypeInputOptionsAnnotation", "GraphProps", "Struct", "name", "optional", "String", "typename", "pipe", "annotations", "title", "TypeInputOptionsAnnotation", "set", "location", "kind", "registered", "Schema", "Filter", "Obj", "Query", "QueryAST", "Ref", "Type", "FormInputAnnotation", "LabelAnnotation", "View", "ViewAnnotation", "GraphSchema", "Struct", "name", "optional", "String", "view", "Type", "Ref", "View", "pipe", "FormInputAnnotation", "set", "query", "raw", "ast", "QueryAST", "Query", "object", "typename", "version", "LabelAnnotation", "ViewAnnotation", "Graph", "make", "select", "Filter", "nothing", "Obj", "GraphV1"]
7
- }
@@ -1,177 +0,0 @@
1
- // src/components/Graph/D3ForceGraph.tsx
2
- import React, { useCallback, useEffect, useMemo, useRef } from "react";
3
- import { Obj } from "@dxos/echo";
4
- import { SelectionModel } from "@dxos/graph";
5
- import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
6
- import { getHashStyles } from "@dxos/ui-theme";
7
- import "@dxos/react-ui-graph/styles/graph.css";
8
- var D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }) => {
9
- const context = useRef(null);
10
- const projector = useMemo(() => {
11
- if (context.current) {
12
- return new GraphForceProjector(context.current, {
13
- attributes: {
14
- linkForce: (edge) => {
15
- return edge.data?.object?.active !== false;
16
- }
17
- },
18
- forces: {
19
- point: {
20
- strength: 0.01
21
- }
22
- }
23
- });
24
- }
25
- }, [
26
- context.current
27
- ]);
28
- const graph = useRef(null);
29
- const selection = useMemo(() => _selection ?? new SelectionModel(), [
30
- _selection
31
- ]);
32
- useEffect(() => selection.subscribe(() => graph.current?.repaint()), [
33
- selection
34
- ]);
35
- const handleSelect = useCallback((node) => {
36
- if (selection.contains(node.id)) {
37
- selection.remove(node.id);
38
- } else {
39
- selection.add(node.id);
40
- }
41
- }, [
42
- selection
43
- ]);
44
- return /* @__PURE__ */ React.createElement(SVG.Root, {
45
- ref: context,
46
- classNames
47
- }, /* @__PURE__ */ React.createElement(SVG.Markers, null), grid && /* @__PURE__ */ React.createElement(SVG.Grid, {
48
- axis: true
49
- }), /* @__PURE__ */ React.createElement(SVG.Zoom, {
50
- extent: [
51
- 1 / 2,
52
- 2
53
- ]
54
- }, /* @__PURE__ */ React.createElement(SVG.Graph, {
55
- ...props,
56
- ref: graph,
57
- model,
58
- projector,
59
- labels: {
60
- text: (node) => {
61
- return node.data?.data.label ?? node.id;
62
- }
63
- },
64
- attributes: {
65
- node: (node) => {
66
- const obj = node.data?.data.object;
67
- return {
68
- data: {
69
- color: getHashStyles(obj && Obj.getTypename(obj))?.hue
70
- },
71
- classes: {
72
- "dx-selected": selection.contains(node.id)
73
- }
74
- };
75
- }
76
- },
77
- onSelect: handleSelect
78
- })));
79
- };
80
-
81
- // src/components/Graph/ForceGraph.tsx
82
- import { forceLink, forceManyBody } from "d3";
83
- import NativeForceGraph from "force-graph";
84
- import React2, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
85
- import { useResizeDetector } from "react-resize-detector";
86
- import { filterObjectsSync } from "@dxos/plugin-search";
87
-
88
- // src/components/Graph/adapter.ts
89
- var GraphAdapter = class {
90
- graph;
91
- _nodes = [];
92
- _links = [];
93
- constructor(graph) {
94
- this.graph = graph;
95
- this._nodes = graph.nodes.map((node) => ({
96
- id: node.id,
97
- type: node.type,
98
- data: node.data
99
- }));
100
- const nodeIds = new Set(this._nodes.map((node) => node.id));
101
- this._links = graph.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge) => ({
102
- type: edge.type,
103
- source: edge.source,
104
- target: edge.target,
105
- data: edge.data
106
- }));
107
- }
108
- get nodes() {
109
- return this._nodes;
110
- }
111
- get links() {
112
- return this._links;
113
- }
114
- };
115
-
116
- // src/components/Graph/ForceGraph.tsx
117
- var ForceGraph = ({ model, match }) => {
118
- const { ref, width, height } = useResizeDetector({
119
- refreshRate: 200
120
- });
121
- const rootRef = useRef2(null);
122
- const forceGraph = useRef2(null);
123
- const filteredRef = useRef2([]);
124
- filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
125
- const [data, setData] = useState();
126
- useEffect2(() => {
127
- return model?.subscribe((model2) => {
128
- setData(new GraphAdapter(model2.graph));
129
- });
130
- }, [
131
- model
132
- ]);
133
- useEffect2(() => {
134
- if (rootRef.current) {
135
- forceGraph.current = new NativeForceGraph(rootRef.current).nodeRelSize(6).nodeLabel((node) => node.type === "schema" ? node.data.typename : node.data.label ?? node.id).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkAutoColorBy((link) => link.type);
136
- }
137
- return () => {
138
- forceGraph.current?.pauseAnimation().graphData({
139
- nodes: [],
140
- links: []
141
- });
142
- forceGraph.current = null;
143
- };
144
- }, []);
145
- useEffect2(() => {
146
- if (!data || !width || !height || !forceGraph.current) {
147
- return;
148
- }
149
- forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => {
150
- handleZoomToFit();
151
- }).onNodeClick((node) => {
152
- forceGraph.current?.emitParticle(node);
153
- }).d3Force("link", forceLink().distance(160).strength(0.5)).d3Force("charge", forceManyBody().strength(-30)).graphData(data).warmupTicks(100).cooldownTime(1e3).resumeAnimation();
154
- }, [
155
- data,
156
- width,
157
- height,
158
- forceGraph.current
159
- ]);
160
- const handleZoomToFit = () => {
161
- forceGraph.current?.zoomToFit(400, 40);
162
- };
163
- return /* @__PURE__ */ React2.createElement("div", {
164
- ref,
165
- className: "relative grow",
166
- onClick: handleZoomToFit
167
- }, /* @__PURE__ */ React2.createElement("div", {
168
- ref: rootRef,
169
- className: "absolute inset-0"
170
- }));
171
- };
172
-
173
- export {
174
- D3ForceGraph,
175
- ForceGraph
176
- };
177
- //# sourceMappingURL=chunk-MGBT2ZFU.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/Graph/D3ForceGraph.tsx", "../../../src/components/Graph/ForceGraph.tsx", "../../../src/components/Graph/adapter.ts"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { SelectionModel } from '@dxos/graph';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport {\n type GraphController,\n GraphForceProjector,\n type GraphLayoutNode,\n type GraphProps,\n SVG,\n type SVGContext,\n} from '@dxos/react-ui-graph';\nimport { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';\nimport { getHashStyles } from '@dxos/ui-theme';\n\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nexport type D3ForceGraphProps = ThemedClassName<\n {\n model?: SpaceGraphModel;\n match?: RegExp;\n selection?: SelectionModel;\n grid?: boolean;\n } & Pick<GraphProps, 'drag'>\n>;\n\nexport const D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }: D3ForceGraphProps) => {\n const context = useRef<SVGContext>(null);\n const projector = useMemo<GraphForceProjector | undefined>(() => {\n if (context.current) {\n return new GraphForceProjector(context.current, {\n attributes: {\n linkForce: (edge) => {\n // TODO(burdon): Check type (currently assumes Employee property).\n // Edge shouldn't contribute to force if it's not active.\n return edge.data?.object?.active !== false;\n },\n },\n forces: {\n point: {\n strength: 0.01,\n },\n },\n });\n }\n }, [context.current]);\n\n const graph = useRef<GraphController>(null);\n const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);\n useEffect(() => selection.subscribe(() => graph.current?.repaint()), [selection]);\n\n const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(\n (node) => {\n if (selection.contains(node.id)) {\n selection.remove(node.id);\n } else {\n selection.add(node.id);\n }\n },\n [selection],\n );\n\n return (\n <SVG.Root ref={context} classNames={classNames}>\n <SVG.Markers />\n {grid && <SVG.Grid axis />}\n <SVG.Zoom extent={[1 / 2, 2]}>\n <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>\n {...props}\n ref={graph}\n model={model}\n projector={projector}\n labels={{\n text: (node) => {\n return node.data?.data.label ?? node.id;\n },\n }}\n attributes={{\n node: (node: GraphLayoutNode<SpaceGraphNode>) => {\n const obj = node.data?.data.object;\n return {\n data: {\n color: getHashStyles(obj && Obj.getTypename(obj))?.hue,\n },\n classes: {\n 'dx-selected': selection.contains(node.id),\n },\n };\n },\n }}\n onSelect={handleSelect}\n />\n </SVG.Zoom>\n </SVG.Root>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { forceLink, forceManyBody } from 'd3';\nimport NativeForceGraph from 'force-graph';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type SearchResult, filterObjectsSync } from '@dxos/plugin-search';\nimport { type SpaceGraphModel } from '@dxos/schema';\n\nimport { GraphAdapter } from './adapter';\n\nexport type ForceGraphProps = {\n model?: SpaceGraphModel;\n match?: RegExp;\n};\n\nexport const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {\n const { ref, width, height } = useResizeDetector({ refreshRate: 200 });\n const rootRef = useRef<HTMLDivElement>(null);\n const forceGraph = useRef<NativeForceGraph>(null);\n\n const filteredRef = useRef<SearchResult[]>([]);\n filteredRef.current = filterObjectsSync(model?.objects ?? [], match);\n\n const [data, setData] = useState<GraphAdapter>();\n useEffect(() => {\n return model?.subscribe((model) => {\n setData(new GraphAdapter(model.graph));\n });\n }, [model]);\n\n useEffect(() => {\n if (rootRef.current) {\n // https://github.com/vasturiano/force-graph\n // https://github.com/vasturiano/3d-force-graph\n forceGraph.current = new NativeForceGraph(rootRef.current)\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling\n .nodeRelSize(6)\n .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))\n .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling\n .linkAutoColorBy((link: any) => link.type);\n }\n\n return () => {\n forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });\n forceGraph.current = null;\n };\n }, []);\n\n useEffect(() => {\n if (!data || !width || !height || !forceGraph.current) {\n return;\n }\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout\n forceGraph.current\n .pauseAnimation()\n .width(width)\n .height(height)\n .onEngineStop(() => {\n handleZoomToFit();\n })\n .onNodeClick((node: any) => {\n forceGraph.current?.emitParticle(node);\n })\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration\n // .d3Force('center', forceCenter().strength(0.9))\n .d3Force('link', forceLink().distance(160).strength(0.5))\n .d3Force('charge', forceManyBody().strength(-30))\n\n .graphData(data)\n .warmupTicks(100)\n .cooldownTime(1_000)\n .resumeAnimation();\n }, [data, width, height, forceGraph.current]);\n\n const handleZoomToFit = () => {\n forceGraph.current?.zoomToFit(400, 40);\n };\n\n return (\n <div ref={ref} className='relative grow' onClick={handleZoomToFit}>\n <div ref={rootRef} className='absolute inset-0' />\n </div>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Graph } from '@dxos/graph';\n\nexport type GraphNode = {\n id?: string;\n};\n\nexport type GraphLink = {\n source?: string;\n target?: string;\n};\n\nexport type GraphData = {\n nodes: GraphNode[];\n links: GraphLink[];\n};\n\n/**\n * Map common graph to force-graph format.\n */\nexport class GraphAdapter implements GraphData {\n private readonly _nodes: GraphNode[] = [];\n private readonly _links: GraphLink[] = [];\n\n constructor(private readonly graph: Graph.Any) {\n this._nodes = graph.nodes.map((node: Graph.Node.Any) => ({\n id: node.id,\n type: node.type,\n data: node.data,\n }));\n\n // Build a set of node IDs for efficient lookup.\n const nodeIds = new Set(this._nodes.map((node) => node.id));\n\n // Filter out edges where source or target node doesn't exist.\n this._links = graph.edges\n .filter((edge: Graph.Edge.Any) => nodeIds.has(edge.source) && nodeIds.has(edge.target))\n .map((edge: Graph.Edge.Any) => ({\n type: edge.type,\n source: edge.source,\n target: edge.target,\n data: edge.data,\n }));\n }\n\n get nodes() {\n return this._nodes;\n }\n\n get links() {\n return this._links;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["React", "useCallback", "useEffect", "useMemo", "useRef", "Obj", "SelectionModel", "GraphForceProjector", "SVG", "getHashStyles", "D3ForceGraph", "classNames", "model", "selection", "_selection", "grid", "props", "context", "useRef", "projector", "useMemo", "current", "GraphForceProjector", "attributes", "linkForce", "edge", "data", "object", "active", "forces", "point", "strength", "graph", "SelectionModel", "useEffect", "subscribe", "repaint", "handleSelect", "useCallback", "node", "contains", "id", "remove", "add", "SVG", "Root", "ref", "Markers", "Grid", "axis", "Zoom", "extent", "Graph", "labels", "text", "label", "obj", "color", "getHashStyles", "Obj", "getTypename", "hue", "classes", "onSelect", "forceLink", "forceManyBody", "NativeForceGraph", "React", "useEffect", "useRef", "useState", "useResizeDetector", "filterObjectsSync", "GraphAdapter", "_nodes", "_links", "graph", "nodes", "map", "node", "id", "type", "data", "nodeIds", "Set", "edges", "filter", "edge", "has", "source", "target", "links", "ForceGraph", "model", "match", "ref", "width", "height", "useResizeDetector", "refreshRate", "rootRef", "useRef", "forceGraph", "filteredRef", "current", "filterObjectsSync", "objects", "data", "setData", "useState", "useEffect", "subscribe", "GraphAdapter", "graph", "NativeForceGraph", "nodeRelSize", "nodeLabel", "node", "type", "typename", "label", "id", "nodeAutoColorBy", "linkAutoColorBy", "link", "pauseAnimation", "graphData", "nodes", "links", "onEngineStop", "handleZoomToFit", "onNodeClick", "emitParticle", "d3Force", "forceLink", "distance", "strength", "forceManyBody", "warmupTicks", "cooldownTime", "resumeAnimation", "zoomToFit", "React", "div", "className", "onClick"]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/capabilities/react-surface/react-surface.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\nimport React from 'react';\n\nimport { Capability, Common } from '@dxos/app-framework';\nimport { Obj } from '@dxos/echo';\nimport { type View } from '@dxos/schema';\n\nimport { ExplorerContainer } from '../../components';\nimport { meta } from '../../meta';\nimport { Graph } from '../../types';\n\nexport default Capability.makeModule(() =>\n Effect.succeed(\n Capability.contributes(\n Common.Capability.ReactSurface,\n Common.createSurface({\n id: `${meta.id}/article`,\n role: ['article', 'section'],\n filter: (data): data is { subject: View.View } => Obj.instanceOf(Graph.Graph, data.subject),\n component: ({ data, role }) => {\n return <ExplorerContainer role={role} subject={data.subject} />;\n },\n }),\n ),\n ),\n);\n"],
5
- "mappings": ";;;;;;;;;;;;;AAIA,YAAYA,YAAY;AACxB,OAAOC,WAAW;AAElB,SAASC,YAAYC,cAAc;AACnC,SAASC,WAAW;AAOpB,IAAA,wBAAeC,WAAWC,WAAW,MAC5BC,eACLF,WAAWG,YACTC,OAAOJ,WAAWK,cAClBD,OAAOE,cAAc;EACnBC,IAAI,GAAGC,KAAKD,EAAE;EACdE,MAAM;IAAC;IAAW;;EAClBC,QAAQ,CAACC,SAAyCC,IAAIC,WAAWC,cAAMA,OAAOH,KAAKI,OAAO;EAC1FC,WAAW,CAAC,EAAEL,MAAMF,KAAI,MAAE;AACxB,WAAO,sBAAA,cAACQ,mBAAAA;MAAkBR;MAAYM,SAASJ,KAAKI;;EACtD;AACF,CAAA,CAAA,CAAA,CAAA;",
6
- "names": ["Effect", "React", "Capability", "Common", "Obj", "Capability", "makeModule", "succeed", "contributes", "Common", "ReactSurface", "createSurface", "id", "meta", "role", "filter", "data", "Obj", "instanceOf", "Graph", "subject", "component", "ExplorerContainer"]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/ExplorerContainer.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type SurfaceComponentProps } from '@dxos/app-framework/react';\nimport { type Filter } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\nimport { Layout } from '@dxos/react-ui-mosaic';\nimport { type View } from '@dxos/schema';\n\nimport { useGraphModel } from '../hooks';\n\nimport { D3ForceGraph } from './Graph';\n\nexport type ExplorerContainerProps = SurfaceComponentProps<View.View>;\n\nconst ExplorerContainer = ({ role, subject: view }: ExplorerContainerProps) => {\n const space = getSpace(view);\n const [filter, setFilter] = useState<Filter.Any>();\n const model = useGraphModel(space, filter);\n const { match } = useGlobalSearch();\n\n const builder = useMemo(() => new QueryBuilder(), []);\n const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {\n setFilter(builder.build(value).filter);\n }, []);\n\n const showToolbar = role === 'article';\n\n if (!space || !model) {\n return null;\n }\n\n return (\n <Layout.Main role={role} toolbar={showToolbar}>\n {showToolbar && (\n <Toolbar.Root>\n <QueryEditor db={space.db} onChange={handleChange} />\n </Toolbar.Root>\n )}\n <D3ForceGraph model={model} match={match} />\n </Layout.Main>\n );\n};\n\nexport default ExplorerContainer;\n"],
5
- "mappings": ";;;;;;;;;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAItD,SAASC,oBAAoB;AAC7B,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,mBAA0C;AACnD,SAASC,cAAc;AASvB,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,SAASC,KAAI,MAA0B;AACxE,QAAMC,QAAQC,SAASF,IAAAA;AACvB,QAAM,CAACG,QAAQC,SAAAA,IAAaC,SAAAA;AAC5B,QAAMC,QAAQC,cAAcN,OAAOE,MAAAA;AACnC,QAAM,EAAEK,MAAK,IAAKC,gBAAAA;AAElB,QAAMC,UAAUC,QAAQ,MAAM,IAAIC,aAAAA,GAAgB,CAAA,CAAE;AACpD,QAAMC,eAAeC,YAAuD,CAACC,UAAAA;AAC3EX,cAAUM,QAAQM,MAAMD,KAAAA,EAAOZ,MAAM;EACvC,GAAG,CAAA,CAAE;AAEL,QAAMc,cAAcnB,SAAS;AAE7B,MAAI,CAACG,SAAS,CAACK,OAAO;AACpB,WAAO;EACT;AAEA,SACE,sBAAA,cAACY,OAAOC,MAAI;IAACrB;IAAYsB,SAASH;KAC/BA,eACC,sBAAA,cAACI,QAAQC,MAAI,MACX,sBAAA,cAACC,aAAAA;IAAYC,IAAIvB,MAAMuB;IAAIC,UAAUZ;OAGzC,sBAAA,cAACa,cAAAA;IAAapB;IAAcE;;AAGlC;AAEA,IAAA,4BAAeX;",
6
- "names": ["React", "useCallback", "useMemo", "useState", "QueryBuilder", "useGlobalSearch", "getSpace", "Toolbar", "QueryEditor", "Layout", "ExplorerContainer", "role", "subject", "view", "space", "getSpace", "filter", "setFilter", "useState", "model", "useGraphModel", "match", "useGlobalSearch", "builder", "useMemo", "QueryBuilder", "handleChange", "useCallback", "value", "build", "showToolbar", "Layout", "Main", "toolbar", "Toolbar", "Root", "QueryEditor", "db", "onChange", "D3ForceGraph"]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/types/ExplorerAction.ts", "../../../src/types/Graph.ts"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';\n\nexport const GraphProps = Schema.Struct({\n name: Schema.optional(Schema.String),\n // TODO(wittjosiah): This should be a query input instead.\n typename: Schema.String.pipe(\n Schema.annotations({ title: 'Select type' }),\n TypeInputOptionsAnnotation.set({\n location: ['database', 'runtime'],\n kind: ['user'],\n registered: ['registered'],\n }),\n Schema.optional,\n ),\n});\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Filter, Obj, Query, QueryAST, Ref, Type } from '@dxos/echo';\nimport { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';\nimport { View, ViewAnnotation } from '@dxos/schema';\n\nconst GraphSchema = Schema.Struct({\n name: Schema.optional(Schema.String),\n\n view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),\n\n query: Schema.Struct({\n raw: Schema.optional(Schema.String),\n ast: QueryAST.Query,\n }).pipe(FormInputAnnotation.set(false)),\n}).pipe(\n Type.object({\n typename: 'dxos.org/type/Graph',\n version: '0.2.0',\n }),\n LabelAnnotation.set(['name']),\n ViewAnnotation.set(true),\n);\nexport interface Graph extends Schema.Schema.Type<typeof GraphSchema> {}\nexport const Graph: Type.Obj<Graph> = GraphSchema as any;\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Graph>>, 'view'> & {\n view: View.View;\n};\n\n/**\n * Make a graph as a view of a data set.\n */\nexport const make = ({\n name,\n query = { raw: '', ast: Query.select(Filter.nothing()).ast },\n view,\n}: MakeProps): Graph => {\n return Obj.make(Graph, { name, view: Ref.make(view), query });\n};\n\n//\n// V1\n//\n\nexport const GraphV1 = Schema.Struct({\n name: Schema.optional(Schema.String),\n query: Schema.Struct({\n raw: Schema.optional(Schema.String),\n ast: QueryAST.Query,\n }),\n}).pipe(\n Type.object({\n typename: 'dxos.org/type/Graph',\n version: '0.1.0',\n }),\n LabelAnnotation.set(['name']),\n);\n"],
5
- "mappings": ";;;;;;AAAA;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,kCAAkC;AAEpC,IAAMC,aAAoBC,cAAO;EACtCC,MAAaC,gBAAgBC,aAAM;;EAEnCC,UAAiBD,cAAOE,KACfC,mBAAY;IAAEC,OAAO;EAAc,CAAA,GAC1CC,2BAA2BC,IAAI;IAC7BC,UAAU;MAAC;MAAY;;IACvBC,MAAM;MAAC;;IACPC,YAAY;MAAC;;EACf,CAAA,GACOV,eAAQ;AAEnB,CAAA;;;ACpBA;;;;;;AAIA,YAAYW,aAAY;AAExB,SAASC,QAAQC,KAAKC,OAAOC,UAAUC,KAAKC,YAAY;AACxD,SAASC,qBAAqBC,uBAAuB;AACrD,SAASC,MAAMC,sBAAsB;AAErC,IAAMC,cAAqBC,eAAO;EAChCC,MAAaC,iBAAgBC,cAAM;EAEnCC,MAAMC,KAAKC,IAAIC,KAAKA,IAAI,EAAEC,KAAKC,oBAAoBC,IAAI,KAAA,CAAA;EAEvDC,OAAcX,eAAO;IACnBY,KAAYV,iBAAgBC,cAAM;IAClCU,KAAKC,SAASC;EAChB,CAAA,EAAGP,KAAKC,oBAAoBC,IAAI,KAAA,CAAA;AAClC,CAAA,EAAGF,KACDH,KAAKW,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBT,IAAI;EAAC;CAAO,GAC5BU,eAAeV,IAAI,IAAA,CAAA;AAGd,IAAMW,QAAyBtB;AAS/B,IAAMuB,OAAO,CAAC,EACnBrB,MACAU,QAAQ;EAAEC,KAAK;EAAIC,KAAKE,MAAMQ,OAAOC,OAAOC,QAAO,CAAA,EAAIZ;AAAI,GAC3DT,KAAI,MACM;AACV,SAAOsB,IAAIJ,KAAKD,OAAO;IAAEpB;IAAMG,MAAME,IAAIgB,KAAKlB,IAAAA;IAAOO;EAAM,CAAA;AAC7D;AAMO,IAAMgB,UAAiB3B,eAAO;EACnCC,MAAaC,iBAAgBC,cAAM;EACnCQ,OAAcX,eAAO;IACnBY,KAAYV,iBAAgBC,cAAM;IAClCU,KAAKC,SAASC;EAChB,CAAA;AACF,CAAA,EAAGP,KACDH,KAAKW,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBT,IAAI;EAAC;CAAO,CAAA;",
6
- "names": ["Schema", "TypeInputOptionsAnnotation", "GraphProps", "Struct", "name", "optional", "String", "typename", "pipe", "annotations", "title", "TypeInputOptionsAnnotation", "set", "location", "kind", "registered", "Schema", "Filter", "Obj", "Query", "QueryAST", "Ref", "Type", "FormInputAnnotation", "LabelAnnotation", "View", "ViewAnnotation", "GraphSchema", "Struct", "name", "optional", "String", "view", "Type", "Ref", "View", "pipe", "FormInputAnnotation", "set", "query", "raw", "ast", "QueryAST", "Query", "object", "typename", "version", "LabelAnnotation", "ViewAnnotation", "Graph", "make", "select", "Filter", "nothing", "Obj", "GraphV1"]
7
- }
@@ -1,36 +0,0 @@
1
- import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
2
-
3
- // src/hooks/useGraphModel.ts
4
- import { RegistryContext } from "@effect-atom/atom-react";
5
- import { useContext, useEffect, useState } from "react";
6
- import { SpaceGraphModel } from "@dxos/schema";
7
- var useGraphModel = (space, filter, options, queue) => {
8
- const registry = useContext(RegistryContext);
9
- const [model, setModel] = useState(void 0);
10
- useEffect(() => {
11
- if (!space) {
12
- void model?.close();
13
- setModel(void 0);
14
- return;
15
- }
16
- if (!model || model.queue !== queue) {
17
- const model2 = new SpaceGraphModel(registry).setFilter(filter).setOptions(options);
18
- void model2.open(space.db, queue);
19
- setModel(model2);
20
- } else {
21
- model.setFilter(filter).setOptions(options);
22
- }
23
- }, [
24
- space,
25
- filter,
26
- options,
27
- queue,
28
- registry
29
- ]);
30
- return model;
31
- };
32
-
33
- export {
34
- useGraphModel
35
- };
36
- //# sourceMappingURL=chunk-IPIGIQHX.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/hooks/useGraphModel.ts"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { RegistryContext } from '@effect-atom/atom-react';\nimport { useContext, useEffect, useState } from 'react';\n\nimport { type Filter, type Queue, type Space } from '@dxos/client/echo';\nimport { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';\n\n// TODO(burdon): Factor out.\nexport const useGraphModel = (\n space: Space | undefined,\n filter?: Filter.Any | undefined,\n options?: SpaceGraphModelOptions,\n queue?: Queue,\n): SpaceGraphModel | undefined => {\n const registry = useContext(RegistryContext);\n const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);\n useEffect(() => {\n if (!space) {\n void model?.close();\n setModel(undefined);\n return;\n }\n\n // TODO(burdon): Does this need to be a dependency?\n if (!model || model.queue !== queue) {\n const model = new SpaceGraphModel(registry).setFilter(filter).setOptions(options);\n void model.open(space.db, queue);\n setModel(model);\n } else {\n model.setFilter(filter).setOptions(options);\n }\n }, [space, filter, options, queue, registry]);\n\n return model;\n};\n"],
5
- "mappings": ";;;AAIA,SAASA,uBAAuB;AAChC,SAASC,YAAYC,WAAWC,gBAAgB;AAGhD,SAASC,uBAAoD;AAGtD,IAAMC,gBAAgB,CAC3BC,OACAC,QACAC,SACAC,UAAAA;AAEA,QAAMC,WAAWC,WAAWC,eAAAA;AAC5B,QAAM,CAACC,OAAOC,QAAAA,IAAYC,SAAsCC,MAAAA;AAChEC,YAAU,MAAA;AACR,QAAI,CAACX,OAAO;AACV,WAAKO,OAAOK,MAAAA;AACZJ,eAASE,MAAAA;AACT;IACF;AAGA,QAAI,CAACH,SAASA,MAAMJ,UAAUA,OAAO;AACnC,YAAMI,SAAQ,IAAIM,gBAAgBT,QAAAA,EAAUU,UAAUb,MAAAA,EAAQc,WAAWb,OAAAA;AACzE,WAAKK,OAAMS,KAAKhB,MAAMiB,IAAId,KAAAA;AAC1BK,eAASD,MAAAA;IACX,OAAO;AACLA,YAAMO,UAAUb,MAAAA,EAAQc,WAAWb,OAAAA;IACrC;EACF,GAAG;IAACF;IAAOC;IAAQC;IAASC;IAAOC;GAAS;AAE5C,SAAOG;AACT;",
6
- "names": ["RegistryContext", "useContext", "useEffect", "useState", "SpaceGraphModel", "useGraphModel", "space", "filter", "options", "queue", "registry", "useContext", "RegistryContext", "model", "setModel", "useState", "undefined", "useEffect", "close", "SpaceGraphModel", "setFilter", "setOptions", "open", "db"]
7
- }
@@ -1,179 +0,0 @@
1
- import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
2
-
3
- // src/components/Graph/D3ForceGraph.tsx
4
- import React, { useCallback, useEffect, useMemo, useRef } from "react";
5
- import { Obj } from "@dxos/echo";
6
- import { SelectionModel } from "@dxos/graph";
7
- import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
8
- import { getHashStyles } from "@dxos/ui-theme";
9
- import "@dxos/react-ui-graph/styles/graph.css";
10
- var D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }) => {
11
- const context = useRef(null);
12
- const projector = useMemo(() => {
13
- if (context.current) {
14
- return new GraphForceProjector(context.current, {
15
- attributes: {
16
- linkForce: (edge) => {
17
- return edge.data?.object?.active !== false;
18
- }
19
- },
20
- forces: {
21
- point: {
22
- strength: 0.01
23
- }
24
- }
25
- });
26
- }
27
- }, [
28
- context.current
29
- ]);
30
- const graph = useRef(null);
31
- const selection = useMemo(() => _selection ?? new SelectionModel(), [
32
- _selection
33
- ]);
34
- useEffect(() => selection.subscribe(() => graph.current?.repaint()), [
35
- selection
36
- ]);
37
- const handleSelect = useCallback((node) => {
38
- if (selection.contains(node.id)) {
39
- selection.remove(node.id);
40
- } else {
41
- selection.add(node.id);
42
- }
43
- }, [
44
- selection
45
- ]);
46
- return /* @__PURE__ */ React.createElement(SVG.Root, {
47
- ref: context,
48
- classNames
49
- }, /* @__PURE__ */ React.createElement(SVG.Markers, null), grid && /* @__PURE__ */ React.createElement(SVG.Grid, {
50
- axis: true
51
- }), /* @__PURE__ */ React.createElement(SVG.Zoom, {
52
- extent: [
53
- 1 / 2,
54
- 2
55
- ]
56
- }, /* @__PURE__ */ React.createElement(SVG.Graph, {
57
- ...props,
58
- ref: graph,
59
- model,
60
- projector,
61
- labels: {
62
- text: (node) => {
63
- return node.data?.data.label ?? node.id;
64
- }
65
- },
66
- attributes: {
67
- node: (node) => {
68
- const obj = node.data?.data.object;
69
- return {
70
- data: {
71
- color: getHashStyles(obj && Obj.getTypename(obj))?.hue
72
- },
73
- classes: {
74
- "dx-selected": selection.contains(node.id)
75
- }
76
- };
77
- }
78
- },
79
- onSelect: handleSelect
80
- })));
81
- };
82
-
83
- // src/components/Graph/ForceGraph.tsx
84
- import { forceLink, forceManyBody } from "d3";
85
- import NativeForceGraph from "force-graph";
86
- import React2, { useEffect as useEffect2, useRef as useRef2, useState } from "react";
87
- import { useResizeDetector } from "react-resize-detector";
88
- import { filterObjectsSync } from "@dxos/plugin-search";
89
-
90
- // src/components/Graph/adapter.ts
91
- var GraphAdapter = class {
92
- graph;
93
- _nodes = [];
94
- _links = [];
95
- constructor(graph) {
96
- this.graph = graph;
97
- this._nodes = graph.nodes.map((node) => ({
98
- id: node.id,
99
- type: node.type,
100
- data: node.data
101
- }));
102
- const nodeIds = new Set(this._nodes.map((node) => node.id));
103
- this._links = graph.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge) => ({
104
- type: edge.type,
105
- source: edge.source,
106
- target: edge.target,
107
- data: edge.data
108
- }));
109
- }
110
- get nodes() {
111
- return this._nodes;
112
- }
113
- get links() {
114
- return this._links;
115
- }
116
- };
117
-
118
- // src/components/Graph/ForceGraph.tsx
119
- var ForceGraph = ({ model, match }) => {
120
- const { ref, width, height } = useResizeDetector({
121
- refreshRate: 200
122
- });
123
- const rootRef = useRef2(null);
124
- const forceGraph = useRef2(null);
125
- const filteredRef = useRef2([]);
126
- filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
127
- const [data, setData] = useState();
128
- useEffect2(() => {
129
- return model?.subscribe((model2) => {
130
- setData(new GraphAdapter(model2.graph));
131
- });
132
- }, [
133
- model
134
- ]);
135
- useEffect2(() => {
136
- if (rootRef.current) {
137
- forceGraph.current = new NativeForceGraph(rootRef.current).nodeRelSize(6).nodeLabel((node) => node.type === "schema" ? node.data.typename : node.data.label ?? node.id).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkAutoColorBy((link) => link.type);
138
- }
139
- return () => {
140
- forceGraph.current?.pauseAnimation().graphData({
141
- nodes: [],
142
- links: []
143
- });
144
- forceGraph.current = null;
145
- };
146
- }, []);
147
- useEffect2(() => {
148
- if (!data || !width || !height || !forceGraph.current) {
149
- return;
150
- }
151
- forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => {
152
- handleZoomToFit();
153
- }).onNodeClick((node) => {
154
- forceGraph.current?.emitParticle(node);
155
- }).d3Force("link", forceLink().distance(160).strength(0.5)).d3Force("charge", forceManyBody().strength(-30)).graphData(data).warmupTicks(100).cooldownTime(1e3).resumeAnimation();
156
- }, [
157
- data,
158
- width,
159
- height,
160
- forceGraph.current
161
- ]);
162
- const handleZoomToFit = () => {
163
- forceGraph.current?.zoomToFit(400, 40);
164
- };
165
- return /* @__PURE__ */ React2.createElement("div", {
166
- ref,
167
- className: "relative grow",
168
- onClick: handleZoomToFit
169
- }, /* @__PURE__ */ React2.createElement("div", {
170
- ref: rootRef,
171
- className: "absolute inset-0"
172
- }));
173
- };
174
-
175
- export {
176
- D3ForceGraph,
177
- ForceGraph
178
- };
179
- //# sourceMappingURL=chunk-YWJBDETV.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/Graph/D3ForceGraph.tsx", "../../../src/components/Graph/ForceGraph.tsx", "../../../src/components/Graph/adapter.ts"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { SelectionModel } from '@dxos/graph';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport {\n type GraphController,\n GraphForceProjector,\n type GraphLayoutNode,\n type GraphProps,\n SVG,\n type SVGContext,\n} from '@dxos/react-ui-graph';\nimport { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';\nimport { getHashStyles } from '@dxos/ui-theme';\n\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nexport type D3ForceGraphProps = ThemedClassName<\n {\n model?: SpaceGraphModel;\n match?: RegExp;\n selection?: SelectionModel;\n grid?: boolean;\n } & Pick<GraphProps, 'drag'>\n>;\n\nexport const D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }: D3ForceGraphProps) => {\n const context = useRef<SVGContext>(null);\n const projector = useMemo<GraphForceProjector | undefined>(() => {\n if (context.current) {\n return new GraphForceProjector(context.current, {\n attributes: {\n linkForce: (edge) => {\n // TODO(burdon): Check type (currently assumes Employee property).\n // Edge shouldn't contribute to force if it's not active.\n return edge.data?.object?.active !== false;\n },\n },\n forces: {\n point: {\n strength: 0.01,\n },\n },\n });\n }\n }, [context.current]);\n\n const graph = useRef<GraphController>(null);\n const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);\n useEffect(() => selection.subscribe(() => graph.current?.repaint()), [selection]);\n\n const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(\n (node) => {\n if (selection.contains(node.id)) {\n selection.remove(node.id);\n } else {\n selection.add(node.id);\n }\n },\n [selection],\n );\n\n return (\n <SVG.Root ref={context} classNames={classNames}>\n <SVG.Markers />\n {grid && <SVG.Grid axis />}\n <SVG.Zoom extent={[1 / 2, 2]}>\n <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>\n {...props}\n ref={graph}\n model={model}\n projector={projector}\n labels={{\n text: (node) => {\n return node.data?.data.label ?? node.id;\n },\n }}\n attributes={{\n node: (node: GraphLayoutNode<SpaceGraphNode>) => {\n const obj = node.data?.data.object;\n return {\n data: {\n color: getHashStyles(obj && Obj.getTypename(obj))?.hue,\n },\n classes: {\n 'dx-selected': selection.contains(node.id),\n },\n };\n },\n }}\n onSelect={handleSelect}\n />\n </SVG.Zoom>\n </SVG.Root>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { forceLink, forceManyBody } from 'd3';\nimport NativeForceGraph from 'force-graph';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type SearchResult, filterObjectsSync } from '@dxos/plugin-search';\nimport { type SpaceGraphModel } from '@dxos/schema';\n\nimport { GraphAdapter } from './adapter';\n\nexport type ForceGraphProps = {\n model?: SpaceGraphModel;\n match?: RegExp;\n};\n\nexport const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {\n const { ref, width, height } = useResizeDetector({ refreshRate: 200 });\n const rootRef = useRef<HTMLDivElement>(null);\n const forceGraph = useRef<NativeForceGraph>(null);\n\n const filteredRef = useRef<SearchResult[]>([]);\n filteredRef.current = filterObjectsSync(model?.objects ?? [], match);\n\n const [data, setData] = useState<GraphAdapter>();\n useEffect(() => {\n return model?.subscribe((model) => {\n setData(new GraphAdapter(model.graph));\n });\n }, [model]);\n\n useEffect(() => {\n if (rootRef.current) {\n // https://github.com/vasturiano/force-graph\n // https://github.com/vasturiano/3d-force-graph\n forceGraph.current = new NativeForceGraph(rootRef.current)\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling\n .nodeRelSize(6)\n .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))\n .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling\n .linkAutoColorBy((link: any) => link.type);\n }\n\n return () => {\n forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });\n forceGraph.current = null;\n };\n }, []);\n\n useEffect(() => {\n if (!data || !width || !height || !forceGraph.current) {\n return;\n }\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout\n forceGraph.current\n .pauseAnimation()\n .width(width)\n .height(height)\n .onEngineStop(() => {\n handleZoomToFit();\n })\n .onNodeClick((node: any) => {\n forceGraph.current?.emitParticle(node);\n })\n\n // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration\n // .d3Force('center', forceCenter().strength(0.9))\n .d3Force('link', forceLink().distance(160).strength(0.5))\n .d3Force('charge', forceManyBody().strength(-30))\n\n .graphData(data)\n .warmupTicks(100)\n .cooldownTime(1_000)\n .resumeAnimation();\n }, [data, width, height, forceGraph.current]);\n\n const handleZoomToFit = () => {\n forceGraph.current?.zoomToFit(400, 40);\n };\n\n return (\n <div ref={ref} className='relative grow' onClick={handleZoomToFit}>\n <div ref={rootRef} className='absolute inset-0' />\n </div>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Graph } from '@dxos/graph';\n\nexport type GraphNode = {\n id?: string;\n};\n\nexport type GraphLink = {\n source?: string;\n target?: string;\n};\n\nexport type GraphData = {\n nodes: GraphNode[];\n links: GraphLink[];\n};\n\n/**\n * Map common graph to force-graph format.\n */\nexport class GraphAdapter implements GraphData {\n private readonly _nodes: GraphNode[] = [];\n private readonly _links: GraphLink[] = [];\n\n constructor(private readonly graph: Graph.Any) {\n this._nodes = graph.nodes.map((node: Graph.Node.Any) => ({\n id: node.id,\n type: node.type,\n data: node.data,\n }));\n\n // Build a set of node IDs for efficient lookup.\n const nodeIds = new Set(this._nodes.map((node) => node.id));\n\n // Filter out edges where source or target node doesn't exist.\n this._links = graph.edges\n .filter((edge: Graph.Edge.Any) => nodeIds.has(edge.source) && nodeIds.has(edge.target))\n .map((edge: Graph.Edge.Any) => ({\n type: edge.type,\n source: edge.source,\n target: edge.target,\n data: edge.data,\n }));\n }\n\n get nodes() {\n return this._nodes;\n }\n\n get links() {\n return this._links;\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["React", "useCallback", "useEffect", "useMemo", "useRef", "Obj", "SelectionModel", "GraphForceProjector", "SVG", "getHashStyles", "D3ForceGraph", "classNames", "model", "selection", "_selection", "grid", "props", "context", "useRef", "projector", "useMemo", "current", "GraphForceProjector", "attributes", "linkForce", "edge", "data", "object", "active", "forces", "point", "strength", "graph", "SelectionModel", "useEffect", "subscribe", "repaint", "handleSelect", "useCallback", "node", "contains", "id", "remove", "add", "SVG", "Root", "ref", "Markers", "Grid", "axis", "Zoom", "extent", "Graph", "labels", "text", "label", "obj", "color", "getHashStyles", "Obj", "getTypename", "hue", "classes", "onSelect", "forceLink", "forceManyBody", "NativeForceGraph", "React", "useEffect", "useRef", "useState", "useResizeDetector", "filterObjectsSync", "GraphAdapter", "_nodes", "_links", "graph", "nodes", "map", "node", "id", "type", "data", "nodeIds", "Set", "edges", "filter", "edge", "has", "source", "target", "links", "ForceGraph", "model", "match", "ref", "width", "height", "useResizeDetector", "refreshRate", "rootRef", "useRef", "forceGraph", "filteredRef", "current", "filterObjectsSync", "objects", "data", "setData", "useState", "useEffect", "subscribe", "GraphAdapter", "graph", "NativeForceGraph", "nodeRelSize", "nodeLabel", "node", "type", "typename", "label", "id", "nodeAutoColorBy", "linkAutoColorBy", "link", "pauseAnimation", "graphData", "nodes", "links", "onEngineStop", "handleZoomToFit", "onNodeClick", "emitParticle", "d3Force", "forceLink", "distance", "strength", "forceManyBody", "warmupTicks", "cooldownTime", "resumeAnimation", "zoomToFit", "React", "div", "className", "onClick"]
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/capabilities/react-surface/react-surface.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\nimport React from 'react';\n\nimport { Capability, Common } from '@dxos/app-framework';\nimport { Obj } from '@dxos/echo';\nimport { type View } from '@dxos/schema';\n\nimport { ExplorerContainer } from '../../components';\nimport { meta } from '../../meta';\nimport { Graph } from '../../types';\n\nexport default Capability.makeModule(() =>\n Effect.succeed(\n Capability.contributes(\n Common.Capability.ReactSurface,\n Common.createSurface({\n id: `${meta.id}/article`,\n role: ['article', 'section'],\n filter: (data): data is { subject: View.View } => Obj.instanceOf(Graph.Graph, data.subject),\n component: ({ data, role }) => {\n return <ExplorerContainer role={role} subject={data.subject} />;\n },\n }),\n ),\n ),\n);\n"],
5
- "mappings": ";;;;;;;;;;;;;;AAIA,YAAYA,YAAY;AACxB,OAAOC,WAAW;AAElB,SAASC,YAAYC,cAAc;AACnC,SAASC,WAAW;AAOpB,IAAA,wBAAeC,WAAWC,WAAW,MAC5BC,eACLF,WAAWG,YACTC,OAAOJ,WAAWK,cAClBD,OAAOE,cAAc;EACnBC,IAAI,GAAGC,KAAKD,EAAE;EACdE,MAAM;IAAC;IAAW;;EAClBC,QAAQ,CAACC,SAAyCC,IAAIC,WAAWC,cAAMA,OAAOH,KAAKI,OAAO;EAC1FC,WAAW,CAAC,EAAEL,MAAMF,KAAI,MAAE;AACxB,WAAO,sBAAA,cAACQ,mBAAAA;MAAkBR;MAAYM,SAASJ,KAAKI;;EACtD;AACF,CAAA,CAAA,CAAA,CAAA;",
6
- "names": ["Effect", "React", "Capability", "Common", "Obj", "Capability", "makeModule", "succeed", "contributes", "Common", "ReactSurface", "createSurface", "id", "meta", "role", "filter", "data", "Obj", "instanceOf", "Graph", "subject", "component", "ExplorerContainer"]
7
- }
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { type SurfaceComponentProps } from '@dxos/app-framework/react';
3
- import { type View } from '@dxos/schema';
4
- export type ExplorerContainerProps = SurfaceComponentProps<View.View>;
5
- declare const ExplorerContainer: ({ role, subject: view }: ExplorerContainerProps) => React.JSX.Element | null;
6
- export default ExplorerContainer;
7
- //# sourceMappingURL=ExplorerContainer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExplorerContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ExplorerContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAQvE,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,yBAAyB,sBAAsB,6BA2BzE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}