Combined deductiOn and abduCtiOn (CoCo) core library
npm install coco-guiThis package provides core functionality for building Combined deductiOn and abduCtiOn (CoCo) graphical user interfaces (GUIs).
CocoGUI is available as an npm package.
To install and save in your package.json dependencies, run:
``bash`
npm install coco-gui
To get started, if you don't have one yet, create a new Vue project.
`bash`
npm create vue@latest
Install the required packages.
`bash`
npm install -D naive-ui
npm install -D @vicons/fluent
Then, install the coco-gui package.
`bash`
npm install coco-gui
Now, you can import the components you need in your Vue project.
The KnowledgeBase class is a singleton class that provides access to the CoCo knowledge base.
`javascript
import { coco } from 'coco-gui';
const kb = coco.KnowledgeBase.getInstance();
`
Notice that the returned KnowledgeBase object is reactive. This means that you can use it in Vue components to visualize the types, the items, the rules and the solvers.
In order to visualize the types, the items and the solvers, you can use Vue-Router to navigate between the different components.
Create a new Vue component for each type, item and solver.
Create a TypeView.vue file.
`javascript
`
Create an ItemView.vue file.
`javascript
`
Create a SolverView.vue file.
`javascript
`
Now, you can use Vue-Router to navigate between the different components.
`javascript
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import TypeView from '../views/TypeView.vue'
import ItemView from '../views/ItemView.vue'
import SolverView from '../views/SolverView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/type/:id',
name: 'type',
component: TypeView
},
{
path: '/item/:id',
name: 'item',
component: ItemView
},
{
path: '/solver/:id',
name: 'solver',
component: SolverView
}
]
})
export default router
`
You can now create a CoCo GUI by using the components you need in your Vue project.
`javascript
CoCo
`
Widgets can be used to display information in a graphical user interface. The CocoFrame component can be used to display a frame with a title. The CocoFrame component requires a title prop to specify the title of the frame.
` Contentjavascript
`
The TaxonomyGraph component can be used to visualize the taxonomy graph. The TaxonomyGraph component requires a graph_id prop to specify the id of the graph. The TaxonomyGraph component uses the Cytoscape library to render the graph.
`javascript
`
Maps can be used to display geo-referenced information. The CocoMap component can be used to display a map. The CocoMap component requires a map_id prop to specify the id of the map. Once the map is created, the created event is emitted. The returned map object, based on the Leaflet library, can be used to add layers to the map.
Install the required packages.
`bash`
npm install -D leaflet
npm install -D @types/leaflet
`javascript
``